SVG 개요

SVG란 확장 가능한 벡터 그래픽(Scalable Vector Graphics)이자 XML 기반의 2차원 그래픽이다.

• DOM의 일부로서 각 객체별로 HTML 엘리먼트가 추가된다.
• 모양이 복잡하지 않을 경우 파일 사이즈도 작다.
• 포인트가 많으면 많을 수록 계산해서 그려지기 때문에 성능이 떨어진다.
• CSS와 자바스크립트를 사용해서 조작이 가능하다.

캔버스

• 비트맵 기반의 그래픽이다.
• 게임 등 퍼포먼스가 중요한 이미지 조작등에 사용된다.
• 단일 태그 <canvas>로 표현한다.
• 픽셀 단위로 조작이 가능하다.
• low-level API로 코딩량이 많고 까다롭다.

HTML 문서에 SVG를 넣는 방법

• <img> 태그
• CSS Background
• SVG 요소들을 직접 inline으로 삽입
• <object> 태그
• <embed> 태그 (사용하지 않음)
• <iframe> 태그 (사용하지 않음)

//object 태그
<object data="images/icon.svg" type="image/svg+xml"></object>

크기 설정

• 인라인으로 적용
• css로 적용
• viewbox로 적용: 상대적인 비율로 안의 내용 크기가 변경된다.

<!-- x 0, y 0 위치에 가로 500 세로 500의 크기 -->
<svg viewBox="0 0 500 500">
    <rect x="0" y="0" width="100" height="100"></rect>
</svg>

SVG 압축하기

SVGOMG에서 압축할 수 있다.

CDATA

svg 내부에서 CSS 혹은 java script를 정의할 때 xml parser 오류를 방지하기 위해 기재해두면 좋다.

<style>
<![CDATA[
    .style {
        color: red;
    }
]]>
</style>

---

REFERENCE
인프런 SVG 마스터
https://www.inflearn.com/course/mastering-svg