SVG로 간단한 로고 생성 공유

오늘 저는 SVG로 만든 간단한 로고를 공유하고 싶습니다. 몇 줄의 코드만으로 쉽게 사용자 지정할 수 있고 휴대성이 뛰어난 멋진 로고를 만들 수 있습니다. 따라서 처음부터 시작하거나 현재 로고를 업데이트하려는 경우 SVG가 완벽한 형식입니다!

<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>

데모:



Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgODAgNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjgwIiBoZWlnaHQ9IjYwIj4KICA8c3R5bGU+CiAgICB0ZXh0IHsgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICBmb250LXNpemU6MjBweDsKICAgIH0KICA8L3N0eWxlPgogICAgPHJlY3QgZmlsbD0icmdiKDAsMCwwKSIgaGVpZ2h0PSI5MCUiIHJ4PSI0IiB3aWR0aD0iOTAlIiB4PSI1JSIgeT0iNSUiPiA8L3JlY3Q+ICAgICAgICAgICAgICAgCiAgICA8dGV4dCBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSJyZ2IoMjU1LDI1NSwyNTUpIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB4PSI1MCUiIHk9IjUwJSI+RVhQPC90ZXh0PiAgICAgCjwvc3ZnPg==

옵션 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>

데모:



Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgMTQwIDYwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iNjAiPgogIDxzdHlsZT4KICAgIHRleHQgeyBmb250LXdlaWdodDogYm9sZDsKICAgIGZvbnQtc2l6ZToyMHB4OwogICAgfQogIDwvc3R5bGU+CiAgICA8cmVjdCBmaWxsPSJyZ2IoMCwwLDApIiBoZWlnaHQ9IjkwJSIgcng9IjQiIHdpZHRoPSI5MCUiIHg9IjUlIiB5PSI1JSI+IDwvcmVjdD4gICAgICAgICAgICAgICAKICAgIDx0ZXh0IGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwJSIgeT0iNTAlIj5FWEFNUExFPC90ZXh0PiAgICAgCjwvc3ZnPg==

옵션 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>

데모:



Base64 URI:

data:image/svg+xml;base64,PHN2ZyB2aWV3Ym94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiI+CiAgPHN0eWxlPgogICAgdGV4dCB7IGZvbnQtd2VpZ2h0OiBib2xkOwogICAgZm9udC1zaXplOjE2MHB4OwogICAgfQogIDwvc3R5bGU+CiAgICA8cmVjdCBmaWxsPSJyZ2IoMCwwLDApIiBoZWlnaHQ9IjkwJSIgcng9IjQiIHdpZHRoPSI5MCUiIHg9IjUlIiB5PSI1JSI+IDwvcmVjdD4gICAgICAgICAgICAgICAKICAgIDx0ZXh0IGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwJSIgeT0iNTAlIj5FWFA8L3RleHQ+ICAgICAKPC9zdmc+

그것이 바로 오늘 여러분과 나누고 싶은 것입니다!

읽어 주셔서 감사합니다!

더 많은 리소스를 얻으려면 내 웹 사이트를 방문하십시오.

www.howbeginners.com