SVG를 활용한 스케일러블 그래픽 제작

**SVG(Scalable Vector Graphics)**는 웹에서 벡터 기반 그래픽을 표현하기 위한 파일 형식으로, 해상도와 상관없이 선명한 이미지를 제공합니다. PNG나 JPEG 같은 래스터 이미지와 달리 SVG는 XML 형식으로 작성되어 크기를 조정해도 품질이 손실되지 않습니다. 이 글에서는 SVG의 특징과 기본 사용법, CSS와 JavaScript를 활용한 동적 SVG 제작 방법을 소개합니다.

r

---

1. SVG 기본 문법과 구조 이해하기

SVG는 XML 기반으로, 그래픽 요소를 직접 코드로 작성할 수 있습니다.

1. SVG의 주요 특징
   • 해상도 독립적: 크기와 디스플레이 설정에 따라 선명도를 유지합니다.
   • 파일 크기 최적화: 복잡한 그래픽도 적은 파일 크기로 표현할 수 있습니다.
   • 인터랙티브: CSS와 JavaScript로 동적인 효과를 추가할 수 있습니다.
2. 기본 SVG 구조
   • SVG 문서는 <svg> 태그로 시작하며, 다양한 그래픽 요소를 포함할 수 있습니다.
     <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" fill="blue" /> </svg>
3. 주요 요소
   • <circle>: 원을 그립니다.
     • cx, cy: 원의 중심 좌표
     • r: 반지름
   • <rect>: 사각형을 그립니다.
     <rect x="50" y="50" width="100" height="100" fill="green" />
   • <line>: 선을 그립니다.
     <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" />
   • <path>: 복잡한 경로를 정의합니다.
     <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="red" />

---

2. CSS와 JavaScript로 SVG 애니메이션 구현

SVG는 CSS와 JavaScript를 사용해 동적인 효과를 쉽게 추가할 수 있습니다.

1. CSS로 SVG 스타일링
   • SVG 요소에 CSS를 적용하여 스타일을 정의할 수 있습니다.
     <style>

     .circle { fill: orange; stroke: black; stroke-width: 2; transition: transform 0.3s; }

     .circle:hover { transform: scale(1.2); }

     </style>

     <svg width="200" height="200"> <circle class="circle" cx="100" cy="100" r="50" /> </svg>
2. CSS 애니메이션
   • @keyframes를 사용해 SVG 요소를 애니메이션화합니다.
     <style>

     @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

     .animated-circle { animation: rotate 2s linear infinite; transform-origin: center; }

     </style>

     <svg width="200" height="200"> <circle class="animated-circle" cx="100" cy="100" r="50" fill="blue" /> </svg>
3. JavaScript로 SVG 조작
   • JavaScript를 사용해 SVG 요소의 속성을 동적으로 변경할 수 있습니다.
     <svg width="200" height="200" id="svgCanvas">

     <circle id="circle" cx="100" cy="100" r="50" fill="red" /> </svg>

     <script> const circle = document.getElementById('circle'); circle.addEventListener('click', () => { circle.setAttribute('fill', 'green'); }); </script>

---

3. SVG 심볼을 활용한 아이콘 관리

SVG는 웹 아이콘 관리에 최적화된 솔루션을 제공합니다.

1. SVG 심볼 정의
   • <symbol> 태그를 사용해 재사용 가능한 아이콘을 정의할 수 있습니다.
     <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

       <symbol id="icon-star" viewBox="0 0 24 24"> <

         path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />

       </symbol>

     </svg>
2. 심볼 사용
   • <use> 태그로 심볼을 호출하여 필요한 곳에 아이콘을 삽입합니다.
     <svg width="50" height="50"> <use href="#icon-star" /> </svg>
3. 장점
   • SVG 심볼은 한 번 정의되면 여러 곳에서 재사용 가능하여 유지보수가 간편합니다.

---

4. 반응형 디자인에서 SVG 활용 사례

SVG는 반응형 웹사이트에서 필수적인 요소로, 다양한 화면 크기에 유연하게 대응합니다.

1. 뷰포트와 비율 설정
   • viewBox 속성을 사용해 SVG의 스케일을 조정합니다.
     <svg viewBox="0 0 100 100" width="100%" height="100%"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
2. CSS와 결합한 반응형 SVG
   • CSS를 활용하여 SVG의 크기를 유동적으로 설정합니다.
     svg { max-width: 100%; height: auto; }
3. 미디어 쿼리와 SVG
   • 미디어 쿼리를 사용해 특정 해상도에서 SVG 스타일을 변경할 수 있습니다.
     @media (max-width: 768px) { .icon { fill: red; } }

---

결론

SVG는 해상도 독립적인 디자인, 가벼운 파일 크기, 동적 효과 적용 등 웹 퍼블리싱에서 강력한 도구로 활용될 수 있습니다. CSS와 JavaScript를 결합해 애니메이션을 추가하거나 심볼을 사용해 아이콘 관리를 간소화하면 더욱 효과적인 웹 디자인을 구현할 수 있습니다. 최신 기술을 지속적으로 학습하며 SVG를 활용한 창의적인 웹 퍼블리싱 작업에 도전해보세요.