Короткий ответ: SVG — векторный формат изображений, в котором картинка описана текстом: линиями, кривыми и заливками. Такой файл увеличивается до любого размера без потери чёткости. Открыть файл SVG проще всего браузером — достаточно перетащить его в окно; для правки нужен векторный редактор. А сделать SVG из обычной картинки помогает трассировка — ею занимается наш RasterTracer. Дальше — устройство формата, его отличия от растровых и всё, что с таким файлом делают.
Что такое SVG
За тремя буквами стоит Scalable Vector Graphics: графика из векторов, которой можно задать любой масштаб. Формат создан консорциумом, который отвечает за стандарты интернета, и задуман как родной векторный формат для веб-страниц. Он открытый: не принадлежит ни одной компании и не требует платных программ.
Самое необычное в SVG — он текстовый. Откройте такой файл в Блокноте, и вместо каши из символов увидите читаемые команды: круг с таким-то центром и радиусом, контур через такие-то точки, заливка таким-то цветом. Браузер читает эти команды и рисует по ним картинку под размер экрана — каждый раз заново, поэтому она всегда резкая.
Формат SVG, JPG и PNG: в чём разница
| Свойство | SVG | PNG | JPG |
|---|---|---|---|
| Вид графики | вектор | растр | растр |
| При увеличении | остаётся резким | лесенка | лесенка и рябь |
| Прозрачный фон | есть | есть | нет |
| Для чего | логотипы, значки, схемы | скриншоты, графика | фотографии |
| Перекрасить, изменить форму | легко, по фигурам | только по точкам | только по точкам |
Расширение у таких файлов — .svg. Фото в формате SVG не бывает — точнее, не бывает настоящим. Фотографию можно вложить в SVG целиком, но она останется растром внутри векторной обёртки. Что стоит за словами «растр» и «вектор», объясняется в тексте «Растровая и векторная графика».
Чем открыть SVG
Как открыть SVG-файл в браузере
Чтобы посмотреть SVG онлайн, сервисы не нужны: любой современный браузер показывает такие картинки сам. Бросьте файл на открытую вкладку — или вызовите его контекстное меню и назначьте браузер в пункте «Открыть с помощью». Картинку можно приближать, удерживая Ctrl и вращая колесо мыши: края не расплывутся.
Средства Windows
Здесь хуже. Приложение «Фотографии» SVG не открывает, а Проводник не показывает миниатюры таких файлов — вместо них значок браузера. Двойной щелчок обычно тоже ведёт в браузер. Миниатюры SVG в папке добавляют сторонние надстройки для Проводника.
Векторные редакторы
Чтобы изменить картинку — перекрасить, убрать деталь, поменять надпись, — нужен редактор.
- Inkscape — бесплатный; SVG для него родной формат.
- Adobe Illustrator и CorelDRAW — открывают и сохраняют SVG наряду со своими форматами.
- Figma и другие редакторы интерфейсов — принимают SVG перетаскиванием.
Текстовый редактор
Раз SVG — текст, простую правку можно сделать в Блокноте: найти код цвета и заменить на другой. Для значка из трёх фигур это быстрее, чем запускать редактор.
Наши программы здесь не помощники, и скажем это прямо: RasterTracer создаёт SVG из картинки, но готовые файлы не открывает, а просмотрщик «Глядень» работает с растровыми форматами.
Где встречаются файлы в формате SVG
- Веб-страницы. Эмблема в шапке, пиктограммы меню, схемы в тексте: одна и та же картинка остаётся резкой на экране любой плотности, от смартфона до проектора.
- Передача макетов. Illustrator, CorelDRAW, Inkscape и Figma читают и пишут SVG, поэтому через него переносят работу из одного редактора в другой.
- Станки. Режущие плоттеры и лазеры нередко берут SVG как готовый набор контуров.
- Стоки и наборы пиктограмм. Когда на сайте предлагают скачать значки «в SVG», имеется в виду именно это: рисунок, который вы сами перекрасите и растянете под свою задачу.
Как сделать SVG-файл
Дорог три. Первая — нарисовать картинку в векторном редакторе и записать её в этом формате. Вторая — пересохранить чужой макет: AI, CDR, EPS и PDF открываются редактором и экспортируются в SVG. Третья — трассировка: программа обводит готовое растровое изображение контурами. Годится она для эмблем, пиктограмм и рисунков с резкой границей цвета, а главная ловушка на этом пути — получить вместо вектора картинку в обёртке; как её избежать, рассказано в тексте про JPG и PNG в SVG.
Обратный путь: из SVG в картинку
Бывает, что форма загрузки или старая программа векторный файл отвергает. Тогда его превращают в PNG: векторный редактор при экспорте спрашивает ширину и высоту в точках, и можно задать любые — хоть для значка, хоть для плаката. JPG берите, только если прозрачность не нужна: на её месте он оставит сплошную заливку.
Три подводных камня
- Шрифты. Надпись, оставленная в файле текстом, на чужом компьютере покажется другим шрифтом, если нужного там нет. Перед отправкой буквы превращают в контуры.
- Вес. Вектор не всегда легче растра. После трассировки фотографии выходят десятки тысяч контуров — такой файл занимает больше исходного снимка и открывается с заметной задержкой.
- Код внутри. Формат допускает встроенные сценарии, и из осторожности многие сайты и почтовые службы такие вложения не пропускают. Это мера безопасности, а не поломка.