SVG이미지에 대해

 
 
 

1.

예전에는 작업에 들어갈 때 jpg.png 파일을 많이 사용했었는데 최근 간단한 hover효과나 active효과가 들어가는 작은 아이콘 정도에 SVG이미지를 적용하기 시작했다. SVG 이미지를 사용하면서 느낀 장점이라면 hover나 active용 이미지를 따로 만들지 않고 코드로 해당 효과를 줄 수 있다는 것인데 이 부분이 나에게는 굉장히 매력적이었다. 그래서 적어보는 SVG에 대한 내용
 
 

왼쪽 비트맵 이미지, 오른쪽 백터 이미지 ( 왼쪽의 비트맵 이미지는 픽셀 단위로 깨져서 보인다 )
 
SVG는 기존 jpg.png 이미지와 같이 비트맵 형식의 이미지가 아닌 백터 이미지이기 때문에 다양한 환경에서 이미지가 깨질 일 없이 보인다는 것 또한 장점이다. 디자이너의 입장에서 설멍해 보자면 포토샵과 일러스트의 차이로 이해하면 될 것 같다
 
 
 
 

2.

SVG이미지를 html 내부에 삽입하는 방법을 몇 가지 올려보자면
 
1. img 태그로 SVG 삽입

<img src="경로.svg" alt="이미지 설명" width="너비값" height="높이값>

 
2. object 태그로 SVG 삽입

<object type="image/svg+xml" data="경로.svg"> 브라우저에서 iframe을 지원하지 않습니다 </object>

 
3. svg 태그로 직접 SVG 삽입

<svg 
  version="1.1" 
  id="레이어_1" 
  xmlns="http://www.w3.org/2000/svg" 
  x="0px" y="0px" 
  viewBox="0 0 101.79 85.16" 
  style="enable-background:new 0 0 101.79 85.16;">
  <style type="text/css">
    .st0{
    fill:none;
    stroke:#000000;
    stroke-width:5;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    }
  </style>
  <polygon class="st0" points="3.48,4.25 35.26,36.13 98.31,3.97 "/>
  <polygon class="st0" points="42.39,80.57 35.26,36.13 98.31,3.97 "/>
</svg>

 
www.sitepoint.com/add-svg-to-web-page/
내가 서술한 내용외에 더 자세한 내용이 궁금하다면 링크를 걸어두었으니 확인해보는 것도 좋을 듯하다.
이 문서에서는 <object> 태그로 SVG를 사용하는 것에 대해 권장하고 있다. don't use it이라는 것도 있으니 보고 아니다 싶은 건 쓰지 말아야 하겠다. 내 포스팅에는 사용하지 말라는 건 적어두지 않았다
 
 
 
 

3.

SVG는 형태가 단순한 경우에는 괜찮지만 형태가 복잡하고 엥커 포인트가 많은 도형일수록 용량이 커진다는 단점 또한 존재하는 듯하다. 그래서 SVG의 용량을 줄이는데 도움을 주는 사이트를 첨부해본다. 아주 간단한 도형으로 실험해봤는데 40%까지 용량이 줄었다
 
SVG이미지 크기를 줄여주는 사이트
jakearchibald.github.io/svgomg/