Если вы когда-нибудь пытались увеличить логотип и видели, как изображение становится размытым и пиксельным, вы знаете, насколько это раздражает. SVG существует именно для решения этой проблемы. Это формат изображений, который работает совершенно иначе, чем JPG и PNG — и понимание этого различия важно для использования правильного формата в каждой ситуации.
Что означает SVG?
SVG означает Scalable Vector Graphics — «масштабируемая векторная графика». Это открытый формат изображений, стандартизированный консорциумом W3C (тем же, что определяет спецификации HTML и CSS), и он нативно поддерживается всеми современными браузерами.
В отличие от JPG и PNG, которые хранят изображения в виде сетки цветных пикселей, SVG описывает изображение в текстовом формате, используя математические координаты для представления форм, линий, кривых и цветов. Файл SVG на практике — это текстовый файл, который можно открыть и отредактировать в любом кодовом редакторе.
Как SVG устроен внутри?
Файл SVG написан на XML — языке разметки, похожем на HTML. Например, красный круг в SVG описывается так:
Браузер считывает эти математические инструкции и рендерит изображение прямо на экране, рассчитывая пиксели в реальном времени. Именно поэтому SVG можно отображать в любом размере — от favicon 16x16 пикселей до рекламного щита в 10 метров — без какой-либо потери качества.
Какие преимущества у SVG?
- Масштабируется без потери качества: увеличивайте или уменьшайте как угодно — изображение остаётся чётким при любом разрешении, включая экраны Retina и 4K.
- Лёгкие файлы: простые логотипы и иконки в SVG обычно намного меньше, чем в PNG, особенно в больших размерах.
- Редактируется кодом: можно менять цвета, размеры и анимации прямо через CSS или JavaScript, без графического редактора.
- Индексируется поисковиками: поскольку содержимое — это текст, Google может читать и индексировать текст внутри SVG.
- Поддержка анимации: можно создавать CSS- и SMIL-анимации прямо в SVG, не полагаясь на GIF или видео.
- Доступность: в SVG можно добавлять заголовки и описания для программ чтения с экрана.
Какие ограничения у SVG?
- Не подходит для фото: фотографии содержат миллионы цветовых переходов и сложных градиентов. Представить это в векторах привело бы к огромным и неэффективным файлам — JPG всегда правильный выбор для фото.
- Сложные изображения становятся тяжёлыми: очень детализированные иллюстрации со множеством форм и градиентов могут создавать большие и медленно рендерящиеся SVG.
- Кривая обучения для ручного редактирования: редактирование SVG напрямую в коде требует знания XML и векторной математики. Инструменты вроде Illustrator или Figma упрощают этот процесс.
💡 Практическое правило: используйте SVG для логотипов, иконок, иллюстраций, графики, карт и любого арта, который нужно отображать в разных размерах. Используйте JPG или WebP для фотографий и изображений с множеством деталей и сложными градиентами.
SVG vs PNG vs JPG — когда что использовать?
| Характеристика | SVG | PNG | JPG |
|---|---|---|---|
| Тип | Векторный | Растровый (пиксели) | Растровый (пиксели) |
| Масштабируется без потерь | Да | Нет | Нет |
| Прозрачность | Да | Да | Нет |
| Идеально для фото | Нет | Нет | Да |
| Идеально для логотипов и иконок | Да | Да | Нет |
| Редактируется через CSS/JS | Да | Нет | Нет |
| Поддерживается браузерами | Да | Да | Да |
Как использовать SVG на сайтах и в приложениях
Есть три основных способа добавить SVG на веб-страницу:
- Как тег <img>: самый простой способ. SVG обрабатывается как любое другое изображение, но не может управляться через CSS или JavaScript.
- Inline в HTML: код SVG вставляется прямо в HTML страницы. Даёт полный контроль через CSS и JS — цвета, анимации и взаимодействия. Предпочтительный подход для интерактивных иконок.
- Как фон в CSS: используя
background-image: url('icone.svg'). Полезно для декоративных иконок, но с ограниченным доступом через JavaScript.
Как конвертировать изображения в SVG?
Конвертировать фото или PNG в SVG можно с помощью процесса, называемого векторизацией, который превращает пиксели в геометрические формы. Результат лучше всего подходит для простых изображений с малым числом цветов и чёткими краями — например, логотипов на белом фоне. Конвертер изображений ImageTools позволяет конвертировать файлы между основными форматами, включая PNG и JPG в другие форматы, совместимые с вебом.
Конвертируйте ваши изображения прямо сейчас
Преобразуйте файлы между основными форматами изображений быстро и бесплатно, прямо в браузере.
Конвертировать изображениеSVG хорош для SEO?
Да. Поскольку SVG — текстовый формат, Google может сканировать и индексировать его содержимое. Кроме того, логотипы и иконки в SVG обычно меньше, чем в PNG, что способствует более быстрой загрузке страниц — а это прямой фактор ранжирования в Google с момента внедрения Core Web Vitals.
Чтобы оптимизировать SVG для SEO, добавьте атрибуты title и desc внутри кода SVG — они работают как альтернативный текст для программ чтения с экрана и поисковых систем.