일러스트레이터의 SVG 코드 용량 줄이기 : svgomg 사이트

앞서 일러스트레이서 만든 SVG 를 VSCode 로

Copy & Paste 하면 코드가 된다고 하였다.

<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="176.3px"
	 height="152.7px" viewBox="0 0 176.3 152.7" style="overflow:visible;enable-background:new 0 0 176.3 152.7;"
	 xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#F9B233;stroke-width:20;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<polygon class="st0" points="126.5,10 49.9,10 11.5,76.4 49.9,142.7 126.5,142.7 164.8,76.4 "/>
</svg>

하지만 꽤나 지저분해보이며, 쓸데없는 코드를 일일히 지워야하는 수고가 있다.

이를 해결해주는 사이트가 있다.

jakearchibald.github.io/svgomg/

 

VSCode 에 복붙하기전에, 위 사이트에 붙여넣기를 하면

쑬데없는 코드를 지워주고, path 또한 간결하게 만들수있어서, 최종 용량이 줄어준다.

한가지 기억해야할것은, 이 사이트를 이용시 polygon 이 path 로 변환된다.

<svg xmlns="http://www.w3.org/2000/svg" width="176.3" height="152.7" viewBox="0 0 176.3 152.7" overflow="visible">
  <path fill="none" stroke="#f9b233" stroke-width="20" stroke-miterlimit="10" d="M126.5 10H49.9L11.5 76.4l38.4 66.3h76.6l38.3-66.3z"/>
</svg>

style 링을 css 에서 할거라면, style 태그또한 삭제할수있다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.3 152.7" style="overflow:visible;enable-background:new 0 0 176.3 152.7">
  <path class="st0" d="M126.5 10H49.9L11.5 76.4l38.4 66.3h76.6l38.3-66.3z"/>
</svg>