Vue 에서 SVG 사용 완벽정리! : 일러스트레이터

앞서 SVG 관련 포스트가 있지만, 

좀더 완벽하게 정리해놓으려한다.

---

1. 일러스트레이터에서 텍스트를 작성한뒤, 적당한 폰트를 고른다.

2. Create Outlines 를 이용해 path 로 깨트린다.

path 로 깨진 텍스트

3. 일러스트레이터에서 Ctrl + C (복사) 한뒤,

jakearchibald.github.io/svgomg/ 에서 Ctrl + V (붙여넣기한다)

 

이렇게 하면 Path 와 여러 잡스러운 SVG 태그가 정리된다.

 

4. 이를 다시 복사해 VSCode 에 붙여넣는다.

<svg viewBox="0 0 32.8 11.5" style="overflow:visible;enable-background:new 0 0 32.8 11.5">
  <path d="M10.3 1.5c-.6 1.3-1 2.7-1.5 4-.5 1.5-1 2.9-1.3 4.3-.1.5-.2 1-.4 1.5-.2 0-.3-.1-.4-.1h-.1c-.1-.1-.1-.2-.2-.3-.1 0-.2.2-.3.2h-.5c-.1-.1-.1-.3-.1-.4-.3 0-.3.5-.6.5-.1 0-.2-.1-.3-.1 0-.4.1-.7.3-1.1.3-1 .6-2 1.1-2.9-.2-.2-.3-.3-.4-.3-.3 0-1.2.3-1.6.3-.2.3-.3.7-.4 1.1-.3.7-.5 1.4-.7 2.2-.1.3-.1.8-.4 1-.2 0-.2-.2-.2-.4h-.1c-.1 0-.2.3-.3.3 0-.1-.1-.1-.2-.1s-.3.1-.4.1c0-.1 0-.3-.1-.4-.3 0-.2.4-.4.5H.7c-.1 0-.3-.1-.3-.1-.1 0-.1.1-.3.1H0c0-.4.3-1.5.5-1.7.1-.1.1-.5.1-.7.1-.2.2-.3.2-.5.2-.6.4-1.3.6-1.9.1-.3.2-.7.4-1 0-.1.1-.1.1-.2.1-.1.1-.3.2-.5l.6-1.5c.3-.6.5-1.3.9-1.9.1-.4.2-.7.5-1 .2 0 .1.2.2.2.5 0 .5-.7 1-.7 0 .1.1.1.1.2 0 .2-.1.4-.1.6 0 .1 0 .1.1.2.3 0 .3-.3.5-.5.1 0 .1.2.3.2.3 0 .4-.4.7-.4l.1.1c0 .1-.1.2-.2.3-.4.5-.6.9-.9 1.3 0 .4-.2.6-.4 1 0 .2-.1.4-.1.6l-.6 1.2c0 .1.1.2.2.2s.3-.1.4-.1c.4-.1.8-.2 1.1-.2.3-.3.4-.7.5-1.1.4-1 .8-1.9 1.2-2.9h.3c.1 0 .2 0 .3-.1h.1c.1 0 .1.1.2.2.2-.2.2-.6.5-.8.2 0 .2.3.2.5.1 0 .3-.1.4-.1.1 0 .1.1.2.1.2-.1.2-.3.5-.3 0 .1.1.1.1.2-.1.2-.6.9-.7 1.1zM3.5 5.3h-.2l-.1.1c0 .1.1.2.2.2 0 0 .1-.1.1-.2v-.1zm.6-.6c0-.1 0-.2-.1-.2 0 0 0 .1-.1 0 0 .2.1.2.2.2zm.4-.4h-.1v.1c0 .1 0 .1.1.2v-.3zm.6 1.3c-.1.2 0 .3.1.3 0 0 .1 0 .1-.1 0-.2 0-.2-.2-.2zm.7.1c-.1 0-.1 0 0 0h-.2s0 .1-.1.1v.1s.1 0 .1.1h.1c0-.1 0-.2.1-.3zm1 0c-.1 0-.1 0 0 0-.2 0-.2.1-.4 0 0 .2.2.3.3.3.1 0 .1 0 .1-.1v-.2zm0 3.6c-.1 0-.1-.1-.1-.1l-.1.1c0 .1 0 .1.1.1 0 0 .1 0 .1-.1zm.4-4H7v.1c0 .1 0 .2.1.2s.1-.1.1-.3zm1-2.6H8V3c0 .1 0 .2.2.2.1 0 .1-.1.1-.2-.1-.1-.1-.2-.1-.3z"/>
  <path d="M16 4c-.3.1-.7 0-1 .2 0 .2.3.2.4.4 0 .2-.3.2-.3.4 0 .1.1.2.1.4v.1h-.3c-.4 0-.8-.1-1.2-.1-.5 0-.9 0-1.2.5-.1.2-.2.3-.2.5v.1h.7c.3 0 .6-.1.9-.1.2 0 .4 0 .5.2v.1c0 .3-.4.2-.5.4 0 .2.3.2.3.4s-.2.2-.3.3c0 .2.2.3.2.5v.1c-.2.1-.4.1-.5.1-.4 0-.9-.1-1.3-.1H12c0-.2 0-.3-.1-.3-.4.2-.4.9-.6 1.3.1.2.3.2.5.2.6 0 1.2-.1 1.8-.1h.3c0 .3-.3.4-.3.5 0 .1.1.2.1.3-.1.1-.4.1-.5.3.1.3.6 0 .6.4 0 .1-.3.4-.4.5-.3.1-1.9.1-2.4.1h-.6c-.1 0-.3-.1-.4-.1-.1 0-.2.1-.4.1h-.1v-.1c0-.3.3-.3.3-.5s-.3-.2-.4-.3v-.3c0-.1 0-.2-.1-.2-.3 0-.4.2-.6.2v-.2c0-1 1.5-4.5 2-5.6.2 0 .2.2.4.2s.3-.1.4-.3c0-.2-.2-.3-.2-.5.1-.1.3-.1.4-.1v-.1-.2-.1c.7-.2 1.4-.2 2.1-.2.6 0 1.3 0 2 .1v.1c0 .2-.2.2-.2.3.2 0 .4-.1.4.2zm-5.2 5.9s-.1.1 0 0c-.1.1-.1.1 0 0-.1.2 0 .2.1.2h.1V10c-.1 0-.1-.1-.2-.1zm.1-1.5v.1c0 .1 0 .1.1.1v-.2h-.1zm.3 2.5c-.1 0-.2 0-.2.1h.1c0 .1.1 0 .1-.1zm.4-1.2c-.1.1-.1.1-.1.2v.1h.1c.1 0 .2-.1.2-.2 0 0-.1-.1-.2-.1zm1.1-4.9c-.3 0-.3.3-.3.5h.1c.2 0 .3-.3.2-.5zm1.8-.7c-.1 0-.2 0-.2.1.1 0 .1.1.2.1v-.2z"/>
  <path d="M20 9.6c-.3.2-.7.1-1 .3 0 .2.3.2.4.3v.1c0 .1-.1.2-.1.3v.1c.1.1.3.1.4.3 0 .2-.2.3-.3.4-.5 0-1-.1-1.4-.1h-2.8c0-.3.3-.3.3-.5s-.3 0-.3-.4v-.3-.1h-.1c-.2 0-.3.3-.6.3h-.1v-.2c0-.3.2-.5.3-.8.3-.8.6-1.5.9-2.3.5-1.3 1.1-2.6 1.7-3.9.2 0 .2.2.3.2.4-.2.4-.7.8-.7 0 .1.1.1.1.2s-.1.3-.1.4c0 .1 0 .1.1.2.3 0 .3-.4.5-.4s.2.3.3.3c.1 0 .3-.1.4-.1h.1v.1c0 .3-.4.9-.6 1.3-.6 1.1-1.2 2.4-1.7 3.7-.1.3-.2.5-.3.8 0 .1.1.2.2.2s.2-.1.4-.1c.6 0 1.2-.1 1.8-.1h.2c.1.2.2.2.2.5zm-3.5 0c0-.1 0-.2-.1-.2 0 .1-.1.1-.1.1v.1c0 .1.1.1.2 0 0 .1 0 .1 0 0zm.3-.4c-.1 0-.1-.1-.2-.1v.3h.1c.1 0 .1-.1.1-.2z"/>
  <path d="M25.5 9.6c-.3.2-.7.1-1 .3 0 .2.3.2.4.3v.1c0 .1-.1.2-.1.3v.1c.1.1.3.1.4.3 0 .2-.2.3-.3.4-.5 0-1-.1-1.4-.1h-2.8c0-.3.3-.3.3-.5s-.3 0-.3-.4v-.3-.1h-.1c-.2 0-.3.3-.6.3h-.1v-.2c0-.3.2-.5.3-.8.3-.8.6-1.5.9-2.3.5-1.3 1.1-2.6 1.7-3.9.2-.1.2.1.4.1.4-.1.3-.6.7-.6 0 .1.1.1.1.2s-.1.3-.1.4c0 .1 0 .1.1.2.3 0 .3-.4.5-.4s.2.3.3.3c.1-.1.2-.3.3-.3h.1v.1c0 .3-.4.9-.6 1.3-.5 1.3-1.1 2.6-1.6 3.9-.1.3-.2.5-.3.8 0 .1.1.2.2.2s.2-.1.4-.1c.6 0 1.2-.1 1.8-.1h.2c0 .2.2.2.2.5zm-3.5 0c0-.1 0-.2-.1-.2 0 .1-.1.1-.1.1v.1c0 .1 0 .1.2 0 0 .1 0 .1 0 0zm.3-.4c-.1 0-.1-.1-.2-.1v.3h.1c.1 0 .1-.1.1-.2z"/>
  <path d="M32.8 5.6c0 1.5-.6 3.2-1.5 4.4-.1.1-.2.3-.3.4-.1.1-.2.1-.3.2-.1.1-.1.2-.2.2-.6.4-1.4.6-2.1.6-.3 0-.6 0-.9-.1-.7-.3-.9-.4-1.2-1.1-.2-.1-.3-.4-.3-.7v-.6c0-.1-.1-.2-.1-.4s0-.3.1-.4c.1-.7.4-1.3.6-1.9.1-.2.1-.4.2-.6.3-.5.8-1 1.2-1.6.6-.6 1.5-1 2.3-1.1.1 0 .2 0 .3.1v.4c0 .1 0 .2.1.2 0 .2-.2.2-.2.4v.1c.2.2.4.4.7.4.2 0 .1-.4.2-.5h.2c.3 0 .1-.4.3-.5.5.1.9 1.5.9 1.9v.2zm-2.6-.5c-.9 0-1.6 1.6-1.8 2.3-.1.4-.2.8-.2 1.2 0 .4.1.8.5.8.3 0 .5-.3.7-.3H29.7V9c0-.1 0-.2.1-.3.5-.6.7-1.4.9-2.2.1-.3.2-.6.2-.9-.3-.2-.4-.5-.7-.5zm-1.7 5.1c-.1 0-.1.1-.1.2s.1.2.1.2.1-.1.1-.2 0-.2-.1-.2zm.8.1c0-.2-.1-.4-.3-.3 0 0-.1.1-.1.2s0 .2.1.2h.1c.1 0 .2 0 .2-.1z"/>
</svg>

엄청나게 길지만, 이게 Hello 의 Path 다.

위에서 style 속성을 제거해준다.

 

viewBox 외에 다른 속성이 SVG 태그안에 필요하지않다.

필요한것은 CSS 클래스로 정의하게된다.

5.  이제 CSS 에서 svg 를 정의한다.

svg {

  width   : 80%; // 이걸로 크기 조절!
  height  : 100%; // 이건 무조건 그냥 fix!
  fill    : #454545;
  filter  : drop-shadow(0 2px 2px black);

}

svg 를 CSS 에서 스타일링할때 중요한것은,

width, height 를 정의해주지않으면 아무것도 보이지않는다.

width 를 조절하면 현재 ratio 를 유지하면서 알아서 resizing 된다.

height 는 그냥 100% 으로 유지해야한다.

VST 에서 ratio 를 유지하면서 창 크기를 키우고 줄이는것을 상상해보면 된다.

또한 fill 은 path 의 색깔이다.

또한, span 태그에서는 글자에 text-shadow 속성으로 그림자를 만들었지만,

SVG path 에서는 filter 에서 drop-shadow 속성을 사용해야한다.

 

SVG 가 CSS 의 font 보다 좋은점이, px 대신 width 를 통해 % 로 크기를 표현할수있는것이다.

6.  preserveAspectRatio="none" 은 필요없는가?

글자를 표현하려하는경우에는, 사용하지말아야한다.

7. 출력