SVG
последнее обновление: 16.12.2025
Определение: SVG (Scalable Vector Graphics) — это формат векторной графики для веба, где изображение описывается не пикселями, а математическими фигурами (линиями, кривыми, заливками). Поэтому SVG хорошо масштабируется без потери качества и отлично подходит для иконок, логотипов и простых иллюстраций.
Зачем это нужно
- Делать иконки и логотипы чёткими на любых экранах и при любом масштабе.
- Снижать вес графики для простых изображений по сравнению с PNG/JPEG.
- Легко менять цвет и размер через CSS (например, под тему или состояние кнопки).
- Использовать одну иконку в нескольких размерах без отдельного экспорта.
- Создавать простые анимации и эффекты (как правило, через CSS или JS) без тяжёлых видео/гифок.
- Собирать наборы иконок в спрайты для удобного переиспользования.
Пример
Пример кода:
// Находим SVG-иконку и меняем цвет через стиль (если используется currentColor)
const icon = document.getElementById('icon');
// Меняем цвет “как текста”
icon.style.color = '#1e63ff';
// Меняем размер
icon.style.width = '24px';
Скриншот
Подпись к скриншоту: DevTools “Elements”: показать, как SVG выглядит в HTML (встроенный <svg> или иконка из спрайта через <use>)
Частые ошибки
- Использовать SVG для сложных фотографий: в таких случаях лучше WebP/AVIF.
- Не оптимизировать SVG: лишние метаданные и “мусор” из редактора могут сильно раздувать файл.
- Жёстко задавать цвета внутри SVG и потом мучиться с перекраской (часто лучше использовать
currentColor). - Вставлять чужой SVG без проверки: внутри может быть лишняя разметка и неожиданные эффекты.
- Забывать про доступность: иконкам иногда нужен понятный текст или подпись в интерфейсе.
Связанные термины
Наши услуги
- Создание корпоративных сайтов — подготовим UI-графику и иконки в SVG, чтобы интерфейс был чётким и лёгким.
- Доработка сайтов — оптимизируем SVG, настроим спрайты и ускорим загрузку страниц.
- Техническая поддержка сайта — следим за корректной работой графики и обновлениями фронтенда.