Векторная графика
Конвертер SVG
Конвертируйте SVG в другие форматы или создавайте SVG из файлов других типов.
Формат SVG
SVG — единственный графический формат, который можно открыть блокнотом и прочитать глазами. Логотип в нём остаётся чётким и на визитке, и на баннере во всю стену, а весит при этом килобайты. Именно поэтому его просят прислать дизайнеры — и именно поэтому его не принимает половина сервисов, куда нужно загрузить картинку.
SVG уместен везде, где изображение состоит из фигур, а не из пикселей: логотипы, иконки интерфейса, схемы, графики, карты, иллюстрации в плоском стиле. Один файл обслуживает все размеры экранов, цвет иконки меняется одним правилом CSS, а правки вносятся текстом без открытия графического редактора.
Главная ловушка — шрифты. Если текст в макете оставлен текстом, а не переведён в кривые, у получателя без нужного шрифта надпись поедет или подставится системная гарнитура. Вторая ловушка — эффекты Illustrator и Figma: тени, размытия и сложные градиенты при экспорте нередко превращаются в растровые вставки, и файл перестаёт быть по-настоящему векторным. Ещё стоит помнить, что SVG может содержать скрипты, поэтому чужие файлы перед публикацией на сайте очищают, а без атрибута viewBox картинка отказывается масштабироваться.
Из SVG чаще всего делают PNG — когда нужна растровая версия заданного размера с сохранённой прозрачностью, и JPG — когда прозрачность не нужна, а файл идёт туда, где вектор не принимают. SVG в PDF выбирают для печати, SVG в ICO — для значка сайта, SVG в EPS — для типографии. Обратное направление, трассировка PNG или JPG в SVG, работает только на простых контрастных изображениях.
Что спрашивают о формате SVG
Почему при конвертации SVG в PNG нужно указывать размер?
В векторе пикселей нет — есть только пропорции. Если в файле заданы width и height, они и берутся за основу, но иконка, описанная как 24×24, превратится в крошечную картинку. Задавайте нужную ширину явно: 512 или 1024 пикселя для логотипа, 2048 и больше — если изображение пойдёт в печать или на крупный баннер.
В SVG пропал текст или изменился шрифт. Что произошло?
Шрифт не встроен в файл, а на устройстве, где SVG открывают, его нет — рендерер подставил свой. Лечится в графическом редакторе: выделить текст и выполнить «Преобразовать в кривые» (в Illustrator — «Создать контуры», в Inkscape — «Оконтурить объект»). После этого надпись становится геометрией и выглядит одинаково везде.
Можно ли сделать настоящий SVG из фотографии?
Полноценный — нет. Трассировка обводит области одного цвета контурами, и для чёрно-белого логотипа, подписи или простой схемы результат получается отличный. Фотография же распадается на тысячи пятен: сходство приблизительное, а файл выходит тяжелее исходного JPG. Если нужен векторный логотип, его быстрее перерисовать по растровому образцу.
Соседи по разделу
Остальные форматы раздела «Векторная графика». У каждого своя страница с направлениями конвертации от SVG и обратно.