Как определить, содержит ли SVG растровое изображение

Да, SVG может содержать растровое изображение. В одном документе могут находиться векторные контуры и пиксели, а иногда SVG — почти только оболочка вокруг PNG или JPEG. Расширение .svg сообщает формат контейнера, а не то, что каждая видимая часть векторная.

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

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

Что может содержать SVG

SVG — графический формат на основе XML, и его модель содержимого шире одних контуров. Спецификация встроенного содержимого SVG 2 определяет элемент <image>, размещающий целиком указанный файл в прямоугольнике. Это может быть PNG, JPEG или другой SVG.

Отсюда четыре распространённые структуры:

Смешанное содержимое не обязательно ошибочно. Карта может использовать контуры для подписей и границ, сохраняя спутниковый слой со светотенью растровым. В товарной графике редактируемая эмблема может размещаться поверх фотографии. Проблема начинается, когда вы ожидали от преобразования редактируемых контуров, а получили пиксели в другом контейнере.

Проверка 1: исследуйте объекты

Откройте SVG в Illustrator, Inkscape, Affinity Designer или другом редакторе с панелью объектов или слоёв. Выделите область, которую подозреваете в растровом содержимом.

• Один прямоугольный объект, помеченный как изображение, — сильный признак содержимого изображения.
• Видимые узлы по настоящим краям рисунка указывают на векторную геометрию.
• Обтравочный контур может скрывать прямоугольное изображение, поэтому раскройте дерево слоёв или объектов до вывода.
• Контуры в других местах не доказывают, что весь документ векторный. Один файл может содержать оба типа.

Эта проверка полезна дизайнерам, которые не хотят читать XML, но у неё есть ограничение: прямоугольный объект <image> может ссылаться на другой SVG. Проверка исходного текста покажет, что объект действительно загружает.

Проверка 2: исследуйте исходный текст SVG

Сделайте копию и откройте .svg в редакторе обычного текста. Найдите <image. Если такого элемента нет, распространённый механизм встраивания изображений отсутствует. Если нашли, прочитайте значение href.

Встроенный PNG часто начинается так:

<image href="data:image/png;base64,iVBORw0KGgo..." />

Встроенный JPEG обычно начинается с data:image/jpeg;base64,. Справочник MDN по data URL объясняет, что данные помещаются непосредственно в URL с необязательным кодированием Base64. Для этой формы нормально очень длинное нечитаемое содержимое.

Связанный растр выглядит примерно так:

<image href="photos/product-shot.png" />

Этот PNG не хранится внутри SVG. Документ зависит от отдельного файла по указанному пути. Если перенести или отправить SVG без изображения, рисунок может исчезнуть.

Наконец, это не доказывает наличие растра:

<image href="icons/mark.svg" />

Справочник MDN по <image> прямо отмечает, что элемент может отображать растровые форматы или другой SVG. Перед классификацией проверьте тип медиа или расширение файла.

Три структуры внутри SVG или рядом с ним

Встраивание и связывание создают разные проблемы

При импорте изображения Inkscape может связать его или встроить. Руководство по импорту изображений прямо описывает компромисс: связывание сохраняет небольшой размер SVG, но привязывает документ к расположению изображения; встраивание делает SVG самодостаточным, но увеличивает размер.

При передаче файла это важно:

• Встроенный растр: переносится одним файлом, но всё ещё ограничен разрешением и часто намного крупнее ожидаемого.
• Связанный растр: проще обновлять независимо, но связь ненадёжна при перемещении между папками, компьютерами, сайтами или поставщиками.
• Векторные контуры: редактируются как геометрия, но только если исходник изначально трассировали или рисовали контурами.

Встраивание — упаковка, а не векторизация. Base64 не превращает пиксели в кривые. Если вы готовите материалы для фотостока, следуйте проверке векторных работ перед отправкой в Adobe Stock, чтобы дополнительно проверить монтажную область, редактируемость и исходники.

Почему одного увеличения недостаточно

Если подозрительная область становится блочной при сильном увеличении в нескольких просмотрщиках, она, вероятно, растровая. Но просмотрщик может растрировать исправный SVG для миниатюры, canvas, предпросмотра печати или кеша импорта. И наоборот: встроенный PNG высокого разрешения может выглядеть гладким при обычном масштабе и оставаться незамеченным в документе.

Используйте увеличение для поиска симптома, затем подтверждайте по объектам или исходному тексту. Общее руководство почему SVG выглядит пикселизированным отделяет встроенное содержимое от поведения просмотрщика и отображения маленьких значков. Для приложения на canvas сравните импорт изображения и редактируемых контуров в Konva, прежде чем считать один узел изображения проблемой исходного SVG.

Решите, сохранить, перепривязать или заменить изображение

Сохраните растр, если пиксели нужны намеренно

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

Перепривяжите или встройте, если проблема в переносимости

Если связанное изображение пропадает на другом компьютере, упакуйте SVG и изображение с той же относительной структурой папок или встройте изображение до передачи. Это исправляет отсутствующий ресурс. Оно не делает изображение редактируемым как контуры.

Замените растр, если были обещаны контуры

Если конвертер обернул плоский логотип, значок или линейный рисунок в SVG, найдите оригинальный PNG или JPEG. Если оригинала нет, извлеките встроенное изображение или экспортируйте этот объект в исходном размере. Затем преобразуйте изображение в векторные контуры, проверьте фигуры и замените объект <image> проверенным векторным результатом.

PerfectVector полезен для восстановления подходящих плоских рисунков в редактируемые фигуры. Он не превращает непрерывные тона фотографии в небольшой точный набор контуров волшебным образом. Сохраняйте фото растровым, если цель — не намеренная постеризация. Если нужна копия утверждённого SVG в PNG, рендерите прямо в окончательном пиксельном размере через Sharp; увеличение маленького PNG не добавит деталей ни одному растровому изображению, встроенному в этот SVG.

Пользователям Scratch стоит проверить, почему Convert to Vector не трассирует растр, прежде чем экспортировать ещё одну оболочку.

Восстановите эффекты, растрированные при экспорте

Некоторые SVG в основном векторные, но содержат одну растрированную тень, размытие, текстуру или неподдерживаемый эффект. Решите, должен ли эффект оставаться редактируемым и переносимым. Восстановите простой эффект поддерживаемыми векторными средствами, намеренно сведите его в растр с разрешением для передачи или удалите. Трассировка мягкой тени обычно создаёт шумные фигуры, а не улучшенный эффект.

Проверка смешанного SVG перед передачей

Прежде чем отправить файл на сайт, в типографию, на резку или коллеге:

1. Найдите в исходном тексте <image, data:image/, .png, .jpg и .jpeg.
2. Уточните, должен ли каждый указанный ресурс быть растровым, векторным или отсутствовать.
3. Временно переместите связанные файлы и снова откройте SVG, чтобы выявить нарушенные зависимости.
4. Выделите важный рисунок и убедитесь, что части, которые должны редактироваться, являются контурами.
5. Сопоставьте исходные пиксельные размеры растра с итоговым экранным или печатным размером.
6. Повторно откройте передаваемую копию во втором приложении.
7. Сохраните оригинальный исходник и растровую пробу, если внешний вид важнее редактируемости.

Для резки или изготовления удалите декоративный растр из машинного файла и выполните проверку SVG перед резкой. Резак следует контурам; он не превращает встроенную фотографию в контур резки.

Частые вопросы

Может ли SVG содержать PNG или JPEG? Да. Элемент image в SVG может ссылаться на PNG или JPEG как на отдельный файл либо хранить его данные внутри SVG. Растр сохраняет исходное пиксельное поведение.

Всегда ли тег image означает, что SVG содержит растр? Нет. Элемент image также может ссылаться на другой SVG. Перед классификацией проверьте в href или старом xlink:href тип медиа, data URL или имя файла.

Как узнать, встроен растр или связан? У встроенного изображения href обычно начинается с data:image, поэтому его байты находятся внутри SVG. У связанного изображения указан путь или URL вроде images/photo.png, и оно зависит от отдельного ресурса.

Можно ли удалить встроенное изображение из SVG? Да. Удалите его, если оно не нужно, замените намеренным растровым ресурсом или векторизуйте подходящий плоский рисунок и подставьте получившиеся контуры. Сохраните резервную копию до редактирования XML.

Почему в моём SVG есть и контуры, и изображение? Это смешанный SVG. Файл может намеренно сочетать фото с векторными наложениями, или экспортер мог растрировать эффект. Перед изменением проверьте, каким частям нужна редактируемость.

Источники

1. W3C — встроенное содержимое SVG 2 — Определяет элемент <image>, его href и растровые или SVG-ресурсы, на которые он может ссылаться.
2. MDN — SVG <image> — Практическая справка о поддерживаемом содержимом изображений и размерах.
3. Руководство Inkscape для начинающих — импорт изображений — Объясняет связанные и встроенные импортированные изображения и компромисс переносимости.
4. MDN — Data URL — Документирует схему data:, часто используемую для хранения данных изображения внутри SVG.

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