Практическое руководство по SVG в CSS

Scalable Vector Graphics (SVG) — это технология векторной графики, широко используемая в веб-дизайне для создания иконок, логотипов, диаграмм и анимации. SVG идеально интегрируются с CSS, что позволяет динамически манипулировать их формой, цветом и анимацией.

В этом руководстве мы рассмотрим, как использовать SVG в CSS, и поговорим о базовых приемах работы с SVG.

Основы SVG и CSS

Что такое SVG? SVG — это XML-формат, который описывает графику в виде вектора. В отличие от растровых изображений (JPEG, PNG), SVG можно масштабировать без потери качества, что делает его идеальным для веб-интерфейсов.

Интеграция SVG в HTML и CSS
SVG можно подключить тремя основными способами:

1. Прямо в HTML:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

2. Импорт через CSS:

ВыделитьCSS

.icon {
    background-image: url('icon.svg');
    width: 50px;
    height: 50px;
}

3. Вставка через <object> или <iframe>:

ВыделитьHTML

<object type="image/svg+xml" data="icon.svg" width="50" height="50"></object>

Управление SVG через CSS

1. Цвет и заливка
Цвет заливки и обводки можно изменить через CSS:

ВыделитьCSS

.circle {
    fill: red; /* Заливка */
    stroke: blue; /* Обводка */
    stroke-width: 2; /* Толщина обводки */
}

2. Трансформация и анимация
SVG легко поддается трансформации и анимации с помощью CSS:

ВыделитьCSS

.rotate-icon {
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

3. Адаптация размеров
Масштабирование SVG можно производить с помощью CSS:

ВыделитьCSS

.resize-icon {
    width: 100px;
    height: 100px;
}

Примеры использования SVG в CSS

Пример 1: Иконка с анимацией

ВыделитьHTML

<svg class="loading-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#cccccc" />
</svg>

ВыделитьCSS

.loading-icon circle {
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { fill: #cccccc; }
    to { fill: #ff0000; }
}

Пример 2: Градиентная заливка

ВыделитьHTML

<svg class="gradient-circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>
    <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>

Заключение

SVG — это невероятно мощный инструмент для веб-дизайна, который тесно интегрируется с CSS. Благодаря поддержке векторной графики и возможностей CSS, SVG позволяет создавать адаптивные, масштабируемые и интерактивные элементы интерфейса.

Освоив эти базовые техники, ты сможешь эффективно использовать SVG в своих проектах и создавать профессиональные и функциональные веб-компоненты.

Блог: CSS переменные в SVG