Svg 태그 속성

SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 나타내는 XML 기반의 마크업 언어입니다.
SVG는 확장 가능한 벡터 그래픽 형식이므로 이미지가 확대 또는 축소되어도 해상도가 유지됩니다. 이는 다양한 디스플레이 크기와 해상도에 대해 일관된 렌더링을 제공합니다. 즉, 화면이 확대되거나 축소되어도 화질이 깨지지 않는다는 장점이 있습니다.
또, SVG는 CSS 및 JavaScript를 사용하여 애니메이션을 추가할 수 있어 이를 통해 동적인 그래픽 요소를 만들어 사용자 경험을 향상시킬 수 있습니다.

---

주요 SVG 속성 :

width 및 height: SVG 이미지의 가로 및 세로 크기를 지정합니다.

viewBox: SVG 이미지의 뷰박스를 지정합니다. 이는 이미지의 보이는 영역을 정의하며, 스케일링 및 패닝을 제어하는 데 사용됩니다.

fill: 요소의 내부를 채우는 색상을 지정합니다.

stroke: 요소의 테두리 색상을 지정합니다.

stroke-width: 요소의 테두리 두께를 지정합니다.

opacity: 요소의 불투명도를 지정합니다.

transform: 요소의 변환을 지정합니다. 주로 이동, 회전, 크기 조정 등에 사용됩니다.

 

주요 SVG 태그 :

<svg> 태그: SVG 문서의 루트 요소로 사용됩니다. 모든 SVG 요소는 <svg> 요소 내에 포함됩니다. 이 태그는 SVG 이미지의 너비(width), 높이(height), 뷰박스(viewbox) 등의 속성을 정의할 수 있습니다.

<rect> 태그: 직사각형을 그리는 데 사용됩니다. x, y 좌표와 너비(width), 높이(height) 속성을 사용하여 위치와 크기를 지정할 수 있습니다.

<circle> 태그: 원을 그리는 데 사용됩니다. 중심 좌표(cx, cy)와 반지름(radius) 속성을 사용하여 원의 위치와 크기를 지정할 수 있습니다.

<line> 태그: 선을 그리는 데 사용됩니다. 시작점과 끝점의 좌표(x1, y1, x2, y2)를 지정합니다.

<path> 태그: 경로를 그리는 데 사용됩니다. 이 태그는 직선, 곡선, 호 등 여러 유형의 선을 정의하는 데 사용됩니다.

<text> 태그: 텍스트를 표시하는 데 사용됩니다. x, y 좌표를 사용하여 텍스트의 위치를 지정할 수 있습니다.

<polygon> 및 <polyline> 태그: 다각형 및 다중 선을 그리는 데 사용됩니다.

<g> 태그: 그룹을 지정하는 데 사용됩니다. 이를 사용하여 여러 요소를 묶어서 그룹으로 관리할 수 있습니다.