SVG 기초 | Minstudio

SVG (Scalable Vector Graphics)

SVG는 픽셀의 격자 배열로 이루어진 일반 이미지(JPG, PNG)와 달리, 점과 선, 면을 수학적 공식으로 기록하여 이미지를 그리는 벡터 그래픽 포맷입니다. 화면을 아무리 확대해도 깨지지 않으며 선명도를 유지합니다. 또한 단순한 이미지가 아니라 XML 기반의 코드로 이루어져 있어, HTML 태그처럼 직접 조작하거나 CSS와 JavaScript를 이용해 색상을 바꾸고 애니메이션을 적용할 수 있습니다.

[그림 1] 매끄러운 선명도의 SVG(좌측)와 픽셀 깨짐 현상이 발생하는 일반 이미지(우측) 비교

1. 벡터(Vector)와 래스터(Raster) 비교

벡터 그래픽인 SVG와 래스터(비트맵) 그래픽인 PNG/JPG의 확대 시 차이점을 보여주는 다이어그램입니다.

2. 주요 SVG 도형 태그 (Shapes)

HTML 내에 <svg> 요소를 선언한 뒤, 내부에 도형 태그를 사용하여 그림을 그립니다.

태그명	설명 및 핵심 속성
`<rect>`	사각형을 그립니다. `x, y`(시작점), `width, height`(크기), `rx, ry`(둥근 모서리) 속성을 사용합니다.
`<circle>`	원을 그립니다. `cx, cy`(중심점 좌표), `r`(반지름) 속성을 사용합니다.
`<line>`	선분을 그립니다. `x1, y1`(시작점)에서 `x2, y2`(끝점)로 이어집니다.
`<polygon>`	다각형을 그립니다. `points="x1,y1 x2,y2..."` 형태로 점들을 연결하며, 마지막 점은 처음과 자동으로 연결됩니다.
`<path>`	가장 강력한 태그로 복잡한 곡선이나 아이콘을 그릴 때 사용합니다. `d="..."` 속성 안에 명령어(M, L, C, Z 등)를 조합합니다.

3. 스타일링 속성 (Attributes)

SVG는 고유의 속성(Attribute)을 이용해 색상이나 두께를 지정하며, 이는 CSS로도 동일하게 제어할 수 있습니다.

속성명 (CSS 호환)	설명
`fill`	도형의 내부 채우기 색상을 지정합니다. `none`으로 설정하면 투명해집니다.
`stroke`	도형의 윤곽선(테두리) 색상을 지정합니다.
`stroke-width`	윤곽선의 두께를 지정합니다.
`viewBox`	(`<svg>` 전용 속성) 내부 좌표계의 범위를 `"min-x min-y width height"` 형식으로 정의하여 반응형 크기 조절의 기준이 됩니다.