HTML5 SVG 태그 사용법

1. SVG 태그란?

SVG 태그는 웹 페이지에 벡터 그래픽을 삽입하는 데 사용됩니다. XML 기반의 마크업 언어로, 확장 가능한 벡터 그래픽을 정의합니다. 다양한 그래픽 요소를 그릴 수 있으며, 애니메이션과 상호작용도 가능합니다.

2. 기본 구조

<svg width="300" height="200">
    <rect x="10" y="10" width="100" height="100" fill="red" />
    <circle cx="200" cy="100" r="50" fill="blue" />
</svg>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 기본 도형 예제 -->
<div class="basic-example">
    <h3>기본 도형 예제</h3>
    <svg width="300" height="200">
        <rect x="10" y="10" width="100" height="100" fill="red" />
        <circle cx="200" cy="100" r="50" fill="blue" />
        <line x1="10" y1="150" x2="290" y2="150" stroke="black" stroke-width="2" />
    </svg>
</div>

<!-- 애니메이션 예제 -->
<div class="animation-example">
    <h3>애니메이션 예제</h3>
    <svg width="300" height="200">
        <circle cx="150" cy="100" r="50" fill="green">
            <animate 
                attributeName="cx" 
                values="50;250;50" 
                dur="3s" 
                repeatCount="indefinite" />
        </circle>
    </svg>
</div>

<!-- 경로 예제 -->
<div class="path-example">
    <h3>경로 예제</h3>
    <svg width="300" height="200">
        <path 
            d="M10 10 L100 100 L200 10" 
            stroke="purple" 
            stroke-width="2" 
            fill="none" />
    </svg>
</div>

<style>
    /* 기본 도형 예제 스타일 */
    .basic-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 애니메이션 예제 스타일 */
    .animation-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 경로 예제 스타일 */
    .path-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .basic-example,
        .animation-example,
        .path-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 기본 SVG 스타일 */
    svg {
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fff;
    }

    /* SVG 요소 스타일 */
    svg rect {
        transition: fill 0.3s ease;
    }

    svg circle {
        transition: r 0.3s ease;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        svg {
            max-width: 100%;
            height: auto;
        }
    }
</style>

6. 성능 최적화 팁

• 적절한 SVG 크기를 설정합니다.
• 불필요한 요소를 제거합니다.
• SVG 파일을 최적화합니다.
• 캐싱을 활용합니다.

7. 검증 및 테스트

SVG 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• SVG 렌더링 테스트
• 성능 테스트
• 접근성 검사 도구 사용