웹 개발자를 위한 고급 SVG 기술

SVG의 기본을 마스터했다면, 이제 그래픽을 한 단계 더 발전시킬 수 있는 고급 기술을 탐색할 시간입니다.

성능 향상을 위한 SVG 스프라이트#

여러 SVG 파일을 로드하는 대신 스프라이트로 결합하세요:

<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
  </symbol>
</svg>
 
<!-- 아이콘 사용 -->
<svg class="icon">
  <use href="#icon-home"/>
</svg>

SVG에 CSS 애니메이션 적용#

CSS를 사용하여 SVG 속성에 애니메이션 적용:

.animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s forwards;
}
 
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

시각 효과를 위한 SVG 필터#

SVG 필터로 멋진 효과 만들기:

<svg>
  <defs>
    <filter id="glow">
      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <circle cx="50" cy="50" r="30" filter="url(#glow)"/>
</svg>

viewBox로 반응형 SVG 만들기#

종횡비를 유지하면서 SVG를 반응형으로 만들기:

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <!-- 내용 -->
</svg>

인라인 SVG vs 외부 파일#

인라인 SVG의 장점#

HTTP 요청 없음
CSS로 스타일 지정 가능
JavaScript로 애니메이션 가능
중요한 그래픽에 더 적합

외부 SVG의 장점#

브라우저 캐싱
페이지 간 재사용 가능
더 깨끗한 HTML
중요하지 않은 그래픽에 더 적합

성능 모범 사례#

경로 복잡도 최소화 - 포인트가 적을수록 렌더링이 빠름
반복 요소에 <use> 사용 - DOM 크기 감소
SVGO로 최적화 - 불필요한 데이터 제거
지연 로딩 고려 - 스크롤 아래의 SVG용
CSS 변환 사용 - 하드웨어 가속

접근성 고려사항#

SVG를 접근 가능하게 만들기:

<svg role="img" aria-labelledby="title desc">
  <title id="title">회사 로고</title>
  <desc id="desc">흰색 텍스트가 있는 파란색 원</desc>
  <!-- 내용 -->
</svg>

JavaScript 통합#

JavaScript로 SVG 조작:

const circle = document.querySelector('circle');
circle.setAttribute('r', 50);
circle.style.fill = 'red';
 
// GSAP 또는 다른 라이브러리로 애니메이션
gsap.to(circle, {
  attr: { r: 100 },
  duration: 1
});

결론#

SVG는 무한한 가능성을 가진 강력한 형식입니다. 이러한 고급 기술을 마스터함으로써 웹을 위한 성능이 뛰어나고 접근 가능하며 시각적으로 멋진 그래픽을 만들 수 있습니다.

계속 실험하고 Tiny SVG로 SVG 파일을 최적화하는 것을 잊지 마세요!