[그림 1] 매끄러운 선명도의 SVG(좌측)와 픽셀 깨짐 현상이 발생하는 일반 이미지(우측) 비교
벡터 그래픽인 SVG와 래스터(비트맵) 그래픽인 PNG/JPG의 확대 시 차이점을 보여주는 다이어그램입니다.
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 등)를 조합합니다. |
SVG는 고유의 속성(Attribute)을 이용해 색상이나 두께를 지정하며, 이는 CSS로도 동일하게 제어할 수 있습니다.
| 속성명 (CSS 호환) | 설명 |
|---|---|
fill |
도형의 내부 채우기 색상을 지정합니다. none으로 설정하면 투명해집니다. |
stroke |
도형의 윤곽선(테두리) 색상을 지정합니다. |
stroke-width |
윤곽선의 두께를 지정합니다. |
viewBox |
(<svg> 전용 속성) 내부 좌표계의 범위를 "min-x min-y width height" 형식으로 정의하여 반응형 크기 조절의 기준이 됩니다. |
<div class="svg-container">
<!-- 반응형 유지와 Hover 시 요소가 잘리지 않도록 viewBox 여백 확대 (-15 -15 130 130) -->
<svg class="interactive-svg" viewBox="-15 -15 130 130" xmlns="http://www.w3.org/2000/svg">
<!-- 배경 원 -->
<circle cx="50" cy="50" r="55" fill="#1e293b" stroke="#3b82f6" stroke-width="2" />
<!-- CSS 클래스로 제어할 다각형 (별 모양) -->
<polygon id="magicStar" class="star"
points="50,15 61,35 85,35 66,50 73,75 50,60 27,75 34,50 15,35 39,35" />
<!-- JavaScript로 조작할 텍스트 -->
<text id="statusText" x="50" y="90" text-anchor="middle" fill="#94a3b8" font-size="8">Hover or Click the Star</text>
</svg>
</div>