이번 포스트에서는 SVG 아이콘을 웹사이트나 앱에 적용하는 방법에 대해 알아보겠습니다.

개요

SVG(Scalable Vector Graphics)는 XML 포맷을 사용하는 2차원 벡터 그래픽을 위한 범용적인 포맷입니다. SVG 아이콘을 사용하면 화면 크기에 관계없이 고품질의 아이콘을 표시할 수 있으며, CSS와 JavaScript를 이용하여 동적인 효과를 적용할 수 있습니다.

SVG 아이콘 적용 방법

1. 인라인 SVG

SVG 코드를 직접 HTML에 삽입하는 방식으로, 아이콘을 마크업 문서에 포함시킬 수 있습니다. 아래는 간단한 예제입니다.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

이 방식은 아이콘을 스타일링하고 스크립트로 조작하기 쉽지만, 코드가 복잡해질 수 있다는 단점이 있습니다.

2. 외부 SVG 파일

SVG 파일을 별도의 파일로 만들고, img 태그나 CSS를 이용하여 해당 파일을 포함시킬 수 있습니다.

<img src="icon.svg" alt="icon" />

이 방식은 코드를 깔끔하게 유지할 수 있지만, 외부 파일을 요청해야하기 때문에 성능 문제가 발생할 수 있습니다.

결론

SVG 아이콘은 다양한 화면 해상도에 유연하게 대응할 수 있는 장점이 있으며, 다양한 방식으로 웹사이트나 앱에 적용할 수 있습니다. SVG 아이콘을 적절히 활용하여 사용자 경험을 향상시키는 것이 중요합니다.