Фильтры PicSVG: сравните Edge, Internal и Clean

Выбирайте фильтры PicSVG, сравнивая сохраненные результаты одного и того же изображения. Не изменяйте детали, меняйте по одному именованному фильтру и проверяйте нужные вам регионы и отверстия. В нашем геометрическом управлении «Край 2» подчеркивал границы, «Внутренний 1» сохранял две заполненные формы, но не включал треугольник, а «Чистый 1» менял обработку фона. Список кратчайших путей не был автоматически самой полезной версией.

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

Попробуйте на своём изображении

Открыть полный инструмент

PNGJPGWEBPPNGSVGПеретащите изображение сюдаили нажмите · вставьте ⌘VВыбрать изображениеОтпустите, чтобы проверить изображение

Бесплатно и без регистрации: перетащите изображение, чтобы увидеть превью своего вектора.

Начните с одного источника и фиксированной настройки детализации.

В этом руководстве используется веб-сайт PicSVG, протестированная страница которого идентифицировала себя как Beta V3.4. Его обычный конвертер обеспечивает загрузку, выбор эффектов и загрузку SVG. На сайте указаны файлы JPG, GIF и PNG размером до 4 МБ. Используйте изображение, на преобразование которого у вас есть разрешение, и сохраните оригинал.

Наш загруженный исходный код представлял собой оригинальный PNG-изображение размером 320 × 240 RGBA: темно-синяя прямоугольная рамка с прозрачным центром, золотым треугольником и бирюзовым блоком на прозрачном фоне. В предварительном просмотре ИСХОДНОГО ИЗМЕНЕННОГО РАЗМЕРА на веб-сайте эти прозрачные области отображались белыми. Наше сравнение касается выбора фильтра. Мы не тестировали сохранение прозрачности и не проверяли промежуточный файл, объясняющий альфа-обработку сайта. Это позволяет легко разделить несколько вопросов: сохраняет ли фильтр каждую форму, сохраняет ли рамку открытой, сохраняет ли цвет или добавляет геометрию фона?

1. Используйте ЗАГРУЗИТЬ ИЗОБРАЖЕНИЕ, чтобы загрузить источник.
2. Сохраняйте Детали: строгие при сравнении фильтров.
3. Выберите именованный фильтр в раскрывающемся списке Фильтры и подтвердите его отображаемую метку.
4. Подождите, пока предварительный просмотр обновится, проверьте его, а затем используйте DOWNLOAD SVG (СКАЧАТЬ SVG).
5. Сохраните отдельное локальное имя файла, прежде чем выбирать следующий фильтр.

Мы проверили Edge 2, Internal 1 и Clean 1, во всех случаях с настройкой Strong. В этом эксперименте Strong оставалась неизменной: мы не сравнивали её с другими значениями Details и не установили, что она сохраняет каждую мелкую деталь. Обычная конвертация завершилась без Supermode.

Фактическое состояние PicSVG

Сравните, что сохраняют Edge 2, Internal 1 и Clean 1.

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

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

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

Сохраняйте каждый вариант, прежде чем менять фильтр.

Используйте имена файлов, сохраняющие текущие настройки, например edge2-strong.svg, internal1-strong.svg и clean1-strong.svg. Держите их рядом с нетронутым источником. На странице PicSVG также описана локальная область сохраненных изображений для сравнения результатов; Для этого теста мы использовали отдельно сохраненные файлы SVG, а не рассматривали эту область как постоянное хранилище.

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

Все три файла содержали пути и не содержали элементов изображения. Их подсчеты составили семь для Edge 2, два для Internal 1 и пять для Clean 1. Эти подсчеты определяют различные сохраненные структуры, а не рейтинг качества. В результате двухлучевого анализа по-прежнему не учитывалась требуемая форма в нашем тестовом эталоне.

Все три использовали родительскую группу с черной заливкой и stroke="none". Таким образом, тонкие на вид границы Edge 2 в этих файлах представляют собой заполненную геометрию, а не являются свидетельством обводки осевой линии. Спецификация рисования SVG отличает рисование внутренней части фигуры от обводки ее контура. Руководство по трассировке штриховых рисунков объясняет, как это различие влияет на выбор изображений.

Проверьте сохраненные границы перед следующим применением

Файлы также различались объявлениями корневого размера:

Это фактически сохраненные поля, включая их единицы pt. Они не являются отчетом об импортированном физическом размере. viewBox определяет прямоугольник внутренних координат, отображаемый в области просмотра SVG, как поясняется в спецификации координат SVG. Мы отобразили варианты одинакового размера, чтобы проверить их обработку; это не делает их объявления размеров идентичными.

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

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

Часто задаваемые вопросы

Какой фильтр PicSVG лучше?

Выберите эффект, который сохраняет области и отверстия, необходимые вашему изображению. В нашем тестовом эталоне Edge 2 подчеркивал границы, Internal 1 опускал золотой треугольник, а Clean 1 менял обработку фона. Ни один результат не соответствовал всем возможным применениям.

Сохраняет ли Details Strong каждую мелочь?

Это не было установлено. Мы оставили Strong неизменной, меняя три указанных фильтра. Даже с этой настройкой Internal 1 удалил нужный треугольник из нашего тестового изображения. Проверяйте важные области, не полагаясь на название настройки.

Означает ли меньшее количество путей SVG более чистый результат?

Нет. В сохраненных вариантах было семь, два и пять путей. Файл с двумя путями все равно потерял желаемую форму. Сравните сохранившиеся графические объекты и геометрию вместо того, чтобы выбирать только наименьшее количество путей.

Означают ли тонкие края PicSVG, что SVG содержит штрихи по центральной линии?

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

Источники

1. Официальный конвертер PicSVG — руководство по вводу данных на веб-сайте, возможность выбора эффектов и рабочий процесс сохранения SVG.
2. Спецификация рисования SVG W3C — разница между заливкой и обводкой.
3. Системы координат W3C SVG — viewBox, отображение области просмотра и единицы измерения.