SVG란 무엇인가, 핵심 개념 및 웹 개발에서의 사용법

SVG란 무엇인가?

SVG는 2001년 W3C 권장 사항으로 도입된 XML 기반의 벡터 그래픽 형식입니다. 래스터 형식과 달리 SVG는 점, 선, 곡선, 다각형과 같은 기하학적 기본 요소를 통해 이미지를 설명합니다. SVG 파일은 일반 텍스트 XML 문서로, 표준 도구로 읽고 편집하고 압축할 수 있습니다.

SVG 아키텍처에는 몇 가지 핵심 개념이 포함됩니다. viewBox는 실제 요소 크기와 독립적인 가상 좌표계를 정의합니다. 예를 들어 viewBox="0 0 100 100"은 100×100 정사각형 그리드를 생성하며, 그 내부의 모든 좌표는 고정됩니다. 컨테이너의 너비나 높이가 변경되면 콘텐츠가 비례적으로 확장됩니다.

W3C SVG 2 Specification에 따르면 최신 버전의 SVG는 그래디언트, 마스크, 필터, 임의 위치의 텍스트, JavaScript를 통한 상호 작용, CSS 및 SMIL을 통한 애니메이션을 지원합니다. SVG는 완전한 HTML 요소로 DOM에 통합되어 모든 그래픽 기본 요소를 프로그래밍 방식으로 제어할 수 있습니다.

모바일 개발에서 SVG는 iOS에서 UIGraphicsImageRenderer를 통해, Android에서 VectorDrawable을 통해 사용됩니다. 두 형식 모두 SVG와 유사한 설명을 GPU에서 하드웨어 가속 래스터로 변환합니다.

SVG 형식의 역사와 발전

SVG 1.0은 2001년, SVG 1.1은 2003년에 W3C 권장 사항이 되었으며, SVG 2.0은 2012년부터 개발 중입니다. SVG 2의 주요 혁신은 더 깊은 CSS 통합, 합성 및 혼합 모드 지원, 그리고 네임스페이스 접두사 없이 HTML에서 SVG를 사용할 수 있는 기능입니다.

SVG 2가 아직 권장 사항 상태에 도달하지는 않았지만, 최신 브라우저는 이미 그 기능의 대부분을 지원합니다. Chrome, Safari, Firefox 및 Edge는 SVG 1.1을 거의 완전히 지원하고 SVG 2의 상당 부분을 지원합니다.

SVG 기본 요소

SVG는 2차원 그래픽을 설명하기 위한 요소 집합을 제공합니다. 각 요소에는 위치, 크기 및 시각적 모양을 정의하는 속성이 있습니다. 속성은 XML 속성으로 설정하거나 CSS 속성을 통해 설정할 수 있습니다.

• <rect> — x, y, width, height, rx, ry(모서리 둥글림) 속성이 있는 사각형.
• <circle> — cx, cy(중심) 및 r(반지름) 속성이 있는 원.
• <ellipse> — cx, cy, rx, ry 속성이 있는 타원.
• <line> — x1, y1, x2, y2 속성이 있는 선분.
• <polyline> — points 속성(좌표 목록)이 있는 폴리라인.
• <polygon> — points 속성이 있는 닫힌 다각형.
• <path> — d 속성(명령: M, L, C, Q, A, Z)이 있는 임의 경로.
• <text> — x, y, font-size, font-family 속성이 있는 텍스트 요소.

path 요소는 가장 강력하고 유연한 SVG 요소입니다. d 속성에는 M(moveTo), L(lineTo), C(3차 베지어 곡선), Q(2차 베지어 곡선), A(호), Z(경로 닫기) 명령 시퀀스가 포함됩니다. 각 명령은 절대 또는 상대 형식(대문자 또는 소문자)을 가집니다.

SVG는 <g>를 통한 요소 그룹화도 지원합니다. 그룹은 시각적 속성(fill, stroke, transform)을 모든 하위 요소에 상속합니다. 이를 통해 도형 집합 전체에 단일 스타일을 적용하고 단일 transform으로 위치를 제어할 수 있습니다.

SVG vs 래스터 그래픽: 형식 비교

SVG와 래스터 형식(JPEG, PNG, WebP)의 주요 차이점은 정보 저장 방식입니다. 래스터는 고정 크기 그리드의 각 픽셀 색상을 저장합니다. SVG는 도형을 렌더링하기 위한 수학적 명령을 저장합니다. 이 차이가 두 형식의 모든 장단점을 결정합니다.

HTTP Archive, 2025에 따르면 웹사이트의 68%가 아이콘에, 34%가 일러스트레이션에, 22%가 로고에 SVG를 사용합니다. 평균 SVG 아이콘 크기는 0.5–2KB인 반면, 유사한 품질의 래스터 아이콘은 PNG 형식으로 5–20KB입니다.

SVG는 사진과 복잡한 래스터 이미지에는 적합하지 않습니다. XML 설명 크기가 동등한 JPEG를 초과하기 때문입니다. SVG 권장 적용 분야: 아이콘, 로고, 일러스트레이션, 다이어그램, 차트, 반응형 디자인의 인터페이스 요소.

SVG를 선택해야 할 때와 래스터 형식을 선택해야 할 때

SVG는 Retina 디스플레이와 브라우저의 모든 확대 수준에서 선명하게 보여야 하는 인터페이스 요소에 최적의 선택입니다. 래스터는 사진, 복잡한 텍스처 및 수백만 색상의 이미지에 적합하며, 벡터 설명이 지나치게 복잡해지는 경우에 사용합니다.

하이브리드 접근법 — 인터페이스 요소에는 SVG를, 사진 콘텐츠에는 WebP/AVIF를 결합 — 품질과 페이지 로드 성능 간의 최상의 균형을 제공합니다.

인라인 SVG 및 CSS 스타일링

인라인 SVG는 <img> 또는 background-image를 통한 별도 파일이 아닌 SVG 마크업을 HTML 문서에 직접 포함하는 것입니다. 인라인 SVG의 장점은 SVG 요소가 DOM의 일부가 되어 CSS를 통해 스타일을 지정하고, JavaScript를 통해 제어하며, 추가 서버 요청 없이 애니메이션을 적용할 수 있다는 점입니다.

<img src="icon.svg">처럼 SVG가 섀도우 DOM에 격리되는 것과 달리, 인라인 SVG는 상위 문서에서 색상과 글꼴을 상속합니다. 이를 통해 예를 들어 각 상태에 대해 별도의 파일을 로드하지 않고 CSS 가상 클래스 :hover를 통해 호버 시 아이콘 색상을 변경할 수 있습니다.

CSS-Tricks에 따르면 인라인 SVG는 최신 웹 애플리케이션에서 아이콘을 사용하는 권장 방법입니다. CSS 속성 fill, stroke, stroke-width는 SVG 요소에 직접 적용됩니다. CSS 사용자 지정을 위해서는 원본 SVG에 fill과 stroke가 인라인 속성으로 설정되지 않아야 합니다. 그렇지 않으면 CSS가 이를 재정의할 수 없습니다.

• 장점: CSS 스타일링, JS 제어, HTTP 요청 없음, viewBox 적응성.
• 단점: HTML 페이지 크기 증가, HTML과 별도 캐싱 불가능.
• 대안: SVG 스프라이트 — 여러 SVG를 하나의 파일로 결합하고 <use href="#id"> 사용.

SVG 스프라이트는 캐싱 문제를 해결합니다. 모든 아이콘이 하나의 파일에 수집되고, 브라우저가 한 번 로드하며, 개별 아이콘은 스프라이트 내 원하는 요소의 id를 지정하여 <use>로 액세스합니다.

SVG 애니메이션: CSS 및 SMIL

CSS SVG 애니메이션은 브라우저에서 벡터 그래픽을 애니메이션화하는 가장 일반적이고 효율적인 방법입니다. transform, opacity, fill과 같은 CSS 속성은 HTML 요소와 마찬가지로 SVG 요소에 적용됩니다. 임의 경로를 따라 애니메이션을 만들려면 CSS 속성 offset-path를 사용합니다.

SMIL(Synchronized Multimedia Integration Language)은 SVG에 내장된 애니메이션 메커니즘으로, CSS와 독립적입니다. <animate>, <animateTransform>, <animateMotion> 요소를 사용하면 JavaScript나 CSS 없이 모든 SVG 속성을 애니메이션화할 수 있습니다. SMIL 애니메이션은 브라우저 프레임 속도와 동기화됩니다.

MDN Web Docs에 따르면 SMIL은 모든 최신 브라우저에서 지원되지만, CSS 애니메이션이 더 예측 가능하고 효율적인 것으로 간주됩니다. SMIL의 주요 사용 사례는 <path> 요소의 d(path)와 같이 CSS로는 액세스할 수 없는 속성을 애니메이션화하는 것입니다.

JavaScript + requestAnimationFrame은 SVG 애니메이션을 최대한 제어할 수 있습니다. 웹 개발자는 순수 CSS로 구현하기 어려운 타임라인과 이징 함수가 있는 복잡한 애니메이션 시퀀스를 위해 GSAP 및 Anime.js와 같은 라이브러리를 사용합니다.

코드 예제: SVG 그래픽 만들기

첫 번째 예제는 기본 SVG 요소를 사용한 간단한 집 아이콘입니다. 모든 도형은 rect와 polyline입니다.

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

두 번째 예제는 CSS를 통한 회전 로더 애니메이션을 보여줍니다. 점선 윤곽선을 만들기 위해 stroke-dasharray 속성이 있는 <circle>을 사용합니다.

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

세 번째 예제는 GSAP 라이브러리를 사용하여 부드러운 윤곽선 그리기를 위해 경로를 애니메이션화합니다. GSAP는 stroke-dashoffset 속성과 함께 작동하여 선이 나타나는 효과를 만듭니다.

// GSAP으로 경로 그리기
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});