본문 바로가기
Graphic/SVG

SVG 가이드

by curious week 2025. 9. 5.

SVG 가이드

I. SVG의 본질: 벡터 그래픽의 이해

Scalable Vector Graphics (SVG)는 현대 웹 그래픽의 초석을 이루는 기술입니다. SVG의 진정한 힘을 이해하기 위해서는 단순히 '이미지 포맷'이라는 개념을 넘어, 그것이 작동하는 근본적인 원리와 래스터(Raster) 이미지와의 본질적인 차이를 파악하는 것이 중요합니다. 이 장에서는 SVG의 핵심 정체성을 분석하고, 웹 개발 및 디자인 워크플로우에 혁신을 가져온 이유를 탐구합니다.

1.1. SVG란 무엇인가?: XML 기반 벡터 이미지 포맷

SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로, 이름에서 알 수 있듯이 크기 조절이 자유로운 벡터 기반의 이미지 포맷입니다. SVG의 가장 핵심적인 특징은 XML(Extensible Markup Language)에 기반을 둔다는 점입니다. 이는 SVG 이미지가 HTML이 웹 페이지의 구조를 정의하는 것과 유사하게, 텍스트 기반의 마크업 언어를 통해 그래픽을 설명한다는 것을 의미합니다.  

픽셀(pixel)이라는 작은 사각형 점들의 격자로 이미지를 구성하는 PNG나 JPG 같은 래스터 이미지와 달리, SVG는 수학적 알고리즘과 좌표계를 사용하여 점, 선, 곡선, 도형 등을 정의합니다. 예를 들어, 원을 그리기 위해 수많은 픽셀의 색상 정보를 저장하는 대신, SVG는 중심점의 좌표( )와 반지름() 값만을 기록합니다. 브라우저는 이 수학적 정보를 해석하여 화면에 원을 렌더링합니다.

이러한 XML 기반 구조는 SVG 파일에 놀라운 유연성을 부여합니다. SVG 파일은 단순한 이미지 데이터 덩어리가 아니라, 하나의 문서(document)처럼 취급될 수 있습니다. 그 결과, SVG 파일은 검색 엔진에 의해 검색 및 색인화가 가능하고, 자바스크립트를 통해 각 요소를 제어하거나 스크립트를 실행할 수 있으며, 텍스트 파일처럼 압축하여 파일 크기를 줄일 수도 있습니다.  

1.2. 래스터 이미지(PNG, JPG)와의 근본적 차이점

SVG(벡터)와 PNG/JPG(래스터)의 차이점은 단순히 기술적인 세부 사항에 그치지 않고, 그래픽을 사용하는 방식 자체를 결정짓는 근본적인 패러다임의 차이입니다.

  • 확장성 (Scalability): 가장 두드러지는 차이점은 확장성입니다. 벡터 기반의 SVG는 수학적 공식으로 정의되기 때문에, 이미지를 아무리 확대하거나 축소해도 품질 저하가 전혀 발생하지 않습니다. 작은 아이콘부터 거대한 광고판 크기까지 언제나 선명하고 깨끗한 품질을 유지합니다. 반면, 래스터 이미지는 고정된 수의 픽셀로 이루어져 있어 원본 크기 이상으로 확대하면 픽셀 격자가 드러나는 '픽셀화(pixelation)' 현상이 발생하며 이미지가 흐릿하고 거칠어집니다.  
     
  • 파일 크기 및 압축 (File Size & Compression): 로고, 아이콘, 단순한 일러스트레이션과 같이 복잡하지 않은 그래픽의 경우, SVG 파일은 일반적으로 동일한 이미지의 PNG나 JPG 파일보다 훨씬 작습니다. SVG는 이미지의 세부 정보나 품질에 영향을 주지 않는 무손실 압축 방식을 사용합니다. PNG 역시 무손실 압축을 사용하지만, 사진이 아닌 그래픽에서는 SVG보다 파일 크기가 커지는 경향이 있습니다. 중요한 점은 SVG 파일의 크기는 이미지의 복잡도(경로와 점의 개수)에 따라 결정되며, 화면에 표시되는 크기와는 무관하다는 것입니다.  
  • 사용 사례 (Use Cases): 각 포맷은 고유한 강점을 가지고 있습니다. SVG는 로고, 아이콘, 인포그래픽, 차트 등 다양한 크기에서 선명함이 요구되는 그래픽에 절대적으로 유리합니다. 반면, 래스터 포맷은 사진과 같이 복잡하고 미묘한 색상 변화가 많은 고품질 디지털 이미지를 표현하는 데 더 적합합니다. 사진의 모든 색상 정보를 벡터로 표현하려고 하면 비효율적이며 파일 크기가 기하급수적으로 커질 수 있습니다.  

1.3. 웹에서의 SVG: 왜 SVG를 사용해야 하는가?

웹 환경에서 SVG를 사용하는 것은 단순히 이미지를 표시하는 것을 넘어, 성능, 접근성, 상호작용 측면에서 막대한 이점을 제공합니다. SVG를 '이미지 파일'이 아닌 '그래픽 문서'로 바라보는 순간, 그 진정한 잠재력이 드러납니다. SVG의 XML 기반 특성은 단순한 기술적 구현 방식이 아니라, 확장성, 접근성, SEO, 상호작용성이라는 핵심 이점들을 파생시키는 근본 원인입니다. 개발자는 이 패러다임 전환을 통해 SVG를 정적인 자산이 아닌, 코드 기반의 동적 UI 요소로 다룰 수 있게 됩니다. 이는 SVG 자산을 버전 관리 시스템으로 추적하고, 컴포넌트 기반 아키텍처에 통합하는 등 개발 워크플로우 전반에 영향을 미칩니다.

  • 성능 (Performance): SVG는 일반적으로 파일 크기가 작아 웹 페이지 로딩 시간을 단축시킵니다. 페이지 로딩 속도는 사용자 경험(UX)은 물론 검색 엔진 순위(SEO)에도 직접적인 영향을 미치는 매우 중요한 요소입니다.  
  • 접근성 (Accessibility): SVG는 텍스트 기반의 XML이므로, 그 안에 포함된 텍스트는 스크린 리더가 읽을 수 있고 사용자가 선택하거나 복사할 수도 있습니다. 이는 시각 장애가 있는 사용자에게 그래픽 정보를 전달하는 데 매우 중요합니다. 또한,   <title>과 <desc> 태그를 사용해 그래픽에 대한 대체 텍스트와 설명을 제공함으로써 보조 기술을 완벽하게 지원할 수 있습니다.  
  • 검색 엔진 최적화 (SEO): 검색 엔진은 SVG 파일 내의 텍스트 콘텐츠를 읽고 색인화할 수 있습니다. 이는 alt 속성에만 의존하는 래스터 이미지에 비해 상당한 SEO 이점을 제공하며, 그래픽 콘텐츠의 검색 가능성을 높여줍니다.
  • 스타일링 및 상호작용 (Styling & Interactivity): SVG 내의 모든 요소(<path>, <circle> 등)는 웹 페이지의 DOM(Document Object Model)의 일부로 취급됩니다. 이는 각 요소를 CSS로 스타일링하거나 JavaScript로 조작할 수 있음을 의미합니다. 사용자의 마우스 오버에 따라 색상을 바꾸거나, 복잡한 애니메이션을 적용하고, 데이터 시각화와 같은 상호작용이 풍부한 그래픽을 만드는 것이 가능해집니다. 이는 정적인 래스터 이미지로는 결코 구현할 수 없는 강력한 기능입니다.  
기능 SVG (벡터) PNG/JPG (래스터)
기반 기술 XML 기반 수학적 공식, 좌표계 픽셀 그리드
확장성 무한 확장 가능, 품질 저하 없음 확대 시 픽셀화, 품질 저하 발생
주요 사용 사례 로고, 아이콘, 일러스트레이션, 차트 사진, 복잡한 고해상도 이미지
파일 크기 단순 그래픽에서 매우 작음 (복잡도에 비례) 해상도와 색상 수에 비례하여 큼
성능 빠른 로딩 속도 상대적으로 느린 로딩 속도
SEO 및 접근성 텍스트 콘텐츠 검색 및 접근 가능, 대체 텍스트 제공 alt 태그에만 의존, 콘텐츠 접근 불가
상호작용 및 스타일링 CSS와 JavaScript로 모든 요소 제어 가능 불가능 (이미지 전체에만 효과 적용 가능)

II. SVG 시작하기: 기본 구조와 웹 연동

SVG의 이론적 배경을 이해했다면, 이제 실제 웹 페이지에서 SVG를 어떻게 구조화하고 삽입하는지 알아볼 차례입니다. 이 장에서는 SVG 문서의 기본적인 골격을 살펴보고, 각기 다른 장단점을 가진 웹 페이지 연동 방법들을 비교 분석하여 상황에 맞는 최적의 선택을 할 수 있도록 안내합니다.

2.1. SVG 문서의 기본 구조

모든 SVG 파일은 루트 요소인 <svg> 태그로 시작하고 끝납니다. 이 태그는 SVG 그래픽의 컨테이너 역할을 하며, 모든 그래픽 요소들이 렌더링될 뷰포트(viewport)를 정의합니다.  

  • xmlns (XML Namespace): xmlns="http://www.w3.org/2000/svg" 속성은 이 문서가 SVG 네임스페이스를 사용함을 브라우저에 알리는 필수적인 선언입니다. 이 속성이 없으면 브라우저는 내부 태그들을 유효하지 않은 HTML로 간주하여 제대로 렌더링하지 못할 수 있습니다.  
  • viewBox: SVG의 반응형 동작을 제어하는 가장 중요한 속성 중 하나입니다. viewBox="min-x min-y width height" 형식으로 4개의 숫자 값을 받습니다. 이 값들은 SVG 내부의 좌표계와 종횡비를 정의합니다. viewBox를 통해 SVG는 부모 컨테이너의 크기가 변하더라도 종횡비를 유지하며 유연하게 크기를 조절할 수 있습니다. 예를 들어,   viewBox="0 0 100 50"은 너비가 높이의 두 배인 좌표계를 설정합니다.
  • width와 height: 이 속성들은 웹 페이지에서 SVG가 차지할 외부적인 크기를 지정합니다. 픽셀(px), 퍼센트(%) 등 다양한 단위를 사용할 수 있습니다. 이 값들이 생략되면 SVG가 예상치 못하게 렌더링될 수 있으나, 보통은 CSS를 통해 더 유연하게 제어하는 것이 일반적입니다.  

다음은 SVG 문서의 가장 기본적인 구조 예시입니다.

<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  </svg>

2.2. 웹 페이지에 SVG 삽입하기: 4가지 핵심 방법 비교 분석

SVG를 웹 페이지에 삽입하는 방법은 여러 가지가 있으며, 어떤 방법을 선택하느냐는 단순한 취향의 문제가 아닙니다. 이는 해당 그래픽의 상호작용성과 제어 수준을 결정하는 중요한 아키텍처적 결정입니다. "이 그래픽을 CSS나 JavaScript로 조작해야 하는가?"라는 질문에 대한 답이 어떤 방법을 선택할지 결정합니다. '예'라면 인라인 SVG가 거의 항상 정답이며, '아니오'라면 <img> 태그가 단순성과 캐싱 이점을 제공합니다.

  • 방법 1: 인라인(Inline) SVG (<svg>...</svg>)
    • 방법: SVG 코드 전체를 HTML 문서에 직접 붙여넣습니다.  
    • 장점: 별도의 파일을 요청하지 않아 HTTP 요청 횟수를 줄여 로딩 성능을 향상시킵니다. 가장 결정적인 장점은 SVG 내부의 모든 요소에 CSS와 JavaScript로 직접 접근하여 스타일을 변경하고 애니메이션을 적용하는 등 완전한 제어가 가능하다는 점입니다. 
    • 단점: HTML 문서가 길고 복잡해져 가독성을 해칠 수 있습니다. 또한, SVG 코드가 HTML 페이지와 함께 로드되므로 브라우저에 의해 별도로 캐싱되지 않습니다.  
  • 방법 2: 이미지 태그 (<img>)
    • 방법: <img> 태그의 src 속성에 .svg 파일의 경로를 지정합니다: <img src="image.svg" alt="...">.  
    • 장점: 웹 개발자에게 가장 익숙하고 간단한 방법입니다. alt 속성을 통해 의미 있는 대체 텍스트를 제공할 수 있으며, 브라우저가 SVG 파일을 캐싱하여 후속 페이지 로드 속도를 높일 수 있습니다.  
    • 단점: SVG가 래스터 이미지처럼 취급되어 외부에서 내부 요소를 제어할 수 없습니다. 즉, CSS나 JavaScript로 아이콘의 색상을 바꾸거나 특정 부분에 애니메이션을 적용하는 것이 불가능합니다. 상호작용이 필요한 UI 요소에는 부적합합니다.  
  • 방법 3: 오브젝트 태그 (<object>)
    • 방법: <object type="image/svg+xml" data="image.svg"></object> 형태로 사용합니다.  
    • 장점: 인라인 방식과 이미지 태그 방식의 절충안입니다. SVG 코드를 별도의 파일로 유지하여 캐싱이 가능하게 하면서도, JavaScript를 통해 내부 DOM에 접근할 수 있습니다. <object> 태그 내부에 대체 콘텐츠를 제공하는 것도 용이합니다.
    • 단점: 인라인 SVG보다 성능이 떨어질 수 있으며, 스크립트 상호작용이 더 복잡하고 과거 브라우저에서 호환성 문제가 있었습니다.
  • 방법 4: CSS background-image
    • 방법: CSS의 background-image 속성을 통해 SVG를 요소의 배경으로 사용합니다: .element { background-image: url('image.svg'); }.  
    • 장점: 콘텐츠의 일부가 아닌 순수하게 장식적인 목적으로 이미지를 사용할 때 유용합니다. HTML 마크업을 깔끔하게 유지할 수 있으며, 파일 캐싱이 가능합니다.
    • 단점: <img> 태그와 마찬가지로 SVG 내부 요소에 대한 스타일링이나 스크립팅이 불가능합니다. 의미론적 가치가 거의 없어 스크린 리더 등 보조 기술에 정보를 전달하기 어렵습니다.  

이 외에도 <embed>나 <iframe>을 사용하는 방법이 있지만, 일반적인 웹 개발에서는 자주 사용되지 않습니다.  

삽입 방법 구문 예시 성능 CSS/JS 스타일링 상호작용 캐싱 주요 사용 사례
인라인 <svg> <svg>...</svg> 최상 (HTTP 요청 없음) 가능 (모든 요소) 가능 불가능 (HTML과 함께) 동적 아이콘, 인터랙티브 차트, 애니메이션
<img> 태그 <img src="image.svg"> 좋음 (캐싱 가능) 불가능 불가능 가능 정적 로고, 단순 일러스트레이션
<object> 태그 <object data="image.svg"> 보통 제한적/가능 가능 가능 외부 SVG와 상호작용이 필요한 경우
CSS background-image background-image: url(...) 좋음 (캐싱 가능) 불가능 불가능 가능 장식용 배경, 반복 패턴

III. SVG 드로잉 마스터: 도형과 경로

SVG의 진정한 힘은 그래픽을 코드로 직접 그려내는 능력에 있습니다. 이 장에서는 SVG 드로잉의 핵심 도구들을 다룹니다. 간단하고 직관적인 기본 도형부터 시작하여, 무한한 형태를 만들어낼 수 있는 강력한 <path> 요소의 사용법까지 단계별로 마스터하게 될 것입니다.

3.1. 기본 도형 그리기

SVG는 자주 사용되는 기하학적 형태를 쉽게 만들 수 있도록 여러 기본 도형 요소를 제공합니다. 이 요소들은 복잡한 <path> 데이터보다 가독성이 높고 작성하기 쉽다는 장점이 있습니다.  

  • <rect>: 사각형 또는 정사각형을 그립니다. 주요 속성으로는 시작점 좌표 x, y, 크기 width, height, 그리고 모서리 둥글기 rx, ry가 있습니다.
  • <circle>: 원을 그립니다. 중심점 좌표 cx, cy와 반지름 r 속성을 사용합니다.
  • <ellipse>: 타원을 그립니다. 중심점 cx, cy와 가로 반지름 rx, 세로 반지름 ry를 지정합니다.
  • <line>: 직선 하나를 그립니다. 시작점 x1, y1과 끝점 x2, y2 속성을 가집니다.
  • <polyline>: 여러 개의 연결된 직선으로 이루어진 열린 도형을 만듭니다. points 속성에 각 꼭짓점의 좌표 쌍(x1,y1 x2,y2...)을 나열합니다.
  • <polygon>: 여러 개의 연결된 직선으로 이루어진 닫힌 도형을 만듭니다. polyline과 유사하게 points 속성을 사용하며, 마지막 점과 첫 번째 점이 자동으로 연결됩니다.

이러한 기본 도형 요소들은 MDN 문서에서도 상세히 참조할 수 있습니다.  

3.2. 가장 강력한 도구, <path> 완전 정복

<path> 요소는 SVG에서 가장 강력하고 유연한 드로잉 도구입니다. 직선, 곡선, 호 등 어떤 형태의 2차원 그래픽이든 <path> 하나로 모두 표현할 수 있습니다.  

<path>의 모양은 d (data)라는 단 하나의 속성에 의해 정의됩니다. 이 d 속성 안에는 도형의 기하학적 형태를 설명하는 일련의 명령어와 좌표 값들이 문자열 형태로 들어갑니다.  

디자인 도구는 <path> 데이터를 자동으로 생성해주지만, 이 d 속성의 문법을 이해하는 것은 SVG를 깊이 있게 다루기 위한 필수 과정입니다. 렌더링 문제를 디버깅하고, 코드를 최적화하며, JavaScript로 동적인 그래픽을 생성하기 위해서는 d 속성을 읽고 수정할 수 있어야 합니다. 이는 개발자를 단순한 SVG '사용자'에서 그래픽을 직접 제어하는 '창조자'로 만들어주는 핵심 지식입니다.

Path 명령어 (d 속성 문법)

명령어는 대문자(절대 좌표)와 소문자(상대 좌표)로 구분됩니다. 절대 좌표는 viewBox의 원점(0,0)을 기준으로, 상대 좌표는 현재 펜의 위치를 기준으로 이동합니다.

  • MoveTo (이동): M x y (절대) / m dx dy (상대)
    • 선을 그리지 않고 펜을 지정된 좌표로 이동시킵니다. 모든 경로 또는 하위 경로는 M 명령어로 시작해야 합니다.  
  • LineTo (직선): L x y / l dx dy
    • 현재 위치에서 지정된 좌표까지 직선을 그립니다. 수평선(H x / h dx)과 수직선(V y / v dy)을 위한 단축 명령어가 있어 편리하게 사용할 수 있습니다.  
  • CurveTo (베지에 곡선):
    • 3차 베지에(Cubic Bézier): C x1 y1, x2 y2, x y / c dx1 dy1, dx2 dy2, dx dy
      • 두 개의 제어점((x1, y1), (x2, y2))을 사용하여 부드러운 곡선을 그립니다. 복잡하고 정교한 곡선을 표현하는 데 사용됩니다.  
    • 2차 베지에(Quadratic Bézier): Q x1 y1, x y / q dx1 dy1, dx dy
      • 하나의 제어점((x1, y1))을 사용하여 곡선을 그립니다. 3차 베지에보다 단순하며, 코드가 더 간결합니다.  
    • S와 T 명령어는 각각 3차, 2차 베지에 곡선을 부드럽게 연결할 때 사용하는 단축 명령어입니다.
  • Arc (호): A rx ry x-axis-rotation large-arc-flag sweep-flag x y / a...
    • 타원의 일부인 호를 그립니다. 가로/세로 반지름(rx, ry), 호의 회전 각도, 큰 호/작은 호 플래그, 시계/반시계 방향 플래그 등 여러 매개변수를 받아 가장 복잡한 명령어입니다.
  • ClosePath (경로 닫기): Z / z
    • 현재 위치에서 경로의 시작점까지 직선을 그려 도형을 닫습니다. fill 속성으로 내부를 채우기 위해서는 경로가 닫혀 있어야 합니다.  

3.3. 실전 예제: <path> 명령어를 조합하여 '홈' 아이콘 직접 만들기

이 예제에서는 <path> 명령어를 조합하여 간단한 '홈' 아이콘을 만들어 보겠습니다. 아이콘은 viewBox="0 0 24 24" 크기를 기준으로 합니다.

  1. 도형 분해: '홈' 아이콘은 삼각형 지붕과 사각형 몸체로 구성됩니다.
  2. 경로 시작: M 명령어로 아이콘의 가장 왼쪽 위 지붕 꼭짓점에서 시작합니다.
    • d="M2 10"
  3. 지붕 그리기: L 명령어를 사용하여 지붕의 꼭대기와 오른쪽 끝으로 직선을 그립니다.
    • d="M2 10 L12 2 L22 10"
  4. 몸체 그리기: V (수직선)와 H (수평선) 명령어를 사용하여 사각형 몸체를 그립니다.
    • 먼저 오른쪽 벽을 그립니다: V22 (y좌표 22까지 수직선)
    • 바닥을 그립니다: H2 (x좌표 2까지 수평선)
    • d="M2 10 L12 2 L22 10 V22 H2"
  5. 경로 닫기: Z 명령어로 현재 위치(2, 22)에서 시작점(2, 10)으로 직선을 그려 경로를 닫습니다.
    • d="M2 10 L12 2 L22 10 V22 H2 Z"

완성된 코드:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 10 L12 2 L22 10 V22 H2 Z" />
</svg>

이처럼 간단한 명령어 조합만으로도 복잡한 아이콘을 정밀하게 그려낼 수 있습니다.

명령어 절대 좌표 구문 상대 좌표 구문 설명
MoveTo M x y m dx dy 펜을 지정된 위치로 이동
LineTo L x y (H x, V y) l dx dy (h dx, v dy) 현재 위치에서 직선을 그림
Cubic CurveTo C x1 y1, x2 y2, x y c dx1 dy1, dx2 dy2, dx dy 2개의 제어점을 사용하는 3차 베지에 곡선
Quadratic CurveTo Q x1 y1, x y q dx1 dy1, dx dy 1개의 제어점을 사용하는 2차 베지에 곡선
Elliptical Arc A rx ry rot l-arc s-flag x y a rx ry rot l-arc s-flag dx dy 타원의 호를 그림
ClosePath Z z 경로의 시작점으로 직선을 그려 도형을 닫음

IV. 스타일링과 시각 효과: SVG에 생명 불어넣기

SVG는 단순히 형태를 그리는 것을 넘어, 다채로운 색상, 그라데이션, 패턴, 그리고 복잡한 필터 효과까지 적용하여 그래픽에 풍부한 시각적 깊이를 더할 수 있습니다. 이 장에서는 SVG 스타일링의 기본 원칙부터 시작하여, 그래픽을 예술의 경지로 끌어올릴 수 있는 고급 시각 효과 기법들을 탐구합니다.

4.1. SVG 스타일링: 프레젠테이션 속성 vs. CSS

SVG 요소에 스타일을 적용하는 방법은 크게 두 가지가 있습니다.

  • 프레젠테이션 속성 (Presentation Attributes): SVG 요소의 속성으로 직접 스타일을 정의하는 방식입니다. 예를 들어 <circle fill="red" stroke="blue" stroke-width="2" />와 같이 작성합니다. 이 방법은 코드가 직관적이지만, 스타일과 구조가 강하게 결합되어 유지보수가 어렵고 재사용성이 떨어집니다. CSS 명시도(specificity) 계층에서 가장 낮은 우선순위를 가집니다.  
  • CSS (Cascading Style Sheets): HTML 요소와 마찬가지로, SVG 요소도 CSS를 사용하여 스타일을 지정할 수 있습니다. <style> 태그를 사용하거나 외부 스타일시트를 연결하여 클래스나 ID 선택자로 요소를 지정하고 스타일을 적용합니다.  

 

<svg>
  <defs>
    <style>
     .my-circle {
        fill: red;
        stroke: blue;
        stroke-width: 2;
      }
     .my-circle:hover {
        fill: darkred;
      }
    </style>
  </defs>
  <circle class="my-circle" cx="50" cy="50" r="40" />
</svg>
  • 이 방식은 스타일과 구조를 분리하여 코드의 유지보수성과 재사용성을 극대화합니다. 또한 :hover와 같은 가상 클래스나 미디어 쿼리를 활용한 반응형 스타일링, CSS 변수(Custom Properties)를 이용한 테마 관리 등 현대적인 CSS 기법을 모두 활용할 수 있어 강력히 권장되는 방법입니다.  

4.2. 채우기(Fill)와 선(Stroke) 심화 속성

fill(채우기)과 stroke(선)는 SVG 스타일링의 기본이지만, 다양한 심화 속성을 통해 정교한 제어가 가능합니다.

  • fill-rule: 경로가 서로 겹치거나 스스로 교차할 때 내부를 어떻게 채울지 결정합니다. nonzero(기본값)와 evenodd 두 가지 값이 있습니다.
  • stroke-width: 선의 두께를 지정합니다.
  • stroke-linecap: 열린 경로의 끝 모양을 제어합니다. butt(기본값, 잘린 모양), round(둥근 모양), square(사각형 모양) 값이 있습니다.
  • stroke-linejoin: 두 선이 만나는 모서리의 모양을 제어합니다. miter(기본값, 뾰족한 모양), round(둥근 모양), bevel(깎인 모양) 값이 있습니다.
  • stroke-dasharray: 점선을 만듭니다. 선과 공백의 길이를 쉼표나 공백으로 구분하여 나열합니다 (예: stroke-dasharray="5 10"). 
  • stroke-dashoffset: stroke-dasharray로 만들어진 점선 패턴의 시작점을 얼마나 이동시킬지 지정합니다. 이 속성값을 애니메이션하면 마치 선이 그려지는 듯한 '라인 드로잉' 효과를 만들 수 있습니다.  

4.3. 고급 채우기 기법 1: 그라데이션

SVG는 선형(linear)과 방사형(radial) 두 가지 유형의 그라데이션을 기본적으로 지원합니다. 그라데이션은 <defs> 요소 안에 정의한 뒤, id를 통해 참조하여 재사용하는 방식으로 작동합니다.  

  • <linearGradient> (선형 그라데이션): 직선을 따라 색상이 변하는 그라데이션을 만듭니다.  
    • x1, y1, x2, y2 속성으로 그라데이션 벡터의 시작점과 끝점을 정의하여 방향을 제어합니다.
    • 내부에 <stop> 요소를 배치하고 offset 속성(0%~100%)으로 위치를, stop-color 속성으로 색상을 지정합니다.  
    • 사용법: fill="url(#myLinearGradient)"
  • <radialGradient> (방사형 그라데이션): 한 지점에서 원형으로 퍼져나가는 그라데이션을 만듭니다.  
    • cx, cy, r 속성으로 바깥쪽 원의 중심과 반지름을, fx, fy 속성으로 그라데이션이 시작되는 초점(focal point)을 지정합니다.
    • 마찬가지로 <stop> 요소를 사용하여 색상 변화를 정의합니다.
    • 사용법: fill="url(#myRadialGradient)"

4.4. 고급 채우기 기법 2: 패턴

<pattern> 요소를 사용하면 도형을 단순한 색이나 그라데이션이 아닌, 반복되는 그래픽으로 채울 수 있습니다.  

  • 패턴 역시 <defs> 안에 정의하고 id로 참조합니다: fill="url(#myPattern)".  
  • <pattern> 요소 안에는 <circle>, <path> 등 어떤 SVG 그래픽 요소든 포함하여 패턴의 타일을 정의할 수 있습니다.
  • 핵심 속성: patternUnits와 patternContentUnits는 각각 패턴 타일 자체와 타일 내부 콘텐츠의 좌표계를 정의합니다. 이 속성들을 통해 패턴이 적용되는 객체의 크기가 변할 때 패턴이 어떻게 반응할지(함께 축소/확대될지, 아니면 고정된 크기로 반복 횟수만 달라질지)를 정밀하게 제어할 수 있습니다.

4.5. 시각적 제어: 클리핑과 마스킹

클리핑과 마스킹은 그래픽의 특정 부분만 보이도록 제어하는 강력한 기법입니다.

  • <clipPath> (클리핑): 지정된 경로를 '쿠키 커터'처럼 사용하여, 경로 바깥쪽에 있는 그래픽 부분을 완전히 보이지 않게 만듭니다. 결과는 항상 날카로운 경계선을 가지며, 반투명 효과는 불가능한 '전부 아니면 전무' 방식입니다.  
  • <mask> (마스킹): 클리핑보다 훨씬 정교한 제어가 가능합니다. 마스크로 사용되는 그래픽의 명도(luminance, 밝기)나 알파(alpha, 투명도) 값을 이용하여 원본 그래픽의 각 픽셀 투명도를 결정합니다. 이를 통해 부드러운 가장자리, 페이드 아웃 효과, 깃털 효과(feathering) 등을 구현할 수 있습니다.  
  • 핵심 차이: clipPath는 벡터 기반의 날카로운 절단에, mask는 픽셀 단위의 부드러운 투명도 조절에 사용됩니다.  

4.6. 필터 효과: 그림자, 블러 등 복합 효과 만들기

SVG의 <filter> 요소는 포토샵과 같은 그래픽 편집 툴에서나 가능했던 복잡한 시각 효과를 코드로 구현할 수 있게 해주는 '인브라우저 그래픽 엔진'과 같습니다. 이러한 선언적 접근 방식은 해상도에 독립적이며, JavaScript로 동적 제어가 가능하고, 종종 더 나은 성능을 보입니다.

  • 필터는 <defs> 안에 정의되며, 하나 이상의 '필터 프리미티브(filter primitives)'를 연쇄적으로 적용하여 최종 효과를 만들어냅니다.  
     
  • 주요 필터 프리미티브:
    • <feGaussianBlur>: 가우시안 블러 효과를 적용하여 이미지를 흐릿하게 만듭니다.  
    • <feOffset>: 그래픽을 지정된 만큼 이동시킵니다. 블러 효과와 조합하여 그림자를 만드는 데 사용됩니다.
    • <feDropShadow>: 그림자 효과를 간편하게 만들 수 있도록 제공되는 프리미티브입니다.  
    • <feColorMatrix>: 색상 변환 행렬을 사용하여 색조 변경, 세피아 톤, 흑백 전환 등 정교한 색상 조작을 수행합니다.
    • <feTurbulence>: 절차적 노이즈(Perlin noise)를 생성하여 구름, 대리석, 물결과 같은 자연스러운 텍스처를 만드는 데 사용됩니다.  
    • <feMerge>: 여러 필터 프리미티브의 결과물을 하나로 병합합니다.  

V. 효율적인 그래픽 관리: 그룹화와 재사용

복잡한 그래픽을 제작하거나 다수의 아이콘을 관리할 때, 코드의 구조화와 재사용성은 프로젝트의 유지보수성과 성능에 결정적인 영향을 미칩니다. SVG는 <g>, <defs>, <symbol>, <use>와 같은 강력한 요소들을 통해 효율적인 그래픽 관리 체계를 구축할 수 있는 기능을 제공합니다.

5.1. 요소 그룹화와 변환: <g> 태그의 활용

<g> 요소는 여러 SVG 요소를 하나의 논리적인 그룹으로 묶는 컨테이너입니다.  

  • 속성 상속: <g> 태그에 적용된 스타일(fill, stroke 등)이나 변환(transform) 속성은 그 안에 포함된 모든 자식 요소들에게 상속됩니다. 이는 여러 부분으로 이루어진 복잡한 객체 전체에 스타일이나 위치 변경을 한 번에 적용해야 할 때 매우 유용합니다.  
  • 변환 (Transformations): transform 속성을 사용하여 그룹 전체에 translate()(이동), rotate()(회전), scale()(크기 조절), skewX()/skewY()(기울이기) 등의 변환 함수를 적용할 수 있습니다.  
<svg width="200" height="200" viewBox="0 0 100 100">
  <g transform="translate(10, 10) rotate(15)" fill="blue">
    <rect x="0" y="0" width="30" height="30" />
    <circle cx="50" cy="15" r="15" />
  </g>
</svg>

5.2. 재사용을 위한 정의: <defs>와 <symbol>

재사용할 그래픽 요소를 미리 정의해두면 코드 중복을 줄이고 관리를 용이하게 할 수 있습니다.

  • <defs>: 'definitions'의 약자로, 그래픽 객체를 정의하기 위한 전용 컨테이너입니다. <defs> 안에 정의된 요소들은 화면에 직접 렌더링되지 않으며, 나중에 <use> 요소를 통해 참조될 목적으로만 존재합니다. 그라데이션, 패턴, 필터, 재사용할 도형 등을 이곳에 모아두는 것이 일반적입니다.  
  • <symbol>: <g> 요소와 유사하게 여러 요소를 그룹화하지만, <defs> 안에 있지 않더라도 기본적으로 화면에 렌더링되지 않는다는 중요한 차이점이 있습니다.   <symbol>의 가장 큰 장점은 자체적으로 viewBox와 preserveAspectRatio 속성을 가질 수 있다는 것입니다. 이 덕분에 각 그래픽(예: 아이콘)이 독립적인 좌표계와 종횡비를 가질 수 있어, 아이콘 시스템을 구축하는 데 가장 이상적인 요소로 사용됩니다.  

5.3. 정의된 요소 복제 및 사용: <use>

<use> 요소는 <defs>나 <symbol>에 정의된 그래픽 객체를 문서의 특정 위치에 '복제'하여 렌더링하는 역할을 합니다.  

  • href 속성(구 버전에서는 xlink:href)을 사용하여 참조할 요소의 id를 지정합니다. 예: <use href="#my-icon" />.  
  • <use> 요소를 통해 생성된 각 인스턴스에는 고유한 위치(x, y), 크기(width, height), 스타일, 변환을 적용할 수 있습니다. 이를 통해 동일한 기본 그래픽을 다양한 형태로 변형하여 사용할 수 있습니다.

5.4. 실전: SVG 스프라이트와 아이콘 시스템 구축

<symbol>과 <use>의 조합은 현대 웹에서 아이콘 자산을 관리하는 가장 확장 가능하고 성능이 뛰어난 방법론의 핵심입니다. 과거의 아이콘 폰트(스타일링의 어려움, 접근성 문제)나 개별 이미지 파일(다수의 HTTP 요청) 방식의 단점을 모두 해결합니다. 이 'SVG 스프라이트' 기법은 모든 아이콘에 대해 단 한 번의 HTTP 요청만 필요로 하면서도, 각 아이콘이 완벽하게 스타일링 가능하고 접근성을 갖춘 DOM 요소로 남게 해줍니다.

다음은 SVG 스프라이트 기법을 이용한 아이콘 시스템 구축 단계입니다.

  • 스프라이트 파일 생성: 모든 아이콘을 포함하는 단일 SVG 파일(예: sprite.svg)을 만듭니다. 이 파일 안에는 화면에 보이지 않도록 <defs>나 display: none 스타일이 적용된 <svg> 블록을 두고, 그 안에 각 아이콘을 <symbol> 요소로 정의합니다. 각 <symbol>에는 고유한 id(예: icon-home)와 자체 viewBox를 지정합니다.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M2 10 L12 2 L22 10 V22 H2 Z" />
  </symbol>
  <symbol id="icon-settings" viewBox="0 0 24 24">
    </symbol>
</svg>
  • 스프라이트 포함: 생성된 sprite.svg 파일을 HTML 문서에 포함시킵니다. 보통 <body> 태그가 시작되는 부분에 JavaScript(AJAX)를 이용해 동적으로 삽입하거나, 빌드 과정에서 HTML에 직접 인라인으로 포함시킵니다.
  • 아이콘 사용: 아이콘이 필요한 위치에서 <svg>와 <use> 요소를 사용하여 스프라이트 파일 내의 특정 아이콘을 id로 참조합니다.
<svg class="icon icon-home">
  <use href="/path/to/sprite.svg#icon-home"></use>
</svg>

<svg class="icon icon-settings">
  <use href="/path/to/sprite.svg#icon-settings"></use>
</svg>
  • 아이콘 스타일링: CSS를 통해 아이콘의 크기, 색상 등을 자유롭게 제어합니다. fill: currentColor; 속성을 사용하는 것은 매우 강력한 기법으로, 아이콘이 부모 요소의 텍스트 색상(color 속성)을 그대로 상속받게 하여 테마 적용이나 상태 변화에 따른 색상 변경을 매우 쉽게 만듭니다.
.icon { 
    width: 1.5em; /* 텍스트 크기에 비례하여 크기 조절 / 
    height: 1.5em; 
    fill: currentColor; / 부모의 color 속성 상속 / 
    vertical-align: middle; / 텍스트와의 정렬 */ 
}

.some-button { 
	color: blue;
}

.some-button:hover { 
	color: red; /* 버튼에 hover하면 아이콘 색상도 함께 변경됨 */ 
}

이러한 방식은 디자인 시스템과 컴포넌트 라이브러리에 완벽하게 통합되어, UI 아이코노그래피를 위한 단일 진실 공급원(Single Source of Truth)을 제공하며, 효율성과 유연성을 모두 만족시키는 최상의 솔루션입니다.

VI. 다이내믹 SVG: 애니메이션 기법 비교 분석

정적인 그래픽을 넘어, SVG는 웹에 생동감과 상호작용을 불어넣는 강력한 애니메이션 기능을 제공합니다. SVG를 움직이게 하는 방법은 크게 세 가지—CSS, SMIL, JavaScript—가 있으며, 각각의 접근 방식은 고유한 장단점과 적합한 사용 사례를 가집니다. 이 장에서는 세 가지 기법을 심층적으로 비교 분석하여, 프로젝트의 요구사항에 맞는 최적의 애니메이션 전략을 선택할 수 있도록 돕습니다.

6.1. SVG 애니메이션 3대장: CSS vs. SMIL vs. JavaScript

SVG 애니메이션은 간단한 UI 피드백부터 복잡한 모션 그래픽에 이르기까지 광범위한 스펙트럼을 포괄합니다. 이 세 가지 방법은 서로 다른 상황에서 각자의 강점을 발휘합니다.  

6.2. CSS를 활용한 애니메이션

  • 방법: 웹 개발자에게 익숙한 표준 CSS의 transition과 @keyframes 규칙을 사용하여 SVG의 프레젠테이션 속성(예: fill, opacity, transform)을 애니메이션합니다.  
  • 장점:
    • 친숙함: 기존 CSS 지식을 그대로 활용할 수 있어 학습 곡선이 낮습니다.
    • 성능: 브라우저가 하드웨어 가속과 같은 최적화를 수행하여 매우 부드럽고 효율적인 애니메이션을 구현할 수 있습니다.  
    • 유지보수: 애니메이션 로직을 스타일시트 내에서 관리하여 코드의 관심사 분리를 유지할 수 있습니다.
  • 단점:
    • 제한된 대상: CSS 속성으로 변환될 수 있는 프레젠테이션 속성만 애니메이션할 수 있습니다. <path>의 d 속성 데이터나 개별 정점의 위치와 같은 SVG 고유 속성은 직접 제어할 수 없습니다.  
    • 복잡성: 여러 애니메이션을 순차적으로 또는 복잡하게 연결(chaining)해야 할 경우, animation-delay를 수동으로 계산해야 하는 등 코드가 번거로워질 수 있습니다.
  • 실전 예제: 라인 드로잉 애니메이션: stroke-dasharray와 stroke-dashoffset 속성을 이용한 라인 드로잉 애니메이션은 CSS로 구현할 수 있는 가장 대표적이고 인상적인 SVG 애니메이션 기법입니다.
    1. stroke-dasharray 속성을 경로의 전체 길이와 동일한 값으로 설정하여, 경로가 하나의 긴 대시(dash)로 채워지게 합니다.
    2. stroke-dashoffset 속성도 동일한 값으로 설정하여, 대시를 경로 길이만큼 밀어내어 처음에는 선이 보이지 않게 합니다.
    3. CSS @keyframes를 사용하여 stroke-dashoffset 값을 0으로 애니메이션하면, 대시가 제자리로 돌아오면서 마치 선이 그려지는 듯한 효과가 나타납니다.  

6.3. SVG 네이티브 애니메이션: SMIL

  • 방법: SMIL(Synchronized Multimedia Integration Language)은 SVG 명세 자체에 내장된 XML 기반의 선언적 애니메이션 구문입니다.   <animate>, <animateTransform>, <animateMotion>과 같은 태그를 SVG 요소 내부에 직접 작성하여 애니메이션을 정의합니다.
     
  • 장점:
    • 독립성: 애니메이션 코드가 SVG 파일 자체에 포함되어 있어, 해당 SVG 파일을 <img> 태그나 CSS background-image로 사용하더라도 애니메이션이 정상적으로 작동합니다. 이는 다른 두 방법으로는 불가능한 SMIL의 독보적인 장점입니다.  
    • 강력한 속성 제어: CSS로는 불가능한 <path>의 d 속성을 직접 애니메이션하여 한 도형이 다른 도형으로 변하는 '모핑(morphing)' 효과를 구현할 수 있습니다.  
  • 단점:
    • 브라우저 지원: 과거 일부 브라우저에서 지원이 중단(deprecated)되었다가 다시 부활하는 등 지원 역사가 복잡하여 크로스 브라우징에 대한 우려가 존재합니다.  
    • 문법 및 복잡성: XML 기반의 문법이 다소 장황하고 직관적이지 않을 수 있으며, 복잡한 상호작용이나 시퀀스 제어가 어렵습니다. 

6.4. JavaScript를 활용한 고급 제어 및 상호작용

  • 방법: JavaScript를 사용하여 SVG 요소의 속성을 시간의 흐름에 따라 직접 조작합니다. requestAnimationFrame을 사용한 수동 구현도 가능하지만, 일반적으로는 GSAP이나 Anime.js와 같은 전문 애니메이션 라이브러리를 사용하는 것이 훨씬 효율적입니다.  
  • 장점:
    • 궁극의 유연성: SVG의 모든 속성을 제어할 수 있으며, 사용자의 입력(클릭, 스크롤 등)에 실시간으로 반응하고, 외부 데이터와 연동하는 등 상상할 수 있는 거의 모든 종류의 동적이고 상호작용적인 애니메이션 구현이 가능합니다.  
    • 정교한 제어: 애니메이션의 재생, 정지, 역재생, 속도 조절 등 타임라인을 정밀하게 제어할 수 있으며, 복잡한 시퀀스를 쉽게 구성할 수 있습니다.
  • 단점:
    • 의존성: JavaScript가 활성화된 환경에서만 작동하며, 라이브러리 사용 시 추가적인 파일 용량이 발생합니다.
    • 독립성 부재: <img>나 background-image로 사용된 SVG는 스크립트로 제어할 수 없습니다.  
  • 라이브러리 스포트라이트: GSAP (GreenSock Animation Platform): GSAP은 업계 표준으로 인정받는 고성능 웹 애니메이션 라이브러리입니다. 특히 SVG 애니메이션을 위한 강력한 플러그인을 제공합니다.  
    • DrawSVGPlugin: CSS보다 더 정교한 제어가 가능한 라인 드로잉 애니메이션을 쉽게 구현할 수 있습니다.  
    • MorphSVGPlugin: 서로 다른 두 <path> 데이터 사이를 부드럽게 변형시키는 모핑 애니메이션을 구현합니다. 심지어 두 경로의 정점(point) 개수가 달라도 GSAP이 알아서 중간점을 추가하여 자연스러운 변환을 만들어냅니다. 이는 다른 방법으로는 구현하기 매우 어려운 고급 기술입니다.  

애니메이션 기법을 선택하는 데에는 명확하고 실용적인 계층 구조가 존재합니다. 간단한 속성 기반의 전환 효과에는 CSS를 사용하고, 그 외의 모든 복잡하고 동적인 애니메이션에는 JavaScript 라이브러리(특히 GSAP)를 사용하는 것이 현대 웹 개발의 가장 효율적인 접근 방식입니다. SMIL은 <img> 태그로 애니메이션을 보여줘야 하는 등 특정 틈새 시장에서는 유용하지만, 일관되지 않은 지원 이력과 상대적으로 다루기 어려운 문법 때문에 주류 개발에서는 우선순위가 낮아졌습니다. 이 2단계 접근법은 각 기술의 장점을 최대한 활용하고 단점을 피하는 현명한 전략입니다.

기능 CSS SMIL JavaScript (GSAP)
사용 편의성 높음 (웹 개발자에게 친숙) 낮음 (XML 기반의 장황한 문법) 중간 (라이브러리 사용 시 높음)
성능 매우 높음 (하드웨어 가속) 높음 (네이티브) 매우 높음 (고도로 최적화됨)
애니메이션 가능 대상 CSS 속성으로 변환 가능한 속성 모든 SVG 속성 (경로 데이터 포함) 모든 SVG 속성 및 프로그래밍 로직
상호작용 제한적 (:hover 등) 제한적 (이벤트 기반) 완전한 제어 (모든 사용자 입력)
브라우저 지원 모든 최신 브라우저 주요 브라우저 지원 (과거 이슈 존재) 모든 최신 브라우저
주요 사용 사례 간단한 UI 전환, 호버 효과, 라인 드로잉 <img> 태그로 사용되는 애니메이션 아이콘 복잡한 모션 그래픽, 경로 모핑, 인터랙티브 시각화

VII. 프로덕션 워크플로우: 최적화와 실무 팁

SVG를 실제 프로젝트에 통합하는 과정은 단순히 그래픽을 만드는 것에서 끝나지 않습니다. 디자인 도구에서 효율적으로 에셋을 내보내고, 웹 성능을 위해 코드를 최적화하며, 모든 사용자가 접근할 수 있도록 만드는 프로덕션 워크플로우는 매우 중요합니다. 이 장에서는 전문가 수준의 SVG 결과물을 위한 실무 팁과 최적화 전략을 다룹니다.

7.1. 디자인 도구에서 SVG 내보내기: Figma & Illustrator 최적화 설정 가이드

SVG 최적화는 단 한 번의 '내보내기' 클릭으로 끝나지 않는 다단계 프로세스입니다. 최적의 워크플로우는 디자인 도구에서 신중하게 에셋을 내보낸 후, SVGOMG와 같은 전문 도구를 사용하여 코드 수준의 정밀한 최적화를 수행하는 것입니다. 디자인 도구는 시각적 충실도와 편집 용이성을 우선시하기 때문에, 웹 성능에 불필요한 메타데이터나 비효율적인 코드를 포함하는 경우가 많습니다. 따라서 1단계(디자인 도구)에서 최대한 깨끗한 코드를 생성하고, 2단계(최적화 도구)에서 웹에 특화된 최종 마무리를 하는 것이 핵심입니다.  

  • Figma에서 내보내기:
    • 주요 설정 분석:
      • Include "id" attribute: 체크하면 레이어 이름을 id로 내보내 JavaScript나 CSS에서 특정 요소를 타겟팅할 때 유용합니다.  
      • Outline text: 텍스트를 경로로 변환합니다. 폰트 파일 의존성이 사라져 렌더링 일관성은 높아지지만, 텍스트 선택, 복사, 접근성, SEO 측면에서는 불리합니다. 특별한 폰트 디자인이 아닌 일반 텍스트라면 체크 해제하는 것이 좋습니다.  
      • Simplify stroke: 내부/외부 획(stroke)을 SVG가 지원하는 중앙 획으로 변환하여 렌더링 오류를 방지합니다.  
    • 모범 사례: Figma의 블렌드 모드나 배경 블러와 같은 일부 효과는 SVG로 제대로 변환되지 않을 수 있으므로 사용에 주의해야 합니다. 간단한 아이콘은 캔버스에서 직접 'Copy as SVG' 기능을 사용하는 것이 빠릅니다. 웹 개발용으로는   Include "id" attribute를 체크하고, 텍스트의 성격에 따라 Outline text를 결정하는 것이 일반적인 출발점입니다.  
  • Adobe Illustrator에서 내보내기:
    • 주요 설정 분석 (Export As... > SVG):
      • Styling: 'Presentation Attributes'를 선택하는 것이 좋습니다. 이렇게 하면 각 요소에 fill="red"와 같이 스타일이 속성으로 직접 기록되어, CSS에서 더 높은 명시도로 스타일을 덮어쓰기(override)가 용이해집니다. 'Inline Style'은 <path style="fill:red;"> 형태로, 'Internal CSS'는 <style> 블록을 생성합니다.  
      • Font: 'SVG'를 선택하면 폰트 정보를 포함하지만, 브라우저 호환성 문제가 있을 수 있습니다. 'Convert to Outlines'는 텍스트를 경로로 변환하여 일관성을 보장하지만, 파일 크기가 커지고 접근성이 저하됩니다. 웹폰트를 사용할 수 있다면 텍스트를 그대로 유지하는 것이 가장 좋습니다.  
      • Object IDs: 'Layer Names'나 'Minimal'을 선택합니다. JavaScript로 제어할 계획이라면 레이어 이름을 명확하게 지정하고 'Layer Names'를 사용하는 것이 편리합니다. 'Minimal'은 파일 크기를 줄이는 데 도움이 됩니다.  
      • Decimal: 좌표값의 소수점 정밀도를 설정합니다. 1 또는 2로 설정하면 파일 크기를 크게 줄이면서도 시각적 품질을 대부분 유지할 수 있습니다.  
      • Minify: 체크하면 불필요한 공백과 줄바꿈을 제거하여 파일 크기를 줄여줍니다.  
    • 모범 사례: 'Export for Screens' 패널을 사용하면 여러 아트보드에 있는 에셋들을 한 번에 효율적으로 내보낼 수 있습니다. 일반적으로 웹용 SVG는   Styling: Presentation Attributes, Decimal: 2, Minify: true로 설정하는 것이 좋은 시작점입니다.  

7.2. SVG 코드 최적화: SVGOMG 도구 옵션 완전 정복

디자인 도구에서 내보낸 SVG는 여전히 최적화의 여지가 많습니다. SVGOMG는 강력한 SVGO(SVG Optimizer) 엔진을 웹 기반의 직관적인 GUI로 제공하는 필수 도구입니다. 실시간 미리보기를 통해 최적화 옵션이 그래픽에 미치는 영향을 확인하며 안전하게 파일 크기를 줄일 수 있습니다.  

  • 주요 최적화 옵션 해설:
    • Precision (정밀도): 가장 효과적인 최적화 옵션 중 하나입니다. 좌표값의 소수점 자릿수를 줄입니다. 대부분의 웹 그래픽에서는 1~2자리로 충분합니다.  
    • Cleanup IDs: 불필요하거나 사용되지 않는 ID를 제거합니다. 스크립트나 CSS에서 ID를 사용하지 않는다면 안전하게 활성화할 수 있습니다.
    • Remove editor data: Illustrator, Sketch, Figma 등이 남긴 편집기 관련 메타데이터와 주석을 안전하게 제거합니다.  
    • Merge paths: 여러 개의 <path>를 가능한 경우 하나의 경로로 병합하여 코드의 양을 크게 줄입니다.  
    • Remove raster images: SVG 내에 포함된 비트맵 이미지를 제거합니다. 의도치 않게 이미지가 포함된 경우 유용합니다.
    • Remove unused defs: <defs> 내에 정의되었지만 실제로는 사용되지 않는 요소를 제거합니다.
    • Style to attributes: 인라인 스타일(style="...")을 프레젠테이션 속성(fill="...")으로 변환합니다. CSS 오버라이드를 용이하게 할 수 있습니다.

7.3. 웹 접근성(A11y) 향상

의미 있는 정보를 전달하는 SVG(예: 차트, 기능적 아이콘)는 모든 사용자가 이해할 수 있도록 접근성을 고려해야 합니다.

  • <title>과 <desc>: <img> 태그의 alt 속성과 유사하게, <title>은 SVG에 대한 간결한 제목을, <desc>는 더 긴 설명을 제공합니다. 이 정보는 스크린 리더 사용자에게 전달됩니다.  

 

<svg role="img" aria-labelledby="titleId descId">
  <title id="titleId">닫기 버튼</title>
  <desc id="descId">이 창을 닫는 X 모양 아이콘입니다.</desc>
</svg>
  • ARIA 역할(Role)과 속성:
    • role="img": 보조 기술에 해당 SVG가 단일 이미지임을 명시적으로 알립니다.
    • role="presentation" 또는 aria-hidden="true": 순수하게 장식적인 SVG에 사용하여 스크린 리더가 무시하도록 합니다.
    • aria-labelledby, aria-describedby: <title>과 <desc> 요소의 id를 참조하여 SVG와 설명을 더 견고하게 연결합니다.  
  • 초점 관리 (Focus Management): SVG 내부의 버튼과 같이 상호작용이 가능한 요소에는 tabindex="0" 속성을 추가하여 키보드 사용자가 접근할 수 있도록 해야 합니다.  
SVGOMG 옵션 기능 사용 시점 주의사항
Precision 숫자 값의 소수점 자릿수 조절 항상 권장. 파일 크기 감소에 가장 효과적. 과도하게 낮추면(0) 곡선이 왜곡될 수 있음.
Cleanup IDs 불필요한 ID 제거 및 이름 축약 CSS/JS에서 ID로 요소를 타겟팅하지 않을 때. ID를 사용한 스크립트나 스타일이 깨질 수 있음.
Remove editor data 디자인 도구가 남긴 메타데이터, 주석 제거 항상 권장. 렌더링에 영향을 주지 않음. 없음.
Merge paths 여러 <path>를 하나로 병합 개별 경로에 다른 스타일이나 애니메이션이 필요 없을 때. 병합 후에는 개별 경로를 제어할 수 없음.
Remove viewBox viewBox 속성 제거 절대 비권장. SVG의 반응성과 확장성을 해치는 주된 원인.
Style to attributes style 속성을 개별 프레젠테이션 속성으로 변환 CSS로 스타일을 덮어써야 할 때. 프레젠테이션 속성은 CSS보다 명시도가 낮음.

VIII. 부록: SVG 핵심 요소 및 속성 참조

이 부록은 본문 전체에서 다룬 가장 중요하고 자주 사용되는 SVG 요소와 속성들을 빠르게 찾아볼 수 있도록 정리한 요약 참조 가이드입니다.

8.1. 핵심 요소

요소 설명
<svg> SVG 문서의 루트 요소. 뷰포트와 좌표계를 정의합니다.  
 
<g> 여러 요소를 그룹화하여 스타일이나 변환을 일괄 적용합니다.  
 
<path> 직선, 곡선, 호를 조합하여 모든 형태의 복잡한 도형을 그리는 가장 강력한 요소입니다.  
 
<rect> 사각형을 그립니다.
<circle> 원을 그립니다.
<ellipse> 타원을 그립니다.
<line> 직선을 그립니다.
<polygon> 다각형(닫힌 도형)을 그립니다.
<polyline> 연속된 선분(열린 도형)을 그립니다.
<text> 텍스트를 렌더링합니다. CSS 폰트 속성을 적용할 수 있습니다.  
 
<defs> 재사용할 그래픽 객체(그라데이션, 패턴, 필터 등)를 정의하는 컨테이너. 직접 렌더링되지 않습니다.  
 
<symbol> 재사용 가능한 그래픽 템플릿을 정의. 자체 viewBox를 가질 수 있어 아이콘 시스템에 이상적입니다.  
 
<use> <defs>나 <symbol>에 정의된 요소를 문서 내에 복제하여 사용합니다.  
 
<linearGradient> 선형 그라데이션을 정의합니다.  
 
<radialGradient> 방사형 그라데이션을 정의합니다.  
 
<pattern> 반복되는 패턴 채우기를 정의합니다.  
 
<clipPath> 다른 요소의 보이는 영역을 잘라내는 클리핑 경로를 정의합니다.  
 
<mask> 투명도나 명도 값을 이용해 다른 요소에 마스크를 씌웁니다.  
 
<filter> 블러, 그림자 등 복잡한 그래픽 효과를 적용하기 위한 필터 프리미티브들의 컨테이너입니다.  
 
<title> SVG나 특정 요소에 대한 제목을 제공하여 접근성을 향상시킵니다.  
 
<desc> SVG나 특정 요소에 대한 상세 설명을 제공하여 접근성을 향상시킵니다.  
 

8.2. 공통 속성

속성 설명 주요 적용 요소
id 요소에 고유한 식별자를 부여합니다. CSS, JS, URL 참조 등에 사용됩니다. 모든 요소
class 요소를 특정 그룹으로 묶어 CSS로 스타일을 일괄 적용하는 데 사용됩니다. 모든 요소
fill 도형의 내부를 채우는 색상, 그라데이션, 패턴을 지정합니다. 도형, 텍스트
stroke 도형의 윤곽선 색상을 지정합니다. 도형, 텍스트
stroke-width 윤곽선의 두께를 지정합니다. 도형, 텍스트
transform 요소에 이동, 회전, 크기 조절 등의 2D 변환을 적용합니다. <g>, 도형, 텍스트
viewBox SVG 캔버스의 좌표계와 종횡비를 정의합니다. 반응형 SVG의 핵심입니다. <svg>, <symbol>, <pattern>
d <path> 요소의 모양을 정의하는 명령어와 좌표 데이터입니다. <path>
cx, cy, r 원의 중심 좌표와 반지름을 정의합니다. <circle>, <radialGradient>
x, y, width, height 사각형의 위치와 크기, 또는 <svg> 요소의 렌더링 크기를 정의합니다. <rect>, <svg>, <image>
href 재사용할 요소를 참조합니다 (xlink:href는 구 버전). <use>, <textPath>, <linearGradient>

8.3. 추가 학습 자료

SVG의 세계는 깊고 넓습니다. 이 가이드를 시작으로 더 깊이 있는 학습을 원한다면 다음 자료들을 참고하는 것이 좋습니다.

  • MDN Web Docs - SVG: SVG에 대한 가장 포괄적이고 신뢰할 수 있는 웹 문서입니다. 모든 요소와 속성에 대한 상세한 설명과 예제를 제공합니다.  
  • W3C SVG Specification: SVG의 공식 기술 명세서입니다. 가장 정확하고 기술적인 정보를 원할 때 참고할 수 있습니다.
  • CSS-Tricks - A Complete Guide to SVG: SVG의 다양한 실용적 기법과 팁을 다루는 훌륭한 자료입니다.
  • Sara Soueidan's Blog: SVG 전문가인 Sara Soueidan의 블로그로, SVG 접근성, 애니메이션, 최적화에 대한 깊이 있는 글들을 찾아볼 수 있습니다.
  • GSAP (GreenSock Animation Platform) Docs: JavaScript를 사용한 고성능 SVG 애니메이션에 관심이 있다면 GSAP의 공식 문서는 필수적입니다.  
저작자표시 비영리 동일조건 (새창열림)

'Graphic > SVG' 카테고리의 다른 글

SVG(1)  (0) 2025.09.22
Figma를 활용한 인터랙티브 SVG 제작 가이드  (1) 2025.09.05
SVG 이해하기  (5) 2025.08.16

관련글

티스토리툴바