Размер файла Svg больше, чем изображение png

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

PNG не обязательно больше, чем SVG!

Также может быть так, что экспорт PNG на самом деле имеет меньший размер файла, чем SVG. Это действительно не такая уж редкость!

Показательный пример отсюда -> https://en.wikipedia.org/wiki/File:India-locator-map-blank.svg

SVG-файл = 421 КБ

PNG-файл = 51 КБ

Размер файла SVG зависит от путей/точек.

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

Например , попробуйте отследить фотографию в реальном времени и экспортировать ее в формате JPEG, а затем в формате SVG. SVG будет намного больше, чем JPEG.

Было сказано, что...

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

РЕДАКТИРОВАТЬ

Просмотрев ваши файлы,

Это действительно случай сложных инструкций SVG. Глядя на формы и их характер, кажется, что вы использовали живую трассировку Adobe Illustrator для создания этих векторов. Live Trace может быть неэффективным, и настройка элементов управления может дать лучшие результаты.

Например: сравните опорные точки на rодном из ваших логотипов и на логотипе, rкоторый я сделал сам.

Хотя шрифт не такой, как показано ниже, вам нужно гораздо меньше опорных точек, чем приведенному выше.

Есть также определенные персонажи, которые имеют волнистые линии при увеличении, хотя на самом деле они должны быть прямыми!

Если вы хотите уменьшить размер файла

У вас есть 2 варианта:

1. Просмотрите весь документ, удалите опорные точки, которые вам не нужны, и измените те, которые вы делаете, чтобы вы могли удалить другие точки.

2. Повторно векторизуйте растровые изображения, которые вы использовали. Либо проследите его вручную (рекомендуется), либо настройте параметры Live Trace.

Конечно, вы могли бы просто пойти с PNG :)

Гум. Размер относителен. На самом деле у вас нет файла SVG того же размера, что и ваш png. На самом деле у вас есть векторный файл, размеры которого в этих конкретных условиях соответствуют PNG.

Проверьте этот график.

Вы можете сделать свой SVG маленьким или большим по размеру. Если данные совпадают, размер файла (вес) тот же.

Вы можете экспортировать png (или любой другой формат файла растрового изображения), если он маленький, это так. Если это не так, файл будет больше.

Вероятно, пропорция нелинейна, но это основная идея.

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

Помимо размера файла, есть еще один фактор, который следует учитывать при выборе формата файла.

SVG Графический процессор должен работать, чтобы вычислить пути файла SVG. Чем больше путей, тем больше вычислительной мощности требуется.

Растровые изображения, с другой стороны, зависят от размера файла. Большинство изображений на экране уже являются растровыми изображениями (карта, которой назначен цвет каждого пикселя). Файлы SVG должны быть преобразованы в данные растрового изображения.

Компромисс

Итак, есть еще один компромисс ... БОЛЬШИЕ ПРОСТЫЕ файлы SVG НАМНОГО более эффективны, чем даже относительно небольшие Bitmpas, НО сложное векторное изображение, выраженное в виде файлов SVG, потребует много вычислительной мощности на стороне клиента ...

Имейте это в виду. Выбирайте изображения SVG, если важно, чтобы изображение было четким (фирменным), а файл был относительно простым.

Изображение нескольких логотипов, которое вы показываете в своем вопросе, ОЧЕНЬ сложное. Формат PNG/Bitmap не только уменьшает размер файла, но и загружает его быстрее и стабильнее.

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

Неудивительно, что файл SVG больше, чем файл PNG. Рассмотрим особенности форматов.

• PNG это:
  • Бинарный формат.
  • PNG сжимается с помощью сжатия длины прогона
• SVG это:
  • текстовый формат
  • XML-тег
  • Может быть или не быть сжатым (SVGZ)

Даже довольно простой файл SVG довольно большой из-за того, как он построен. На самом деле вам, вероятно, следует сравнить размер файла SVGZ с PNG для большего сжатия яблок в яблоки.

Если бы файл PNG был построен как файл SVG, он был бы намного больше, чем большинство несжатых форматов изображений. Цвет имеет длину не менее 4-7 байт в текстовом формате, в то время как в двоичном формате он занимает 3 байта, чтобы сделать полноцветное изображение с текстовым файлом в этих условиях. быть 7 мегабайт в текстовой нотации. Итак, вы видите, что даже до сжатия SVG много теряет.

Теперь тот факт, что размер svg всего в 2,5 раза больше, свидетельствует о том, насколько меньше данных он содержит. Попробуйте сжать svg и изменить окончание на SVGZ и посмотреть, насколько ближе будут результаты после этого. Тогда у вас есть гораздо больше сравнения яблок с яблоками. Скорее всего, ваш сервер все равно будет это делать.