🌈 친절한 SVG 입문 가이드 ("A Friendly Introduction to SVG" 요약)

원문: A Friendly Introduction to SVG

---

📚 목차

1. SVG란 무엇인가?
2. Hello SVG: 코드로 시작하는 SVG
3. SVG의 기본 도형 요소
   • Line (선)
   • Rect (사각형)
   • Circle (원)
   • Ellipse (타원)
   • Polygon (다각형)
4. SVG를 스케일 가능하게 만들기: viewBox
5. SVG의 스타일링: 표현 속성
6. 애니메이션 가능한 스트로크 효과
7. SVG의 강력한 힘

---

✨ SVG란 무엇인가?

SVG(Scalable Vector Graphics)는 JPG, PNG처럼 이미지 포맷의 하나입니다. 하지만 SVG는 벡터 기반 이미지 포맷으로, XML 문법을 통해 그려집니다.

📌 즉, 픽셀 단위로 색을 지정하는 게 아니라, “무엇을 어떻게 그릴 것인지”에 대한 명령어(그리기 지침)로 구성됩니다.

✅ 장점 요약

• HTML 문서처럼 텍스트 기반으로 코드 편집 가능
• CSS/JS로 직접 스타일 및 애니메이션 가능
• 확대해도 깨지지 않는 벡터 방식
• DOM에 포함되어 다른 요소처럼 조작 가능

---

🚀 Hello SVG: 코드로 시작하는 SVG

SVG는 <img src="..."/>로 삽입할 수도 있지만, 진정한 힘은 inline SVG에 있습니다.

<img
  alt="return to homepage"
  src="/images/home.svg"
/>

이렇게 HTML 안에 직접 SVG를 작성하면, JavaScript나 CSS로 DOM처럼 다룰 수 있습니다.

🔥 CSS와의 연동 예시

<style>
  circle {
    fill: hotpink;
    transition: r 400ms, cy 600ms;
  }
  button:hover circle {
    r: 50;
    cy: 100;
  }
</style>

<button>
  <svg width="100" height="100">
    <circle r="30" cx="50" cy="50" />
  </svg>
</button>

---

🔷 SVG의 기본 도형 요소

📏 Line (선)

<line x1="80" y1="80" x2="200" y2="200" stroke="blue" stroke-width="5" />

• x1, y1: 시작점
• x2, y2: 끝점
• stroke: 선 색
• stroke-width: 선 두께

📦 Rect (사각형)

<rect x="60" y="100" width="180" height="100" stroke="green" fill="none" stroke-width="5"/>

• x, y: 좌상단 기준 위치
• width, height: 크기
• rx, ry: 둥근 모서리 반지름

⚪ Circle (원)

<circle cx="140" cy="140" r="70" stroke="purple" fill="none" stroke-width="5"/>

• cx, cy: 중심 위치
• r: 반지름

🥚 Ellipse (타원)

<ellipse cx="150" cy="150" rx="75" ry="50" stroke="orange" fill="none" stroke-width="5"/>

• rx, ry: 수평/수직 반지름

🔺 Polygon (다각형)

<polygon points="60,100 100,180 140,140 180,180 220,100" />

• points: 좌표들의 나열
• 점과 점을 직선으로 잇고, 마지막 점과 첫 점을 연결

📌 참고: 정다각형(예: 육각형)을 만들려면 삼각함수를 사용해 좌표를 계산해야 합니다.

---

📐 SVG를 스케일 가능하게 만들기: viewBox

<svg
  width="300"
  viewBox="0 0 300 220"
>
  <circle
    cx="150"
    cy="110"
    r="60"
    stroke="var(--gold)"
    stroke-width="10"
  />
</svg>

• viewBox="minX minY width height" 형식
• 내부 좌표계를 설정해 확대/축소가 가능하게 만듦
• 픽셀 기반이 아닌 비율 기반 레이아웃을 구현 가능

✅ 장점

• 반응형 UI에 최적화
• 다양한 화면에서 깨지지 않고 선명함 유지

---

🎨 SVG의 스타일링: 표현 속성

SVG는 fill, stroke, stroke-width 등의 프리젠테이션 속성으로 스타일링합니다.

<circle
  cx="100"
  cy="100"
  r="50"
  stroke="hsl(45 100% 50%)"
  stroke-width="6"
  stroke-dasharray="20, 14"
  stroke-linecap="round"
/>

• stroke-dasharray: 점선/간격 패턴
• stroke-linecap: 선의 끝 모양 (butt, round, square)

---

🎞 애니메이션 가능한 스트로크 효과

SVG의 stroke, stroke-width, stroke-dasharray 등의 속성은 CSS에서 transition과 animation으로 부드럽게 변화시킬 수 있습니다. 이로 인해, SVG는 단순한 이미지 이상의 인터랙티브한 애니메이션 표현 도구가 됩니다.

---

🔁 예제 1: 점선이 회전하는 효과

@keyframes spin {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -100;
  }
}

circle {
  stroke: hotpink;
  stroke-width: 4;
  stroke-dasharray: 10, 10;
  animation: spin 1s linear infinite;
}

• stroke-dasharray: 10, 10: 10px 선, 10px 공백을 반복하는 점선을 만듭니다.
• stroke-dashoffset: 이 값을 애니메이션하면 점선이 움직이는 것처럼 보입니다.

💡 반복 애니메이션이 끊기지 않게 하려면 dasharray의 총합과 dashoffset의 범위를 일치시켜주는 것이 좋습니다.

---

✏️ 예제 2: 선이 그려지는 듯한 트릭

const el = document.querySelector('polygon');
const length = el.getTotalLength();

el.style.strokeDasharray = `${length} ${length}`;
el.style.strokeDashoffset = length;

polygon {
  stroke: steelblue;
  stroke-width: 3;
  fill: none;
  transition: stroke-dashoffset 3s ease;
}

• getTotalLength()는 SVG 경로 전체 길이를 계산합니다.
• strokeDasharray와 strokeDashoffset을 동일하게 설정한 뒤 offset을 0으로 줄이면 외곽선이 그려지는 듯한 연출이 가능합니다.

🎯 이 방법은 path, circle, polygon 등 대부분의 SVG 요소에 적용 가능하며, 로딩 애니메이션이나 인트로 효과로 유용합니다.

---

🧪 예제 3: 커스텀 path 길이 정의하기 (pathLength 속성)

<style>
  polygon {
    stroke-dasharray: 100, 10000;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 3000ms;
  }
</style>
<svg viewBox="0 0 280 320">
  <polygon
    pathLength="100"
    points="..."
  />
</svg>

• pathLength="100"은 경로 전체 길이를 100으로 가상 재정의합니다.
• 이렇게 하면 CSS에서 stroke-dasharray, stroke-dashoffset 값을 다룰 때 훨씬 직관적으로 작성할 수 있습니다.

📌 다만, 실제 길이와 다르게 설정하는 것이기 때문에 디버깅할 때 혼란을 줄 수 있습니다. 동적 SVG를 다룰 때만 사용을 추천합니다.

---

⚡ SVG의 강력한 힘

• HTML처럼 DOM 조작 가능
• CSS/JS로 스타일과 애니메이션 적용 가능
• 크기에 상관없이 언제나 선명한 품질
• 복잡한 UI/UX에 활용 가능 (차트, 인터랙션 등)

---

📌 다음 이야기: <path> 요소

이 글에서는 <path>를 다루지 않았지만, SVG의 진정한 힘은 이 요소에 있습니다.

• 자유로운 곡선
• 복잡한 베지어 곡선, 타원형 아크 등 지원
• DSL 형식의 경로 언어 (d="M 10 10 L 50 50")

다음 포스트에서 <path>에 대한 자세한 예시와 응용법을 소개할 예정입니다.

---

📬 마치며

SVG는 웹 개발에서 꼭 알아야 할 필수 기술입니다. 이 글이 SVG 입문의 장벽을 낮추는 데 도움이 되었길 바랍니다.

SVG를 활용한 인터랙션, 애니메이션, 반응형 UI까지!
지금 시작해도 늦지 않습니다. ✨