svg 태그

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.

 

SVG는 파이어폭스, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있다

 

SVG 브라우저 지원현황(출처 : caniuse-svg)

 

SVG 이미지와 그 동작 방식은 XML 텍스트 파일로 정의한다

따라서 검색, 색인, 스크립트 적용, 그리고 압축이 가능하며, 그래픽 도구 외에도 아무 텍스트 편집기로 생성 및 편집이 가능하다

JPEG와 PNG 등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서 쉽게 처리할 수 있다

 

예제:

동그라미 :

 

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="#18c4c3" stroke-width="4" fill="#fff538" />
</svg>

 

네모 :

 

<svg width="400" height="100">
    <rect width="400" height="100" style="fill:rgb(65 138 255);stroke-width:10;stroke:rgb(18 28 138)" />
</svg>

 

둥근네모 :

 

<svg width="400" height="180">
    <rect x="20" y="20" rx="20" ry="20" width="150" height="150" style="fill:#ffa046;stroke:#ffc052;stroke-width:5;" />
</svg>

 

 

별 :

 

<svg width="300" height="200">
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#ffff20;stroke:#522e1d;stroke-width:5;fill-rule:evenodd;" />
</svg>

 

 

 

참고 사이트 :

• MDN Web docs - SVG
• MDN Web docs - SVG 튜토리얼
• caniuse-svg검색
• w3shcools-svg