[html] SVG 이미지 사용
SVG 이미지는 웹 페이지에서 사용하기에 효과적인 방법 중 하나입니다. 이 포스트에서는 SVG 이미지의 장점과 사용하는 방법에 대해 알아보겠습니다.
목차
SVG 이미지란?
SVG는 Scalable Vector Graphics의 약자로, XML 기반의 이미지 형식을 나타냅니다. 이는 이미지를 확대 또는 축소해도 그 안에 포함된 선, 도형 등이 깨지지 않고 선명하게 보이는 장점이 있습니다.
SVG 이미지의 장점
- 확대/축소에 따른 이미지의 품질 손실이 없습니다.
- 텍스트, 선, 도형 등의 요소들을 분리하여 스타일링할 수 있습니다.
- CSS와의 통합이 용이하여 유연한 디자인을 구현할 수 있습니다.
SVG 이미지 사용 방법
SVG 이미지는 <svg> 태그를 사용하여 삽입할 수 있습니다.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
위의 예시에서는 너비가 100이고 높이가 100인 SVG 요소 안에 빨간색 원을 그리는 코드를 보여줍니다.
SVG 이미지 예시
아래는 간단한 SVG 이미지 예시입니다.
<svg width="200" height="200">
<rect x="10" y="10" width="100" height="100" fill="blue" />
<circle cx="150" cy="150" r="50" fill="green" />
<text x="30" y="180" font-family="Arial" font-size="20" fill="red">SVG</text>
</svg>
SVG 이미지의 장점과 사용 방법에 대해 알아보았습니다. SVG를 사용하여 웹 페이지에 더 많은 화려한 그래픽을 표현해보세요!