CSS와 SVG의 통합 사용법 - 고해상도 그래픽과 애니메이션 구현

SVG(Scalable Vector Graphics)는 해상도에 구애받지 않는 벡터 그래픽을 웹에서 구현할 수 있는 강력한 도구입니다. CSS와 결합하면 SVG를 사용한 고해상도 그래픽과 애니메이션을 쉽게 구현할 수 있습니다. 이 글에서는 SVG와 CSS를 통합하여 고해상도 그래픽을 구현하고, CSS로 SVG를 애니메이션하는 방법을 소개합니다.

1. SVG의 기본 개념

SVG는 XML 기반의 벡터 그래픽 형식으로, 텍스트 기반의 그래픽으로 크기에 상관없이 깨지지 않고 선명하게 표시됩니다. 브라우저에서 직접 렌더링할 수 있으며, CSS와 JavaScript를 통해 스타일링 및 애니메이션을 추가할 수 있습니다.

1.1 SVG 예제

아래는 간단한 SVG 그래픽의 예입니다:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

설명:

• <svg>: SVG 그래픽의 루트 요소입니다. width와 height 속성으로 크기를 정의할 수 있습니다.
• <circle>: 원을 그리는 SVG 요소입니다. cx와 cy는 원의 중심 좌표, r은 반지름입니다.

2. CSS를 사용한 SVG 스타일링

CSS를 사용하여 SVG 요소를 스타일링할 수 있습니다. SVG 요소는 HTML과 같은 방식으로 CSS 선택자와 스타일을 적용할 수 있습니다.

2.1 인라인 SVG 스타일링

SVG를 인라인으로 사용할 경우, CSS를 직접 적용할 수 있습니다.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" class="my-circle" />
</svg>

.my-circle {
    stroke: black;
    stroke-width: 3;
    fill: red;
    transition: fill 0.3s ease;
}

.my-circle:hover {
    fill: blue;
}

설명:

• class 속성: SVG 요소에 클래스를 적용하고, 해당 클래스에 CSS 스타일을 지정합니다.
• transition: 마우스를 올릴 때 채우기 색상이 부드럽게 변경되도록 애니메이션을 추가합니다.

3. CSS와 SVG를 사용한 고해상도 그래픽 구현

SVG는 벡터 기반이므로 고해상도 그래픽을 구현하는 데 매우 유용합니다. 이미지를 확대하거나 축소해도 품질이 유지되며, 다양한 해상도에서 선명하게 표시됩니다.

3.1 SVG 아이콘 사용

SVG는 아이콘으로 자주 사용됩니다. 예를 들어, 다음과 같은 아이콘을 사용할 수 있습니다:

2000/svg" viewBox="0 0 24 24">
    <path d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0zm0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm-1-17h2v8h-2V5zm0 10h2v2h-2v-2z"/>
</svg>

.icon {
    width: 50px;
    height: 50px;
    fill: #3498db;
    transition: fill 0.3s ease;
}

.icon:hover {
    fill: #e74c3c;
}

설명:

• SVG 아이콘: SVG는 크기에 구애받지 않고, 품질 손실 없이 아이콘으로 사용할 수 있습니다.
• 반응형 아이콘: viewBox 속성을 사용해 아이콘의 크기를 유연하게 조정할 수 있습니다.

4. CSS를 사용한 SVG 애니메이션

SVG는 CSS를 사용해 애니메이션을 추가할 수 있습니다. CSS @keyframes를 사용해 SVG 요소에 다양한 애니메이션을 적용할 수 있습니다.

4.1 간단한 SVG 애니메이션

<svg class="spinner" width="100" height="100" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20" stroke="#3498db" stroke-width="5" fill="none" />
</svg>

.spinner {
    animation: rotate 2s linear infinite;
}

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

설명:

• 회전 애니메이션: @keyframes와 transform: rotate()를 사용해 SVG의 circle 요소가 회전하는 애니메이션을 만듭니다.

4.2 SVG 경로 애니메이션

SVG 경로(path)를 따라 애니메이션을 실행할 수도 있습니다.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 95 10 180 80 T 180 180" stroke="#3498db" stroke-width="4" fill="none" />
    <circle r="5" fill="#e74c3c">
        <animateMotion dur="5s" repeatCount="indefinite">
            <mpath href="#path" />
        </animateMotion>
    </circle>
</svg>

설명:

• <animateMotion>: SVG 경로를 따라 원(circle)이 이동하는 애니메이션을 만듭니다. 이는 SVG의 고유 애니메이션 기능을 사용한 예입니다.

5. SVG 필터와 CSS 효과 통합

SVG 필터와 CSS 효과를 함께 사용해 더욱 복잡하고 흥미로운 시각적 효과를 구현할 수 있습니다.

5.1 SVG 필터 사용

SVG 필터는 그래픽 요소에 다양한 효과를 적용할 수 있습니다. 다음은 SVG 필터를 사용해 그림자 효과를 추가하는 예입니다:

<svg width="0" height="0">
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
            <feOffset dx="5" dy="5" result="offsetblur" />
            <feFlood flood-color="rgba(0,0,0,0.5)" />
            <feComposite in2="offsetblur" operator="in" />
            <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>
</svg>

<svg width="100" height="100" style="filter: url(#drop-shadow);">
    <circle cx="50" cy="50" r="40" fill="#3498db" />
</svg>

설명:

• SVG 필터: filter 요소를 정의하고, CSS 필터와 유사하게 SVG 요소에 필터 효과를 적용할 수 있습니다.
• feGaussianBlur와 feOffset**: 그림자 효과를 만들기 위해 사용됩니다.

결론

SVG와 CSS를 결합하면 고해상도 그래픽과 복잡한 애니메이션을 구현할 수 있습니다. SVG의 벡터 특성을 활용해 해상도에 구애받지 않는 그래픽을 제작하고, CSS로 다양한 스타일과 애니메이션을 추가하여 웹 페이지를 더욱 생동감 있게 만들 수 있습니다. 이 글에서 소개한 방법을 사용해, SVG와 CSS를 결합하여 웹사이트에 고급 그래픽과 애니메이션을 추가해보세요.