웹사이트에서 SVG 아이콘 활용하는 3가지 방법 (이미지보다 유연한 SVG 사용법)3 Ways to Use SVG Icons on Your Website (More Flexible Than Image Files)

이번 포스팅에서는 웹사이트에 아이콘을 넣을 때 일반적인 이미지 확장자 파일(JPG, GIF, PNG) 대신 SVG를 사용하는 방법 3가지를 소개해드리겠습니다.

SVG는 크기 확대/축소 시 깨지지 않으며, CSS로 색상 조절 등 다양한 조작이 가능하다는 장점이 있어 아이콘 삽입에 특히 유용합니다.

그럼 각 방법에 대해 장단점을 중심으로 하나씩 알아보겠습니다.

1. .svg 확장자 이미지 파일로 넣기

가장 기본적인 방법으로, 확장자가 .svg인 파일을 <img> 태그로 삽입하는 방식입니다.

<img src="icon.svg" alt="아이콘 설명" />

1.1. 장점

• 마크업이 간단하고 다른 이미지 파일과 동일한 방식으로 다룰 수 있어 유지보수가 용이합니다.

1.2. 단점

• CSS로 색상 변경 등의 조작이 제한적입니다. 색상 변경이 필요한 경우 적합하지 않을 수 있어요.

2. <svg> 태그로 직접 삽입하기

SVG 파일의 소스를 그대로 HTML 코드에 삽입하여 <svg>, <path> 태그를 직접 사용하는 방법입니다.

<svg viewBox="0 0 564 242" xmlns="http://www.w3.org/2000/svg">
  <path d="..." fill="#00CCAE" />
</svg>

2.1. 장점

• CSS로 색상 변경이 가능하며, 애니메이션 처리 등 높은 커스터마이징이 가능합니다.

2.2. 단점

• 여러 페이지 또는 여러 위치에서 같은 아이콘을 사용할 경우, 변경 시 일괄 수정이 어려워질 수 있습니다.
• 로고처럼 한 번만 쓰이는 아이콘에 적합합니다.

2.3. <svg> 코드 얻는 방법

2.3.1. SVG Artista 사용하기

SVG Artista - SVG Drawing Animation Generator 사이트를 이용하면 .svg 파일을 코드로 변환할 수 있습니다.

사용법

1. SVG 파일 준비
2. 좌측 상단 OPEN SVG 버튼 클릭
3. 파일 선택 → 우측 상단 GET CODE 클릭 → 코드 복사 완료!

3. CSS background 속성으로 삽입하기

CSS의 background-image 속성을 사용하여 아이콘을 삽입하는 방법입니다. 보통 data:image/svg+xml 포맷으로 inline화하여 사용합니다.

.icon-el {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='...' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath ... %3E%3C/path%3E%3C/svg%3E");
}

3.1. 장점

• 컬러 변경 및 스타일 커스터마이징이 용이하고,
• 여러 곳에 동일한 스타일로 적용할 수 있어 유지보수가 편리합니다.

3.2. 단점

• 코드가 길고 가독성이 떨어질 수 있습니다.
• CSS 변수로 관리하려 했으나 SVG는 다른 컬러 속성과 달리 변수로 처리되지 않는 한계가 있습니다.

3.3. CSS 코드를 얻는 방법

3.3.1. 크롬 개발자 도구 사용하기

SVG 이미지가 이미 웹페이지에 로드된 경우, 아래와 같이 SVG 코드를 바로 복사할 수 있습니다.

1. 크롬 브라우저에서 원하는 이미지에 우클릭 후 개발자 도구를 클릭합니다.

2. 해당 이미지 URL에 우클릭 후, 소스 패널에서 열기(Reveal in Sources Panel)를 클릭합니다.

3. 이미지 우클릭 후, Copy Image as data URI 클릭

3.4 <svg>를 CSS 코드로 변환하는 방법

SVG to CSS converter에서 SVG 코드를 CSS background용 코드로 변환할 수 있습니다.

4. 보너스: SVG 코드 최적화하기

SVG 파일은 코드가 불필요하게 길어질 수 있습니다. 이때는 아래 툴을 활용해 최적화된 코드로 압축할 수 있어요.

• SVGOMG - SVGO's Missing GUI

최적화된 코드를 사용하면 로딩 속도와 가독성 측면에서 모두 이득이 됩니다.

5. 마무리하며

이번 포스팅에서는 SVG 아이콘을 웹에 삽입하는 3가지 방법에 대해 알아보았습니다.

방법	장점	단점	추천 용도
.svg 이미지 파일	간편한 유지보수	스타일 조작 어려움	일반 아이콘
<svg> 태그	커스터마이징 용이	공통 사용 어려움	단독 아이콘 (로고 등)
CSS background	스타일 + 유지보수 강점	코드 복잡	공통 디자인 아이콘

프로젝트의 성격에 따라 적절한 방법을 선택해 SVG 아이콘을 보다 유연하게 활용해보시길 바랍니다.

감사합니다!

6. 참고 링크

• SVG Artista
• SVG to CSS Converter
• SVGOMG