Короткий ответ
SVG — это формат изображений, в котором рисунок описывается линиями, фигурами и текстом, а не сеткой пикселей. Поэтому логотип, иконку или схему в SVG можно увеличить для экрана или печати без характерных размытых квадратов по краям.
SVG подходит для простой графики, но обычно не заменяет JPG в фотографиях. Посмотреть файл можно в современном браузере. Если программа или сайт не принимает SVG, создайте растровую копию: PNG — когда нужен прозрачный фон и чёткие края, JPG — когда прозрачность не важна.
- Нужно только посмотреть. Откройте файл из доверенного источника в браузере или программе для изображений.
- Нужно изменить логотип или схему. Используйте векторный редактор, чтобы сохранить контуры и возможность масштабирования.
- SVG не принимают. Сделайте PNG-, JPG- или WebP-копию нужного размера, но сохраните исходный SVG отдельно.
Что такое формат SVG
Название расшифровывается как Scalable Vector Graphics — «масштабируемая векторная графика». Внутри файла находится текстовая разметка XML: она задаёт координаты точек, форму кривых, цвета, обводки, прозрачность и другие свойства рисунка. Браузер или редактор читает это описание и заново отрисовывает изображение в выбранном размере.
Такой принцип закреплён в спецификации SVG 2 от W3C. В ней SVG описан как язык на основе XML для двумерной векторной и смешанной векторно-растровой графики. Для обычной работы знать разметку не нужно: файл можно использовать как картинку и редактировать визуально.
Расширение файла — .svg. Простое переименование в .png или .jpg не меняет содержимое. Для другого формата нужна конвертация или экспорт из редактора.
Почему SVG не пикселизуется при увеличении
Растровая картинка хранит готовую сетку пикселей. Если изображение 300 × 300 px растянуть до 1200 × 1200, программе приходится увеличивать уже существующие точки и угадывать промежуточные. Контуры могут стать мягкими или ступенчатыми.
SVG хранит не готовую сетку, а описание фигур. При каждом изменении размера круг остаётся кругом, а кривая рассчитывается заново под экран или печать. Поэтому один файл удобно использовать для маленькой иконки, крупного логотипа и вывески.
Масштабируемость не гарантирует, что любая часть SVG останется идеально чёткой. В файл можно встроить обычную фотографию или другую растровую картинку. Такая вставка по-прежнему ограничена своим исходным разрешением и при сильном увеличении может размыться.
SVG, PNG или JPG: что выбрать
| Задача | Подходящий формат | Почему |
|---|---|---|
| Логотип, иконка, простая схема | SVG | Чёткие контуры в любом размере и возможность редактировать фигуры |
| Скриншот, рисунок с прозрачным фоном | PNG | Точно хранит пиксели, прозрачность и мелкие детали интерфейса |
| Фотография | JPG или WebP | Лучше подходят для сложных оттенков и обычно дают практичный размер файла |
| Графика для программы, которая не принимает SVG | PNG или JPG | Растровая копия совместима с большим числом форм и редакторов |
| Анимация или интерактивная графика на сайте | SVG, если это предусмотрено разработкой | Формат поддерживает стили, анимацию и сценарии, но требует безопасного подключения |
Для фотографии SVG почти всегда неудобен: изображение состоит из множества оттенков и мелких деталей, а попытка превратить их в контуры может создать тяжёлый и неточный файл. Подробное сравнение растровых вариантов есть в статье «JPG или PNG: что лучше выбрать».
Где используют SVG
Логотипы и фирменные знаки
Один исходник можно разместить на сайте, в документе и на большом макете. Для печати всё равно стоит уточнить у типографии, принимает ли она SVG или просит другой векторный формат.
Иконки интерфейса
Простые формы остаются чёткими на экранах с разной плотностью. Цвет и размер иногда можно менять без подготовки отдельной картинки.
Схемы и диаграммы
Линии, подписи и геометрические фигуры хорошо подходят для векторного описания и не теряют резкость при увеличении.
Простые иллюстрации
SVG удобен для рисунков с ограниченным числом форм и цветов. Сложные текстуры, шум и фотографические тени часто практичнее хранить в растровом формате.
Чем открыть и отредактировать SVG
Для просмотра достаточно актуального браузера: перетащите доверенный файл в окно или выберите браузер в меню «Открыть с помощью». Масштаб страницы поможет проверить, остаются ли контуры чёткими. Если файл не отображается, он может быть повреждён, содержать неподдерживаемые ссылки на внешние ресурсы или иметь неверное расширение.
Для правок нужен редактор векторной графики. В нём можно менять отдельные контуры, заливки, обводки и текст, не превращая рисунок в набор пикселей. Если открыть SVG в растровом редакторе, программа обычно попросит выбрать размер и выполнит растеризацию. После этого редактируется уже пиксельная копия, а не исходные векторные формы.
SVG является текстовым форматом, поэтому его код можно увидеть в обычном текстовом редакторе. Но случайная правка скобки, атрибута или координаты способна нарушить весь документ. Для бытовой задачи визуальный редактор безопаснее и понятнее.
Безопасно ли открывать SVG из неизвестного источника
К SVG стоит относиться внимательнее, чем к обычной фотографии. Формат может содержать ссылки на внешние ресурсы, интерактивные элементы и сценарии. Спецификация W3C прямо предусматривает выполнение скриптов в некоторых режимах обработки SVG, а также отдельные безопасные режимы, где сценарии и внешние ссылки отключены.
- Не открывайте неожиданный SVG из письма или сообщения, если не доверяете отправителю.
- Не вставляйте неизвестный код SVG прямо в HTML сайта.
- Проверяйте файл защитными средствами системы и используйте актуальные программы.
- Для публикации на сайте очищайте SVG средствами, предусмотренными вашим проектом, либо используйте проверенную растровую копию.
- Не считайте конвертацию гарантированной проверкой безопасности: результат зависит от обработчика файла.
Технические различия режимов описаны в разделе processing modes спецификации SVG 2. Если источник вызывает сомнение, безопаснее не открывать файл и запросить обычную PNG- или JPG-копию у отправителя.
Когда SVG нужно конвертировать
Конвертация нужна не для «улучшения» файла, а для совместимости с конкретным местом использования. Перед обработкой узнайте требуемый формат, фон и размер в пикселях.
| Ситуация | Что сделать | Что проверить |
|---|---|---|
| Форма принимает PNG | Конвертировать SVG в PNG | Прозрачность, размер и чёткость тонких линий |
| Нужна обычная картинка без прозрачности | Конвертировать SVG в JPG | Цвет фона и качество краёв |
| Нужен растровый файл для сайта | Конвертировать SVG в WebP | Итоговый размер, качество и поддержку в месте публикации |
| Нужно продолжать редактирование | Оставить SVG | Шрифты, встроенные изображения и совместимость редактора |
При переводе SVG в PNG, JPG или WebP нужно заранее выбрать пиксельные размеры. Полученный файл уже нельзя бесконечно увеличивать без потери резкости. Сохраните исходный SVG, чтобы позже сделать новую копию другого размера.
Станет ли фотография векторной после перевода в SVG
Не автоматически. Если растровое изображение просто поместить внутрь SVG-контейнера, фотография останется набором пикселей. Расширение изменится, но масштабируемого векторного рисунка не появится.
Другой способ — трассировка: программа строит контуры по цветовым областям исходника. Она хорошо работает с чёткими логотипами, пиктограммами и простыми рисунками. Фотография содержит слишком много оттенков, текстур и мелких деталей, поэтому результат может быть приблизительным и весить больше исходника. Конвертер PNG в SVG использует именно векторную трассировку; после неё нужно проверить контуры, цвета и сложность файла.
Частые ошибки с SVG
- Использовать SVG для любой картинки. Фотографии обычно лучше хранить в JPG или WebP.
- Переименовывать расширение. Имя файла не меняет его внутренний формат.
- Считать любой SVG полностью векторным. Внутри могут находиться растровые изображения.
- Удалять исходник после экспорта. Растровая копия теряет свободное масштабирование.
- Не задавать размер при конвертации. От него зависит чёткость PNG, JPG или WebP.
- Без проверки вставлять чужой SVG на сайт. Формат может содержать активное содержимое и внешние ссылки.
Частые вопросы о формате SVG
Короткие ответы о масштабировании, открытии, безопасности и конвертации SVG.
Что такое SVG простыми словами?
SVG — это формат векторных изображений. Он хранит описание линий, фигур, текста и цветов, поэтому логотипы, иконки и схемы можно увеличивать без обычной пикселизации.
Чем открыть файл SVG?
Для просмотра доверенного SVG подходит современный браузер. Для изменения контуров, цветов и текста используйте редактор векторной графики.
Чем SVG отличается от PNG?
SVG описывает векторные фигуры и лучше подходит для логотипов, иконок и схем. PNG хранит готовую сетку пикселей и удобен для скриншотов, сложной растровой графики и прозрачных изображений.
Можно ли увеличить SVG без потери качества?
Векторные элементы SVG можно масштабировать без пикселизации. Но встроенная в SVG фотография остаётся растровой и при сильном увеличении может потерять чёткость.
Можно ли просто переименовать SVG в PNG или JPG?
Нет. Переименование меняет только имя файла. Чтобы получить настоящий PNG или JPG, SVG нужно экспортировать или конвертировать с выбором итогового размера.
Безопасно ли открывать SVG из интернета?
SVG может содержать сценарии и ссылки на внешние ресурсы, поэтому открывайте только доверенные файлы, используйте актуальные программы и не вставляйте неизвестный SVG-код прямо на сайт.
Станет ли фотография векторной после конвертации в SVG?
Простая смена контейнера не делает фотографию векторной. Трассировка может построить контуры по растровому изображению, но лучше всего она подходит для простых логотипов, иконок и рисунков с чёткими краями.
