Логотип поступает в двух файлах: logo.svg при 3 КБ и logo.png при 40 Кб. оба выглядят одинаково на вкладке браузера. взорвать их, чтобы заполнить экран проектора и только один остается острым.Попробуйте загрузить их в социальный профиль и принимается только другой. и если все, что у вас есть, это PNG, инструменты, которые обещают & quot;преобразовать PNG в SVG& quot; вернуть что-то, что технически является SVG, но не файл, который сделал бы ваш дизайнер.
В этом руководстве объясняется разница между двумя форматами с точки зрения того, что каждый файл хранит, когда использовать что, что происходит, когда вы визуализируете SVG в пиксели, и что трассировка PNG в векторные формы может и не может восстановить Он включает в себя реальные числа из механизма трассировки за преобразователями Toolz, и находится под хаб инструментов изображений, йо-
TL;DR: SVG - это векторный формат: он хранит формы в виде геометрии, поэтому масштабируется до любого размера без размытия и идеально подходит для логотипов, значков и диаграмм. PNG - это растровый формат: он хранит фиксированную сетку пикселей без потерь, которая подходит для скриншотов, подробного изображения и любого места, где принимаются только изображения. Переход от SVG к PNG точен в выбранном вами размере; используйте Преобразователь SVG в PNG в 2x или 4x для резкого вывода. переход от PNG к SVG - это трассировка, которая перестраивает фигуры из пикселей и не восстанавливает оригинальный дизайн. работает для плоских логотипов и линейного искусства, и терпит неудачу на фотографиях. все преобразования здесь запускаются на стороне клиента, ничего не загружается, бесплатно, без регистрации.
В чем разница между SVG и PNG?
SVG описывает изображение как инструкцию по его рисованию, а PNG хранит готовый рисунок в виде пикселей. Все остальное в двух форматах следует из этого одного различия.
Файл SVG, определенный W3C в Масштабируемая векторная графика (SVG) 2, является XML текст. он перечисляет пути, круги, прямоугольники, градиенты и текст, каждый с координатами и цветами. ничто в нем не говорит, сколько пикселей изображение имеет Когда браузер отображает его, рендерер выясняет, какие пиксели каждая форма покрывает в размере на экране, поэтому один и тот же файл является четким на телефоне и на 5K-мониторе.
Файл PNG, указанный W3C как Портативная сетевая графика и опубликован как ISO/IEC 15948, сетка цветных пикселей сжатая с DEFLATE. сжатие без потерь, поэтому пиксели, которые вы декодируете, являются именно теми пикселями, которые были сохранены. PNG может нести полный альфа-канал и до 16 бит на канал. чего он не может сделать, так это добавить детали: 512 x 512 PNG, показанный в 2048 x 2048, имеет каждый пиксель растянутый через блок 4 x 4, а края становятся мягкими или блочными.
Вот тот же простой значок, что и источник SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
Эти четыре строки разметки - это все изображение, и они остаются четырьмя строками независимо от того, отображаете ли вы его в ширину 240 пикселей или 24 000. версия того же значка PNG в 240 x 80 вмещает 19 200 пикселей, а в 960 x 320 - 307 200.
SVG против PNG: какой формат мне использовать?
Используйте SVG для всего, что сделано из форм, которые должны масштабироваться, и PNG для всего, что сделано из пикселей или направляется куда-то, что принимает только растровые изображения. эта таблица устанавливает их рядом:
| Собственность | стара | png |
|---|---|---|
| Модель изображения | Вектор: пути, формы, текст | Растр: фиксированная пиксельная сетка |
| стандартный | W3C СВГ 2 | W3C PNGИСО/МЭК 15948 |
| шелушение | Острый в любом размере | Размытие или блоки при увеличении |
| Сжатие | Текст; gzip на сервере | Без потерь ДЕФЛЯТ |
| прозрачность | да | Да, полная альфа |
| Размер файла для логотипа | Обычно несколько КБ | Растет с размерами пикселей |
| Размер файла для фотографии | Непрактичный | Крупный, но разумный |
| Редактируется после экспорта | Да, формы и цвета в векторном редакторе | Только пиксель за пикселем |
| Текст внутри | Может оставаться выбираемым и доступным для поиска | Запеченные в пиксели |
| Может содержать сценарии | Да, что вызывает озабоченность в плане безопасности | нет |
| Принимается социальными загрузками, офисными приложениями, электронной почтой | Часто нет | почти всегда |
| лучше для | Логотипы, значки, диаграммы, диаграммы, иллюстрации пользовательского интерфейса | Скриншоты, детальное искусство, основные средства |
Практическое правило: сохраняйте SVG в качестве своего мастера для любого вектора и экспортируйте из него PNG в размерах, необходимых каждому пункту назначения. Никогда не сохраняйте только PNG логотипа, потому что превращение пикселей обратно в фигуры - это потеря, а превращение фигур в пиксели - нет.
Для фотографий ни один из форматов не является правильным выбором для доставки. Фотография в PNG большая, а фотография в SVG - это либо PNG, завернутый в XML, либо отслеживаемое приближение. JPEG, WebP или AVIF созданы для этой работы; что такое WebP и когда его использовать закрывает сторону фотографии.
Почему так много мест отказываются от загрузки SVG?
Потому что SVG - это документ, который может содержать активный контент, а не только изображение. спецификация SVG позволяет <script> элементы, атрибуты обработчика событий, такие как onloadссылки на внешние ресурсы и встроенный HTML <foreignObject>. Сайт, который принимает загрузку SVG и позже обслуживает ее из собственного домена, может в конечном итоге запустить кто-то другой 's JavaScript для каждого посетителя, который открывает файл напрямую.
Санирование SVG безопасно возможно, но скрипка, поэтому многие платформы идут более простым путем: изображения профиля, списки на рынке, рекламные сети, многие медиа-библиотеки CMS и большинство почтовых клиентов принимают только растровые форматы. офисные документы и приложения чата также имеют более неоднородную поддержку.
Это наиболее распространенная причина конвертировать SVG в PNG. Браузер, рисующий SVG в качестве изображения, является безопасным случаем, поскольку SVG загружается через <img> элемент или на холст не разрешается запускать сценарии или извлекать внешние файлы. конвертеры Toolz визуализируют SVG именно таким образом, что делает безопасным преобразование файла из неизвестного источника.
Как конвертировать SVG в PNG, не теряя при этом качества?
Рендеринг SVG в нужном вам размере пикселя, или больше, и никогда не масштабировать PNG вверх после. потому что SVG геометрия, рисовать его в 4x так же точно, как рисовать его в 1x; все потери качества в этом направлении происходят от выбора слишком маленького вывода.
выше Преобразователь SVG в PNG определяет размер в таком порядке:
- Если корень SVG устанавливается
widthаheightони используются с такими устройствами, какmm,pt,inаcmпреобразован в CSS-пиксели. - Если только имеет
viewBox, используется ширина и высота коробки обзора. - Если у него нет ни того, ни другого, он рисуется в 1024 x 1024.
- Если самая длинная сторона все еще меньше 512 пикселей, рисунок увеличивается пропорционально до тех пор, пока эта сторона не станет 512, поскольку значок 24 x 24, нарисованный в заявленном размере, слишком мал для использования.
- Затем опция шкалы SVG умножает результат на 1, 2 или 4.
Возьмите значок выше, который заявляет width="240" height="80". Самая длинная сторона меньше 512, поэтому она увеличена до 512 x 171. При 2x PNG выходит на 1024x342, с неокрашенными углами, оставленными прозрачными. в примечании под результатом указан размер и откуда он взялся, поэтому нет никаких предположений.
Выберите 2x для экранов, где большинство телефонов и ноутбуков используют два или более пикселей устройства на пиксель CSS, и 4x для печати или больших дисплеев. потолок вывода составляет 100 мегапикселей или 16 384 пикселей сбоку, а файлы SVG более 50 МБ отказываются; меньший масштаб исправляет первый случай.
Два вида контента не выживают при рендеринге Изображения и веб-шрифты, связанные URL-адресом, не учитываются, потому что SVG, нарисованный как изображение, не может получить ничего за пределами файла, поэтому текст возвращается к системному шрифту; преобразование текста в контуры в вашем векторном редакторе перед экспортом позволяет избежать этого. И анимированный SVG становится одним неподвижным кадром.
Должен ли я конвертировать SVG в PNG, JPG или PDF?
Конвертируйте в PNG по умолчанию, в JPG только тогда, когда пункт назначения отклоняет PNG или ему нужен файл меньшего размера для фотоподобной графики, и в PDF, когда вам нужен документ для печати или электронной почты.
| мишень | прозрачность | Размер | Что ты теряешь | использовать для |
|---|---|---|---|---|
| png | сохраненный | Средний | Масштабируемость | Загрузки, слайды, ресурсы приложения, все, что имеет прозрачный фон |
| JPG | Наполнен белым | Наименьший для сложного искусства | Масштабируемость, прозрачность, некоторая острота кромок | Формы, которые содержат только JPG, вложения по электронной почте |
| PDF (растеризованный) | Прозрачные области показывают белую страницу | Больший | Масштабируемость, выбираемый текст, кликабельные ссылки | Листы с доказательствами, печать диаграммы, отправка иллюстраций недизайнерам |
выше конвертер SVG в JPG заполняет прозрачные области белым, потому что JPEG не имеет альфа-канала, и применяет ползунок Качества. четкие края на плоском цвете - это именно то место, где сжатие JPEG оставляет слабый звон, поэтому логотип обычно выглядит лучше, как PNG.
выше конвертер SVG в PDF заслуживает четкого предупреждения. растеризуется: каждый SVG нарисован в пиксели, сохранен как PNG, и помещен на странице.PDF не содержит векторных фигур, текст не может быть выбран, и масштабирование достаточно далеко показывает пиксели. опция масштаба все еще помогает, так как размер страницы остается фиксированным, в то время как 2x и 4x упаковывают в него больше пикселей (72, 144 или 288 пикселей на дюйм с Fit to image).Если типография просит вектор PDF, пер ИСО 32000 PDF-файл может передавать истинные векторные пути, но для этого вам нужен векторный редактор и экспорт #39;s, а не конвертер изображений.
Что делает преобразование PNG в SVG?
Преобразование PNG в SVG отслеживает изображение: оно группирует пиксели в области одинакового цвета и облегает контуры вокруг каждой области, создавая заполненные векторные пути. Он не находит исходный векторный файл, поскольку PNG не содержит записи о формах, которые его создали. Каждое ребро на выходе представляет собой оценку, полученную из пикселей.
Трассировщик позади PNG в SVG а JPG в SVG на Toolz is imagetracerjs, работающий в фоновом режиме Web Worker, поэтому страница остается отзывчивой. Он работает в два этапа:
- Уменьшение цвета. Изображение сводится к небольшой палитре, номер, который вы выбираете под Цветами: 2, 8 или 16.
- Краевая фурнитура. Для каждого цветового слоя трассировщик проходит границу каждой связанной области и подходит к ней прямыми линиями и кривыми, создавая один заполненный путь на каждую область.
Каждый путь также получает контур в 1 пиксель в своем цвете Без него соседние фигуры оставляют промежутки линии роста волос там, где их края не совсем встречаются, а фон проявляется в виде тонких белых швов.
Деталь контролирует, насколько точно эти контуры следуют за пикселями:
| Деталь | Допуск по линии и кривой | Спекки опустились ниже | Предварительное размытие | Результат |
|---|---|---|---|---|
| Низкий | 2 шт | 16 очков | Слегка | Более гладкие, простые и меньшие файлы |
| Средний (по умолчанию) | 1 шт | 8 баллов | ни один | Сбалансированный |
| Высокий | 0,5 пх | 2 очка | ни один | Ближе следует за пикселями, сохраняет крошечные формы, тяжелее |
Прослеживаемый SVG пишется своим width а height установите исходный размер изображения и a viewBox в отслеживаемых пикселях он открывается в том размере, который вы ожидаете, и чисто масштабируется, где бы вы его ни разместили.
Что может хорошо сделать трассировка и где она не работает?
Трассировка хорошо работает на изображениях, которые были векторными, чтобы начать с: плоский цвет, жесткие края, мало цветов. это не удается на что-либо с непрерывными тонами, потому что фотография не имеет рёбер, чтобы найти, только градиенты.
| Источник | Как это прослеживается | Предлагаемые настройки |
|---|---|---|
| Плоский логотип, от 2 до 6 цветов | Чистые формы, небольшой файл | 8 цветов, Средний |
| Черно-белые линии, подписи, марки | Очень чисто | 2 цвета, средний или высокий |
| Иконы с градиентом | Градиент превращается в полосы | 16 цветов, средний, затем упростить в редакторе |
| Сканированный рисунок на бумаге | Текстура бумаги становится крапинками | 2 цвета, Низкий |
| Логотип JPG с артефактами сжатия | Крапинки по краям, фон прослеживается как форма | Низкая детализация; удалите форму фона после этого |
| Скриншот с текстом | Буквы становятся обрывистыми контурами | Держите его как PNG |
| Фотография | Пятнистые плакатные фигуры, огромный файл | Не отслеживать |
Ряд фотографий - это не вопрос вкуса. при тестировании движка Toolz шумная фотография размером 2000 px, прослеженная в 16 цветах, заняла 28 секунд и дала SVG объемом 46 МБ, что во много раз тяжелее изображения, из которого она пришла, и все еще заметно хуже. Шум дает трассировщику тысячи крошечных областей, и каждый становится своим собственным путем со своими координатами.
Этот тест является причиной того, что конвертер масштабирует любое изображение длиннее 1200 пикселей на стороне до 1200 до отслеживания. трассировка затем заканчивается в секундах, а не в минутах, и поскольку на выходе сохраняется исходная ширина и высота, ничего о том, как SVG помещается, не меняется. Трассировка, все еще работающая через две минуты, останавливается сообщением, предлагающим меньше цветов или более низкую деталь, вместо того, чтобы оставлять вкладку занятой на неопределенный срок.
Источники JPG добавляют две специфические проблемы. сжатие JPEG оставляет слабые блоки вокруг острых краев, которые трассировщик может превратить в блуждающие формы; Низкая деталь слегка размывается и опускает пятнышки, чтобы противостоять этому. И JPG не имеет прозрачности, поэтому белая коробка вокруг логотипа становится еще одной заполненной формой позади произведения искусства. В векторном редакторе выберите эту форму и удалите ее.
Как получить чистый SVG от логотипа PNG?
Начните с простейших настроек, которые сохраняют дизайн, посмотрите на предварительный просмотр и добавляйте цвета или детали только тогда, когда чего-то не хватает. Более тяжелые настройки редко исправляют плохой след; они добавляют к нему больше путей.
Надежная последовательность:
- Используйте самый большой и чистый источник, который у вас есть. экспорт PNG превосходит скриншот, а скриншот превосходит фотографию распечатки.
- Подсчитайте цвета в логотипе и выберите ближайший вариант на или над ним. двухцветная отметка хочет 2, пятицветная отметка хочет 8.
- Трассировка на Medium. проверьте предварительный просмотр и размер файла, показанный под результатом.
- Если есть пятнышки или шероховатости, повторите движение в Low. Если тонкие детали исчезли, повторите движение в High.
- Откройте результат в векторном редакторе для последнего шага: удалите форму фона, если она есть, объедините формы, которые должны быть единицей, и замените любой отслеживаемый текст реальным шрифтом.
Когда размер файла, показанный после трассировки, больше, чем PNG, рассматривайте это как сигнал. Для логотипа это обычно означает, что отслеживается шум; для всего остального это обычно означает, что изображение должно оставаться растровым.
Если след направляется к режущему станку, лазерному граверу или программному обеспечению для вышивки, 2 цвета часто являются правильным ответом даже для красочного дизайна, поскольку эти станки работают по контурам, а не по заполнениям.
Могу ли я конвертировать эти форматы в одном месте?
Да. Генерал Преобразователь изображений принимает SVG вместе с JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG и PDF, и пишет JPG, PNG, WebP, GIF, ICO, PDF или SVG. Выбор SVG в качестве цели отслеживает любой источник растра с теми же настройками цветов и деталей; выбор цели растра для источника SVG показывает опцию масштаба SVG.
Выделенные парные страницы принимают только собственный исходный формат, который сохраняет актуальность параметров на экране: на страницах SVG отображается масштаб, на страницах трассировки отображаются цвета и детали.
Одна комбинация не предлагается: PDF в SVG. конвертер отказывается от него с сообщением, и маршрут, который он предлагает, состоит из двух шагов: сначала преобразовать PDF страницу в PNG, затем проследить PNG. Если PDF пришел из векторной программы, экспорт SVG из этой программы сохраняет реальные пути и является лучшим вариантом.
SVG также может стать фаворитом. Передача его на ICO создает квадратные изображения PNG при каждом размере значка, а минимум 512 пикселей означает, что небольшой значок SVG по-прежнему дает чистую запись с разрешением 256 пикселей. Размеры Favicon и то, что находится внутри файла ICO охватывает, какие размеры включить.
Являются ли конверсии SVG и PNG частными?
Да. рендеринг, кодирование и отслеживание все происходят на стороне клиента, внутри вкладки браузера, поэтому файл не загружается. шаг декодирования SVG и трассер загружаются только тогда, когда файл нуждается в них, что сохраняет свет страницы, когда вы конвертируете только между растровыми форматами.
Ограничения, в одном месте: SVG файлы до 50 МБ, рендеринг вывода до 100 мегапикселей и 16 384 пикселей в сторону, растровые источники до 100 мегапикселей, трассировка до 1200 px на самой длинной стороне, и двухминутный потолок на трассировку. инструменты бесплатны, без регистрации, с ежедневным ограничением на преобразования.
