Два файла, оба с расширением .svg
Откройте два «сконвертированных» SVG в текстовом редакторе. В первом — единственный элемент <image>, у которого href — длинная строка data:image/png;base64,…. Во втором — элементы <path> с координатами вида d="M12 4 L…" и цветом fill у каждого. Оба открываются в браузере, и оба выглядят нормально в исходном размере. Но вектор — только второй.
Обертка — это ровно то, что звучит: исходный растр, упакованный в контейнер SVG. Увеличьте его, и браузер растянет пиксели, так что края размоются точно так же, как у PNG. Режущие плоттеры и векторные редакторы не могут выделить фигуру внутри, потому что фигур там нет — только один прямоугольник пикселей.
Векторизованный SVG описывает картинку геометрией. Каждая цветовая область становится замкнутым контуром из прямых отрезков и кривых Безье; программа отрисовки заливает этот контур в любом нужном размере, поэтому края остаются четкими что на 10 мм, что на 10 м.
Что выдает png2svg.art
Трассировка группирует пиксели вашего изображения в небольшое число плоских цветов, а затем обводит каждую цветовую область прямыми отрезками и кривыми Безье. Там, где встречаются два цвета, у них одна общая граница, поэтому между ними не появляются щели. В результате на каждую фигуру приходится свой <path>, залитый ее цветом, сгруппированный по объектам и вложенный по тому, что что охватывает (если в Слоях выбрано По цвету — один <path> на цвет). Отверстия, например внутри «О», остаются открытыми при любом правиле заливки SVG. Нет ни элемента <image>, ни встроенного растра, ни скриптов: каждый результат проверяется перед сохранением и может содержать только контуры, группы и заголовки.
Раз геометрия настоящая, предпросмотр показывает реальное число контуров и использованную палитру. Если логотип вернулся с 6 контурами и 6 цветами, в файле буквально это и лежит.
«Fe» из одного нашего шрифтового логотипа, увеличенные одинаково: у PNG в 256 px видна пиксельная сетка (слева); SVG, векторизованный из полноразмерного изображения, рисует те же края кривыми, четкими в любом размере (справа).
Как проверить любой SVG самостоятельно
- Откройте файл в простом текстовом редакторе. Найдите элементы
<path,<polygonили<circle— это геометрия. Найдите<image— это обертка. - Откройте его в браузере и увеличьте до 800 %. Векторные края остаются четкими, а обертка становится размытой или зубчатой.
- Импортируйте его в векторный редактор, например Inkscape. В трассировке можно кликать по отдельным фигурам, а обертка выделяется как одна картинка.
- Сравните размер файла. Обернутый PNG не меньше самого PNG (base64 добавляет около трети), а векторизованный логотип обычно весит несколько килобайт.
Чего трассировка не умеет
Трассировка восстанавливает плоские области. Она не возвращает детали, которых в пикселях никогда не было: иконка шириной 64 пикселя при любых настройках останется рисунком шириной 64 пикселя с кривыми, угаданными по этим пикселям. Фотографии и плавные градиенты превращаются в полосы плоского цвета (см. руководство о том, почему фото постеризуются). Текст становится кривыми, а не редактируемым текстом. Это свойства самого метода, а не настройка, которую можно выключить. Какие изображения хорошо векторизуются, а какие нет, рассказано на странице «Векторизация изображений».
Зачем нужен предпросмотр
png2svg.art показывает предпросмотр результата трассировки с водяным знаком еще до какой-либо разблокировки; чистый SVG готовится к скачиванию только после нее. Предпросмотр рисуется из тех же контуров, которые вы скачаете, поэтому если мелкий текст слипся или тонкая линия порвалась, вы увидите это до того, как потратите кредит. Чтобы разблокировать чистый SVG, нужно кредитов: 1; каждый подтвержденный аккаунт получает 3 бесплатных кредита.