Что такое SVG-файл? Как его открыть, использовать и создать

SVG-файл (Scalable Vector Graphics) — это изображение, построенное на математике и коде, а не на сетке пикселей. Он хранит картинку как фигуры (линии, кривые и заливки), а не как цветные точки, поэтому остается четким в любом размере: от крошечной иконки приложения до огромного билборда. При этом файл обычно получается небольшим. Скорее всего, вы уже встречали SVG в логотипах, иконках сайтов и файлах для резки на Cricut.

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

Коротко

• SVG хранит изображение как фигуры, описанные кодом, а не пиксели, поэтому масштабируется до любого размера без размытия.
• Он отлично подходит для логотипов, иконок, простых иллюстраций, Cricut-проектов и печати. Для фотографий это плохой вариант.
• Открыть SVG можно в любом браузере, дизайнерском приложении (Illustrator, Inkscape, Figma, Canva) или даже обычном текстовом редакторе.
• Создать SVG можно в векторной программе или преобразовав изображение, которое у вас уже есть, в SVG.

SVG и обычное изображение (PNG или JPG)

PNG или JPG — это растровое изображение: фиксированная сетка цветных пикселей, похожая на мозаику. Достаточно сильно приблизить его, и вы увидите квадраты. Поэтому логотип, сохраненный как PNG, становится размытым, когда вы сильно его увеличиваете.

SVG — это векторное изображение: набор инструкций вроде "нарисуй здесь круг, залей его оранжевым, а там нарисуй эту кривую". Поскольку картинка каждый раз заново отрисовывается по этим инструкциям, она выглядит четкой в любом размере. В этом одном различии и заключается вся ценность формата. (Подробный разбор, когда какой формат использовать, есть в статье PNG vs SVG.)

Что на самом деле внутри SVG-файла

Вот что обычно удивляет: SVG — это текст. Откройте такой файл в Notepad или любом редакторе кода, и его можно будет прочитать. Внутри это XML, текстовый формат с тегами, где каждая фигура описана строкой кода. Простой SVG с оранжевым кругом выглядит так:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

Это весь файл. circle рисует фигуру, cx/cy задают ее положение, r задает радиус, а fill задает цвет. Поскольку это обычный текст, SVG получается маленьким, браузер отрисовывает его мгновенно, а цвет можно поменять заменой одного слова. SVG — открытый стандарт, который W3C поддерживает с конца 1990-х, и все современные браузеры его понимают.

Для чего используют SVG

SVG особенно полезен там, где графика должна оставаться четкой в разных размерах или редактироваться как набор фигур:

• Логотипы. Один SVG подходит и для визитки, и для баннера, без отдельного файла под каждый размер.
• Иконки и графика для сайтов. Кнопки, стрелки и простые иллюстрации остаются четкими на любом экране и быстро загружаются.
• Cricut и режущие машины. SVG — стандартный формат файлов для резки. Машина следует по контурам и режет винил, бумагу или HTV. (Подготовка SVG-файлов для Cricut разбирает весь процесс от начала до конца.)
• Печать и вывески. Вектор масштабируется до любого физического размера без пикселизации.

Для чего SVG не подходит

SVG создан для плоской графики, поэтому он плохо подходит для фотографий. Фотография состоит из миллионов тонко смешанных цветов без плоских областей, и попытка превратить ее в фигуры даст либо постеризованную картинку, похожую на живопись, либо огромный и запутанный файл. Если вы собираетесь векторизовать фото, сначала прочитайте, что на самом деле происходит при конвертации фотографии в SVG. Для настоящей фотографической детализации лучше оставить JPG или PNG.

Как открыть SVG-файл

Есть три простых варианта, в зависимости от того, что вы хотите сделать:

• Просто посмотреть: перетащите файл в любой браузер. Он отобразится сразу, без установки программ.
• Редактировать визуально: откройте его в дизайнерском приложении вроде Inkscape (бесплатно), Illustrator, Figma или Canva. (Как редактировать SVG показывает перекрашивание и изменение форм.)
• Посмотреть или поправить код: откройте файл в обычном текстовом редакторе, например Notepad или VS Code.

Один момент часто сбивает с толку: Проводник Windows по умолчанию не показывает миниатюры SVG-файлов, поэтому в папке файл может выглядеть пустым. Это не значит, что он сломан. Откройте его в браузере, и он отобразится нормально.

Как создать SVG

Есть два пути, и правильный зависит от того, с чего вы начинаете.

Создать с нуля. Нарисуйте логотип, иконку или иллюстрацию в векторной программе (Inkscape, Illustrator, Figma или Canva) и экспортируйте как SVG. Это дает самый чистый результат, потому что файл был векторным с самого начала.

Преобразовать изображение, которое уже есть. Именно это чаще всего и нужно. Если логотип или арт существует только как PNG или JPG, его превращают в SVG через векторизацию: пиксели заново перерисовываются как редактируемые фигуры. (Что такое векторизация изображений объясняет этот процесс.)

Как это выглядит с PerfectVector

Если у вас есть PNG или JPG, а нужен настоящий SVG, это как раз путь конвертации, и именно этим занимается PerfectVector. Загрузите логотип, иконку или плоскую иллюстрацию, и он пересоберет изображение как чистый SVG с малым числом узлов и редактируемыми цветами, готовый для веба, печати или режущей машины. Вы можете превратить свое изображение в SVG и сами проверить результат. Первые изображения можно конвертировать бесплатно, без кредитной карты.

Лучше всего это работает с теми же материалами, для которых хорош сам SVG: плоской графикой и логотипами. Для детальной фотографии ни один конвертер не сделает настоящий фотографический вектор, и мы скажем об этом прямо, а не будем делать вид, что все иначе.

Коротко о безопасности

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

FAQ

Для чего используют SVG-файл? Для логотипов, иконок сайтов, кнопок, простых иллюстраций и файлов для резки на машинах вроде Cricut. Везде, где графика должна оставаться четкой в разных размерах или редактироваться как набор фигур, SVG — сильный выбор. В вебе он используется очень широко, потому что файлы небольшие и масштабируются без потери качества.

Как открыть SVG-файл? Перетащите его в любой браузер, чтобы посмотреть; откройте в дизайнерском приложении вроде Inkscape, Illustrator, Figma или Canva, чтобы редактировать визуально; или откройте в текстовом редакторе вроде Notepad, чтобы увидеть код. Учтите, что Проводник Windows по умолчанию не показывает миниатюры SVG, поэтому пустая на вид иконка не означает, что файл сломан.

Как создать SVG-файл? Либо создайте его в векторной программе (Inkscape, Illustrator, Figma или Canva) и экспортируйте как SVG, либо преобразуйте уже имеющееся изображение, например PNG- или JPG-логотип, в SVG через векторизацию. Создание с нуля дает самый чистый результат; конвертация — быстрый путь, когда у вас есть только растровый файл.

SVG-файл — это векторный файл? Да. SVG означает Scalable Vector Graphics, и этот формат хранит изображения как векторные фигуры, а не пиксели. Именно поэтому он масштабируется до любого размера без потери качества.

В чем разница между SVG и PNG или JPG? PNG или JPG состоит из пикселей и размывается, если увеличить его больше исходного разрешения. SVG состоит из фигур и остается четким в любом размере. PNG и JPG лучше подходят для фотографий; SVG лучше подходит для логотипов, иконок и графики.

Можно ли открыть SVG-файл в Microsoft Word или Office? Да. Microsoft 365 и новые версии Office позволяют вставлять SVG-файлы и даже перекрашивать или менять их стиль внутри документа, что удобно для логотипов и иконок в отчетах и презентациях.

---

SVG — это просто изображение, построенное из фигур и кода вместо пикселей, поэтому оно остается четким где угодно и остается редактируемым. Если пока оно существует у вас только как PNG или JPG, преобразуйте его в чистый SVG, и у вас будет файл, который можно масштабировать, перекрашивать и резать без размытия.