svg element - by. UXKM

2025-05-16

요약 설명
<svg> 요소는 벡터 기반의 그래픽을 문서 내에 직접 삽입하거나 정의할 수 있는 시맨틱 태그로, 선(Line), 도형(Rectangle, Circle), 텍스트, 패스(Path) 등을 사용해 해상도에 의존하지 않는 그래픽을 표현할 수 있습니다.
픽셀 기반 이미지(.png, .jpg 등)와 달리, SVG는 확대하거나 축소해도 품질 저하 없이 선명하게 유지되는 벡터 그래픽 포맷으로, 반응형 웹과 고해상도 화면에 매우 적합합니다.
SVG는 HTML 문서 안에 직접 작성(이하 'inline-svg')하거나 외부 파일로 불러올 수 있으며, inline-svg의 경우 CSS와 JavaScript를 통해 세밀한 스타일링과 동적 제어가 가능합니다. 하지만 외부 파일로 삽입한 경우에는 내부 요소에 대한 제어가 제한됩니다.
아이콘, 차트, 애니메이션 등 다양한 웹 그래픽에서 널리 활용됩니다.

<svg> 요소는 <img> 요소로 .svg 파일을 불러오는 방식이 아니라, HTML 문서 내에서 <svg> 태그를 직접 작성하여 사용하는 Inline SVG를 의미합니다.

주요 역할 및 특징

해상도에 독립적인 그래픽 표현
- 픽셀 기반의 래스터 이미지(PNG, JPG)와 달리, SVG는 수학적 정의를 기반으로 하므로 확대/축소 시에도 해상도가 깨지지 않습니다.
- 반응형 웹 디자인에서 고해상도 디스플레이(예: Retina 디스플레이)에서도 선명한 그래픽을 제공할 수 있습니다.
XML 기반의 코드 사용
- HTML 내부에 직접 SVG 코드를 삽입할 수 있으며, XML 문법을 따릅니다.
- 예: <circle>, <rect>, <path> 등의 태그를 사용하여 도형을 그릴 수 있습니다.
CSS 및 JavaScript와 연동 가능
- SVG 요소는 CSS를 통해 스타일링할 수 있으며, JavaScript를 사용하여 동적으로 조작할 수 있습니다.
- SVG 내부 요소는 CSS 및 JavaScript를 활용하여 애니메이션을 적용할 수 있습니다.
파일 크기 최적화
- 동일한 복잡도를 가진 래스터 이미지(png, jpg)보다 파일 크기가 작을 수 있어 웹 성능 최적화에 유리합니다.
- 텍스트 기반의 XML 형식이므로 압축 및 최적화가 용이합니다.
브라우저에서 직접 렌더링 가능
- <img> 요소로 불러오는 방식과 달리, HTML 내에서 <svg> 태그를 직접 작성하면 브라우저가 즉시 렌더링합니다.
- 별도의 요청 없이 즉시 표시되므로 로딩 속도가 빠릅니다. 대부분의 최신 브라우저(Chrome, Firefox, Edge, Safari 등)에서 기본적으로 지원됩니다.
SVG의 주요 도형 요소
- SVG의 내부 도형 요소로는 사각형을 그리는 <rect>, 원을 그리는 <circle>, 타원을 표현하는 <ellipse>, 선을 생성하는 <line>, 다각형을 그리는 <polygon>, 자유로운 형태를 지정하는 <path> 등이 있습니다.
- 내부 도형 요소를 활용하여 자유로운 그래픽을 직접 그릴 수 있습니다.

CSS 기본 값

<svg> 요소는 기본적으로 인라인 레벨 요소입니다.

							svg {
								display: inline;
							}

기본 문법

							<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
								<!-- 하위 도형 요소 (필수) -->
							</svg>

SVG의 주요 도형 요소

SVG는 도형 요소 없이도 단독으로 사용할 수 있지만, 시각적인 요소를 표시하려면 <rect>, <circle> 등의 도형 요소나 <image> 요소가 필요합니다.

도형 요소 요약

요소
성명
주요 속성

<rect>

사각형

x, y, width, height, rx, ry
<circle>

원

cx, cy, r
<ellipse>

타원

cx, cy, rx, ry
<line>

선

x1, y1, x2, y2, stroke
<polygon>

다각형

points (꼭짓점 좌표 나열)
<polyline>

연속된 선

points
<path>

자유로운 선

d (경로 데이터)

<rect> (사각형)

속성 설명 :: x : 사각형의 왼쪽 상단 꼭짓점의 X 좌표; y : 사각형의 왼쪽 상단 꼭짓점의 Y 좌표; width : 사각형의 가로 길이; height : 사각형의 세로 길이; rx : 가로 방향의 모서리 둥글기 (값이 클수록 둥글어짐); ry : 세로 방향의 모서리 둥글기

								<rect x="20" y="20" width="100" height="50" rx="10" ry="10" fill="red"/>

<circle> (원)

속성 설명 :: cx : 원의 중심 X 좌표; cy : 원의 중심 Y 좌표; r : 원의 반지름

								<circle cx="100" cy="100" r="50" fill="blue"/>

<ellipse> (타원)

속성 설명 :: cx : 타원의 중심 X 좌표; cy : 타원의 중심 Y 좌표; rx : 타원의 가로 반지름; ry : 타원의 세로 반지름

								<ellipse cx="100" cy="100" rx="60" ry="40" fill="green"/>

<line> (선)

속성 설명 :: x1 : 선의 시작점 X 좌표; y1 : 선의 시작점 Y 좌표; x2 : 선의 끝점 X 좌표; y2 : 선의 끝점 Y 좌표

								<line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2"/>

<polygon> (다각형)

속성 설명 :: points : 꼭짓점 좌표들의 집합 (X, Y 값 나열)

								<polygon points="50,10 90,80 10,80" fill="yellow" stroke="black"/>

<polyline> (연속된 선)

속성 설명 :: points : 연속된 점들의 좌표 (각 점을 연결한 선)

								<polyline points="10,30 50,90 90,30 130,90" stroke="black" fill="none"/>

<path> (자유로운 경로)

속성 설명 :: d : 경로를 정의하는 속성

경로를 정의하는 속성 설명 :: M x y : (Move To) x, y 좌표로 시작점 이동; L x y : (Line To) x, y 좌표로 선 그리기; C x1 y1, x2 y2, x y : (Cubic Bézier) 제어점 (x1, y1), (x2, y2)와 끝점 (x, y)으로 곡선 그리기; S x2 y2, x y : (Smooth Bézier) C와 비슷하지만 이전 제어점을 기준으로 부드러운 곡선 생성

								<path d="M10 80 C40 10, 65 10, 95 80 S150 150, 180 80" stroke="black" fill="none"/> <!-- path -->

SVG와 도형 요소의 공통 속성

fill, stroke, stroke-width, opacity, transform 속성은 <svg> 요소와 그 하위 도형 요소에서 모두 사용할 수 있습니다.
하지만 <svg> 요소에서 적용할 경우, 기본적으로 내부의 모든 도형에 영향을 미치며, 개별 도형 요소에서 설정하면 해당 도형에만 적용됩니다.

공통 속성 설명

속성
설명

fill

도형 내부 색상 (none 사용 시 투명)
stroke

테두리 색상
stroke-width

테두리 두께
opacity

투명도 (0 ~ 1)
transform

이동, 회전, 크기 조정 (translate(), rotate(), scale())

SVG에 적용 vs 개별 도형 요소에 적용

<svg> 요소에서 사용될 때

<svg> 요소에 적용하면 기본값으로 하위 도형 요소들에게 영향을 줍니다.
하위 요소가 개별적으로 속성을 설정하지 않으면, <svg>에서 지정한 값이 적용됩니다.

예시 설명 :: <circle>에 fill, stroke를 따로 지정하지 않았기 때문에 <svg>의 속성을 상속받습니다.

									<svg width="200" height="200" fill="red" stroke="blue" stroke-width="5">
										<circle cx="50" cy="50" r="40" /> <!-- red로 채워지고, 파란색 stroke 적용 -->
									</svg>

개별 도형 요소에서 사용될 때

도형 요소에서 직접 fill, stroke, stroke-width 등을 설정하면 개별 스타일이 적용됩니다.
<svg>에서 설정한 값보다 개별 도형의 속성이 우선됩니다.

예시 설명 :: <circle>에 fill="yellow"를 설정했기 때문에, <svg>의 fill="red" 값은 적용되지 않습니다.; stroke="green"을 설정하여 <svg>의 stroke="blue" 값도 덮어씁니다.

									<svg width="200" height="200" fill="red" stroke="blue" stroke-width="5">
										<circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="3"/>
									</svg>

SVG 속성

`<svg>` 속성 요약

속성명
설명

xmlns [필수]

SVG 네임스페이스를 정의
viewBox

좌표 시스템과 크기를 설정
preserveAspectRatio

viewBox가 SVG의 크기와 어떻게 맞춰지는지 설정
width / height

SVG의 너비 / 높이를 지정
x / y

SVG가 부모 요소 내에서 배치되는 위치를 지정
overflow

SVG 내용이 부모 요소를 벗어날 때의 동작을 설정
baseProfile

SVG의 프로파일을 설정 (SVG 1.1에서 사용)
contentScriptType

내장된 <script> 요소의 MIME 타입을 지정 (거의 사용되지 않음)
contentStyleType

내장된 <style> 요소의 MIME 타입을 지정
externalResourcesRequired

외부 리소스 (예: 이미지, CSS 등)의 로딩 여부 설정

[xmlns] 필수 <svg xmlns="값">

<svg> 문서를 XML 기반으로 해석할 수 있도록 필수적으로 포함해야 하는 속성입니다.
일반적으로 http://www.w3.org/2000/svg 값이 사용됩니다.

								<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
									<!-- 하위 도형 요소 (필수) -->
								</svg>

[viewBox] 선택 사항 <svg viewBox="값">

<svg> 내부의 좌표계를 정의하며, 가상의 좌표 시스템을 설정합니다.

형식 :: viewBox="minX minY width height"

아래 코드에서 viewBox="0 0 200 100"은 내부적으로 200x100 좌표계를 사용하지만, 실제 SVG 크기는 400x200으로 조정됩니다.

								<svg viewBox="0 0 200 100" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
									<!-- 하위 도형 요소 (필수) -->
								</svg>

[preserveAspectRatio] 선택 사항 <svg preserveAspectRatio="값">

viewBox가 <svg> 요소의 크기와 어떻게 맞춰지는지를 정의합니다.

형식 : preserveAspectRatio="align meet/slice": meet : 원본 비율을 유지하며 SVG 안에 맞춤; slice : SVG 영역을 초과하더라도 비율 유지

기본값 :: xMidYMid meet

								<svg preserveAspectRatio="xMinYMin meet" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
									<!-- 하위 도형 요소 (필수) -->
								</svg>

[width / height] 선택 사항 <svg width="값" height="값">

<svg> 요소의 실제 표시 크기를 지정합니다.
viewBox 없이 사용하면 해당 크기가 절대 크기로 적용됩니다.

								<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
									<!-- 하위 도형 요소 (필수) -->
								</svg>

[x / y] 선택 사항 <svg x="값" y="값">

<svg>가 부모 요소 내에서 배치되는 위치를 지정합니다. inline-svg에서만 적용됩니다.
(inline-svg란? .svg 파일을 <img> 요소로 불러오는 방식이 아니라, HTML 문서 내에서 <svg> 태그를 직접 사용하여 SVG 그래픽을 삽입하는 방식을 의미합니다.)

								<svg x="50" y="50" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
									<!-- 하위 도형 요소 (필수) -->
								</svg>

[overflow] 선택 사항 <svg overflow="값">

<svg> 내부 내용이 <svg> 요소의 크기를 초과할 경우 어떻게 처리할지 결정합니다.

사용 가능 값 :: visible (기본값) : 초과된 부분을 보여줌; hidden : 초과된 부분을 숨김; scroll : 스크롤 가능 (거의 사용되지 않음)

								<svg overflow="hidden" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
									<!-- 하위 도형 요소 (필수) -->
								</svg>

[baseProfile] 선택 사항 <svg baseProfile="값">

<svg> 버전을 정의하는 속성입니다. (SVG 1.1에서 사용됨, 최신 버전에서는 필요 없습니다.)

값 :: tiny : 제한된 기능을 가진 가장 가벼운 프로파일; basic : tiny보다 기능이 많지만 full보다는 제한적인 중간 수준 프로파일; full : 모든 SVG 기능을 지원하는 가장 강력한 프로파일

								<svg baseProfile="full" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
									<!-- 하위 도형 요소 (필수) -->
								</svg>

[contentScriptType] 선택 사항 <svg contentScriptType="값">

<svg> 요소에서 사용할 스크립트 타입을 정의합니다. 거의 사용되지 않으며, 현대 브라우저에서는 무시됩니다.

								<svg contentScriptType="application/ecmascript">
									<script><![CDATA[
										alert("Hello SVG!");
									]]></script>
								</svg>

[contentStyleType] 선택 사항 <svg contentStyleType="값">

<svg> 요소에서 사용할 스타일 시트의 MIME 타입을 정의합니다. 현대 브라우저에서는 기본적으로 text/css로 인식하므로 필요하지 않습니다.

								<svg contentStyleType="text/css">
									<style><![CDATA[
										circle { fill: pink; }
									]]></style>
									<circle cx="50" cy="50" r="40" />
								</svg>

[externalResourcesRequired] 선택 사항 <svg externalResourcesRequired="값">

외부 리소스(예: 이미지, CSS, JS)가 모두 로드될 때까지 SVG를 렌더링하지 않도록 설정합니다. 최신 브라우저에서는 무시될 가능성이 높습니다.

								<svg externalResourcesRequired="true">
									<image xlink:href="external-image.png" width="100" height="100" />
								</svg>

예제

기본 도형 (원, 사각형, 선, 다각형) 그리기

JavaScript로 동적 SVG 조작

CSS로 동적 SVG 조작

(Reset) 버튼을 클릭하거나 페이지를 새로고침(F5 or ctrl+R or cmd+R)하여 예제를 확인하세요.

로고 애니메이션

실제 프로젝트에서 구현한 svg 애니메이션으로, JavaScript 도움 없이 CSS 만으로 대부분의 svg 애니메이션 구현이 가능합니다.