Что такое SVG

SVG (Scalable Vector Graphics) — это формат векторной графики, созданный консорциумом W3C в 1999 году и предназначенный для отображения двухмерной графики в интернете. В отличие от растровых изображений, таких как JPG или PNG, SVG описывает изображения в виде математических объектов — линий, кривых, фигур и текста — а не пикселей. Благодаря этому SVG-файлы можно масштабировать без потери качества, что делает их особенно полезными в веб-разработке и дизайне.

Формат основан на XML (расширяемом языке разметки), поэтому его содержимое можно читать и редактировать как обычный текст. Это означает, что любой SVG-файл можно открыть в текстовом редакторе и изменить вручную, например скорректировать цвет, размеры, анимацию или структуру изображения.

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

Вот пример простого SVG-кода:

XML

</svg>

Этот код нарисует синий круг на веб-странице. Элемент <circle> описывает окружность с центром в точке (50, 50) и радиусом 40. Атрибут fill задает цвет заливки.

Преимущества и недостатки формата SVG

Где работать с SVG-графикой

Как менять цвет SVG-иконки через CSS

Как подключить SVG к html-странице

Преимущества и недостатки формата SVG

Отметим главные плюсы SVG.

1. Масштабируемость без потери качества. Формат отлично подходит для экранов с высокой плотностью пикселей (retina-дисплеев). Его векторная природа позволяет изображению сохранять четкость при любом увеличении.

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

3. Редактируемость и доступность кода. SVG можно редактировать в любом текстовом редакторе или прямо в браузере. Также его легко стилизовать с помощью CSS или анимировать при помощи JavaScript.

4. Поддержка интерактивности. SVG-объекты могут реагировать на действия пользователя: нажатия, наведение курсора, прокрутку и другие. Это дает широкие возможности для создания интерактивных интерфейсов.

5. Индексация поисковыми системами. Так как SVG основан на XML, его содержимое доступно для чтения ботами поисковиков. Это может быть важно, если вы используете формат для отображения важной информации, например схем или инфографики.

6. Кроссплатформенность. SVG поддерживается всеми современными браузерами, включая Яндекс, Chrome, Firefox, Safari, Edge и мобильные браузеры.

Несмотря на эти преимущества, у формата есть некоторые недостатки.

1. Неэффективность при сложной графике. Если изображение содержит множество деталей, градиентов и теней (например, фотография), SVG становится громоздким и медленным в отрисовке.

2. Ограниченная поддержка в старых браузерах. Хотя сегодня это редкость, старые версии Internet Explorer могут не поддерживать SVG или отображать его некорректно.

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

4. Уровень входа для новичков. SVG требует понимания базового синтаксиса XML и знания структуры документов. Новичкам может быть сложно начать с ним работать по сравнению с обычными изображениями JPG или PNG.

Где работать с SVG-графикой

Для создания и редактирования SVG-графики можно использовать как специализированные редакторы, так и инструменты общего назначения. Рассмотрим наиболее популярные решения.

1. Графические редакторы:

Adobe Illustrator. Профессиональный редактор векторной графики, поддерживающий экспорт в SVG. Дает полный контроль над формой, цветом и структурой. Можно настраивать совместимость для веба при сохранении;
Inkscape. Бесплатный и мощный векторный редактор с открытым исходным кодом. Поддерживает SVG как основной формат, подходит для создания сложной векторной графики и иконок;
Figma. Онлайн-сервис для UI-дизайна и прототипирования. Поддерживает экспорт компонентов в SVG и позволяет быстро получать код прямо из интерфейса;
Sketch (только macOS). Популярный инструмент среди веб-дизайнеров. Позволяет легко экспортировать иконки и интерфейсные элементы в SVG.

2. Онлайн-редакторы:

SVG-Editor. Простой веб-редактор SVG, работающий прямо в браузере. Удобен для быстрой правки;
Vecta.io. Современный онлайн-редактор с возможностью совместной работы. Поддерживает экспорт в разные форматы и стилизацию кода;
Boxy SVG. Простой в использовании и интуитивно понятный веб-инструмент, доступен и как приложение. Подходит для работы с иконками, логотипами и интерфейсами.

3. Текстовые редакторы и IDE:

VS Code. Редактор от Microsoft с множеством плагинов для SVG, таких как «SVG Preview», позволяющих одновременно редактировать и просматривать результат;
Sublime Text, Atom, Brackets. Другие популярные редакторы кода, которые хорошо подходят для ручной правки SVG-файлов;
браузеры. Формат можно открыть в браузере и редактировать вручную, сохраняя как XML-файл.

Как менять цвет SVG-иконки через CSS

Изменение цвета SVG-иконки возможно несколькими способами, в зависимости от того, как формат подключен к HTML. Ниже разберем основные подходы.

1. Inline SVG. Когда SVG вставлен прямо в HTML-код, например:

HTML

</svg>

Вы можете изменить цвет с помощью CSS, задав цвет fill или stroke (если используются линии):

CSS

svg {

fill: red;

}

Если используется атрибут fill="currentColor", то цвет берется из свойства color родительского элемента:
CSS

.icon {

color: blue;

}

Это удобно для стилизации.

2. Вставка через <img src="icon.svg">. В этом случае изменить цвет через CSS нельзя, так как браузер воспринимает SVG как обычную картинку. Единственный способ — заранее задать нужный цвет внутри самого SVG-файла.

3. Использование SVG как background. Если SVG подключен как фон:

CSS

.icon {

background-image: url(‘icon.svg’);

}

Варианты изменения цвета зависят от содержимого SVG. Если внутри файла задан fill="currentColor" или используется css, можно заранее подготовить версию с прозрачным цветом и перекрашивать с помощью filter, но это дает ограниченный результат.

4. Использование mask + background-color. Если SVG использован как маска:

CSS

.icon {

mask: url(‘icon.svg’) no-repeat center;

background-color: red;

}

Так можно задавать цвет через background-color, но потребуется адаптация иконки к использованию в виде маски (она должна быть одноцветной).