Today I'd like to share some simple logo create in SVG. With just a few lines of code, you can create stunning logos that are both easy to customize and super portable. So whether you're starting from scratch or just looking to update your current logo, SVG is the perfect format for you!
<svg viewbox="0 0 80 60" xmlns="http://www.w3.org/2000/svg" width="80" height="60">
<style>
text { font-weight: bold;
font-size:20px;
}
</style>
<rect fill="rgb(0,0,0)" height="90%" rx="4" width="90%" x="5%" y="5%"> </rect>
<text dominant-baseline="middle" fill="rgb(255,255,255)" text-anchor="middle" x="50%" y="50%">EXP</text>
</svg>
Demo:
Base64 URI:
data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgODAgNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjgwIiBoZWlnaHQ9IjYwIj4KICA8c3R5bGU+CiAgICB0ZXh0IHsgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBmb250LXNpemU6MjBweDsKICAgIH0KICA8L3N0eWxlPgogICAgPHJlY3QgZmlsbD0icmdiKDAsMCwwKSIgaGVpZ2h0PSI5MCUiIHJ4PSI0IiB3aWR0aD0iOTAlIiB4PSI1JSIgeT0iNSUiPiA8L3JlY3Q+ICAgICAgICAgICAgICAgCiAgICA8dGV4dCBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSJyZ2IoMjU1LDI1NSwyNTUpIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB4PSI1MCUiIHk9IjUwJSI+RVhQPC90ZXh0PiAgICAgCjwvc3ZnPg==
Option 2:
<svg viewbox="0 0 140 60" xmlns="http://www.w3.org/2000/svg" width="140" height="60">
<style>
text { font-weight: bold;
font-size:20px;
}
</style>
<rect fill="rgb(0,0,0)" height="90%" rx="4" width="90%" x="5%" y="5%"> </rect>
<text dominant-baseline="middle" fill="rgb(255,255,255)" text-anchor="middle" x="50%" y="50%">EXAMPLE</text>
</svg>
Demo:
Base64 URI:
data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgMTQwIDYwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iNjAiPgogIDxzdHlsZT4KICAgIHRleHQgeyBmb250LXdlaWdodDogYm9sZDsKICAgIGZvbnQtc2l6ZToyMHB4OwogICAgfQogIDwvc3R5bGU+CiAgICA8cmVjdCBmaWxsPSJyZ2IoMCwwLDApIiBoZWlnaHQ9IjkwJSIgcng9IjQiIHdpZHRoPSI5MCUiIHg9IjUlIiB5PSI1JSI+IDwvcmVjdD4gICAgICAgICAgICAgICAKICAgIDx0ZXh0IGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwJSIgeT0iNTAlIj5FWEFNUExFPC90ZXh0PiAgICAgCjwvc3ZnPg==
Option 3:
<svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="512" height="512">
<style>
text { font-weight: bold;
font-size:160px;
}
</style>
<rect fill="rgb(0,0,0)" height="90%" rx="4" width="90%" x="5%" y="5%"> </rect>
<text dominant-baseline="middle" fill="rgb(255,255,255)" text-anchor="middle" x="50%" y="50%">EXP</text>
</svg>
Demo:
Base64 URI:
data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiI+CiAgPHN0eWxlPgogICAgdGV4dCB7IGZvbnQtd2VpZ2h0OiBib2xkOwogICAgZm9udC1zaXplOjE2MHB4OwogICAgfQogIDwvc3R5bGU+CiAgICA8cmVjdCBmaWxsPSJyZ2IoMCwwLDApIiBoZWlnaHQ9IjkwJSIgcng9IjQiIHdpZHRoPSI5MCUiIHg9IjUlIiB5PSI1JSI+IDwvcmVjdD4gICAgICAgICAgICAgICAKICAgIDx0ZXh0IGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwJSIgeT0iNTAlIj5FWFA8L3RleHQ+ICAgICAKPC9zdmc+
That is what I want to share with you for today!
Thanks for reading!
Visit my website to get more resources:
Top comments (0)