SVG (Scalable Vector Graphics)

1. 도입 (왜 배워야 하는가)

SVG(Scalable Vector Graphics)는 웹에서 벡터 그래픽을 표현하는 XML 기반의 포맷입니다. 현대 웹 개발에서 SVG는 필수적인 요소로 자리 잡고 있습니다. 그 이유는 SVG가 해상도에 구애받지 않고 확대 및 축소가 가능하여, 다양한 화면 크기와 해상도에서도 선명한 이미지를 유지할 수 있기 때문입니다.

실무에서는 아이콘, 로고, 일러스트레이션 등 다양한 그래픽 요소를 SVG로 구현합니다. 이를 모르면 이미지의 해상도 문제로 인해 품질 저하가 발생하거나, 다양한 화면에서의 호환성 문제가 생길 수 있습니다. 특히 반응형 웹 디자인을 구현할 때 SVG는 필수적입니다.

2. 핵심 개념 설명

SVG는 XML 형식으로 그래픽을 정의하며, 다음과 같은 주요 개념이 있습니다:

비유하자면, SVG는 수학의 도형처럼 크기를 변환해도 변하지 않는 특성을 가지고 있습니다. 반면에 비트맵 이미지는 사진처럼 확대하면 픽셀이 보이는 문제를 겪게 됩니다.

3. 기본 코드 예제

다음은 기본적인 SVG 원을 그리는 코드 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 원 예제</title>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
</body>
</html>

실행 결과: 빨간색 원이 화면에 표시됩니다.

• <svg width="100" height="100">: SVG 캔버스를 100x100픽셀로 정의합니다.
• <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />: 원의 중심 좌표를 (50, 50)로 설정하고, 반지름을 40픽셀로 하며, 검은색 테두리와 빨간색 채우기를 설정합니다.

4. 실전 활용 예제

예제 1: 아이콘 구현

쇼핑몰에서 장바구니 아이콘을 SVG로 구현할 수 있습니다.

<svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M7 4V2h10v2h-1l-1 4H8L7 4z"/>
    <circle cx="10" cy="20" r="2"/>
    <circle cx="16" cy="20" r="2"/>
</svg>

이 코드는 장바구니 모양의 아이콘을 만듭니다.

예제 2: 그래프 시각화

데이터를 시각화하는 데 SVG를 활용할 수 있습니다. 예를 들어, 막대 그래프를 그릴 수 있습니다.

<svg width="200" height="100">
    <rect x="10" y="20" width="30" height="80" fill="blue"/>
    <rect x="50" y="40" width="30" height="60" fill="green"/>
    <rect x="90" y="10" width="30" height="90" fill="red"/>
</svg>

이 코드는 세 개의 막대를 그려 데이터의 차이를 시각적으로 표현합니다.

5. 흔한 실수와 주의사항

1. 뷰포트 설정 누락

- 잘못된 코드:

     <svg width="100" height="100">

- 올바른 코드:

     <svg width="100" height="100" viewBox="0 0 100 100">

- 설명: viewBox 속성이 없으면 SVG 요소가 비율에 맞게 그려지지 않을 수 있습니다.

2. 색상 코드 오류

- 잘못된 코드:

     <circle fill="#FF0000" />

- 올바른 코드:

     <circle fill="red" />

- 설명: 색상 코드를 잘못 입력하면 원이 보이지 않을 수 있습니다.

6. 정리

3. SVG는 해상도에 독립적인 벡터 그래픽 포맷입니다.
4. XML 기반으로 구조화되어 있어, 다양한 그래픽 요소를 표현할 수 있습니다.
5. 아이콘, 데이터 시각화 등 실무에서 활용도가 높습니다.
6. 다음에 학습하면 좋은 주제는 CSS와 SVG의 결합, 애니메이션 SVG 요소입니다.