DEV Community

Cover image for Share some simple logo create With SVG
Howbeginners
Howbeginners

Posted on

4 2

Share some simple logo create With SVG

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>
Enter fullscreen mode Exit fullscreen mode

Demo:

svg text

Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgODAgNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjgwIiBoZWlnaHQ9IjYwIj4KICA8c3R5bGU+CiAgICB0ZXh0IHsgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBmb250LXNpemU6MjBweDsKICAgIH0KICA8L3N0eWxlPgogICAgPHJlY3QgZmlsbD0icmdiKDAsMCwwKSIgaGVpZ2h0PSI5MCUiIHJ4PSI0IiB3aWR0aD0iOTAlIiB4PSI1JSIgeT0iNSUiPiA8L3JlY3Q+ICAgICAgICAgICAgICAgCiAgICA8dGV4dCBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSJyZ2IoMjU1LDI1NSwyNTUpIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB4PSI1MCUiIHk9IjUwJSI+RVhQPC90ZXh0PiAgICAgCjwvc3ZnPg==
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Demo:

example svg logo

Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgMTQwIDYwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iNjAiPgogIDxzdHlsZT4KICAgIHRleHQgeyBmb250LXdlaWdodDogYm9sZDsKICAgIGZvbnQtc2l6ZToyMHB4OwogICAgfQogIDwvc3R5bGU+CiAgICA8cmVjdCBmaWxsPSJyZ2IoMCwwLDApIiBoZWlnaHQ9IjkwJSIgcng9IjQiIHdpZHRoPSI5MCUiIHg9IjUlIiB5PSI1JSI+IDwvcmVjdD4gICAgICAgICAgICAgICAKICAgIDx0ZXh0IGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwJSIgeT0iNTAlIj5FWEFNUExFPC90ZXh0PiAgICAgCjwvc3ZnPg==
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Demo:

Image description

Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiI+CiAgPHN0eWxlPgogICAgdGV4dCB7IGZvbnQtd2VpZ2h0OiBib2xkOwogICAgZm9udC1zaXplOjE2MHB4OwogICAgfQogIDwvc3R5bGU+CiAgICA8cmVjdCBmaWxsPSJyZ2IoMCwwLDApIiBoZWlnaHQ9IjkwJSIgcng9IjQiIHdpZHRoPSI5MCUiIHg9IjUlIiB5PSI1JSI+IDwvcmVjdD4gICAgICAgICAgICAgICAKICAgIDx0ZXh0IGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwJSIgeT0iNTAlIj5FWFA8L3RleHQ+ICAgICAKPC9zdmc+
Enter fullscreen mode Exit fullscreen mode

That is what I want to share with you for today!

Thanks for reading!

Visit my website to get more resources:

www.howbeginners.com

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more