Как использовать CSS и SVG для создания красивых и интерактивных веб-страниц

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

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

Вот несколько примеров кода CSS SVG:

Применение стилей SVG:

svg {

fill: #fff; /* Заполнение цветом */

stroke: #000; /* Цвет линии */

stroke-width: 2px; /* Ширина линии */

}

Контекстное применение стилей SVG:

rect:hover {

fill: #ccc; /* Заполнение цветом при наведении на прямоугольник */

}

Использование анимации для SVG-изображений:

@keyframes example {

0% { transform: scale(1); } /* Начальный размер */

50% { transform: scale(1.2); } /* Увеличение размера на 20% */

100% { transform: scale(1); } /* Завершение анимации с обратным уменьшением размера */

}

svg:hover {

animation-name: example; /* Имя анимации */

animation-duration: 1s; /* Продолжительность анимации */

}

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

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