Можно ли уменьшить размер файла SVG, чтобы приблизить его к эквиваленту JPEG?

Как уже указал Wrzlprmft, более 50% размера вашего файла SVG занимает встроенное растровое изображение PNG, используемое для создания довольно тонкого эффекта затенения на контроллере. Достаточно просто избавиться от этого изображения и заменить его простым радиальным градиентом, чтобы уменьшить размер SVG примерно до 10 КБ.

               
^{Исходное изображение с причудливой растровой заливкой слева, отредактированная версия с простым радиальным градиентом справа.}

Пока вы это делаете, вы также должны проверить свои пути, чтобы увидеть, есть ли что-то, что можно упростить. Я не нашел многого, но схема вашего контроллера имеет несколько смежных узлов (вверху и внизу посередине), которые можно объединить без видимых различий.

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

Сначала запустите «Vacuum Defs» в Inkscape, чтобы избавиться от бесполезных определений, а затем сохраните изображение как «обычный SVG». Теперь пришло время открыть его в текстовом редакторе и посмотреть, от чего мы можем избавиться. В идеале вам следует использовать редактор со встроенным предварительным просмотром SVG, чтобы вы могли быстро увидеть, какое влияние (надеюсь, никакое) ваши правки не оказали на внешний вид изображения. Я использую для этого emacs , но есть и другие редакторы с аналогичными функциями .

В любом случае, когда файл SVG открыт в текстовом редакторе, давайте начнем его упрощать!

• Прямо вверху есть большой бесполезный <!-- comment -->. Просто удалите его.

• Если вы редактируете SVG прямо из Illustrator, также есть бесполезная <!DOCTYPE ... >строка. Удалите и его.

• Inkscape настаивает на том, чтобы вставить в ваше изображение бесполезный блок метаданных RDF. Просто найдите <metadata ...>тег и удалите его вместе со всем, включая закрывающий </metadata>.

• Кроме того, даже если вы сохраните файл как «обычный SVG», Inkscape все равно засорит его кучей пользовательских атрибутов. Найдите все атрибуты, начинающиеся с inkscape:или , sodipodi:и удалите их.

• После удаления метаданных и специфичных для Inkscape атрибутов вы можете удалить из <svg>тега все неиспользуемые атрибуты пространства имен XML. Должно быть безопасно удалить по крайней мере xmlns:rdf, xmlns:dc, xmlns:ccи xmlns:inkscape. xmlns:sodipodiЕсли есть лишний xmlns:svgатрибут, удалите и его. Единственные атрибуты пространства имен, которые вы должны были оставить на этом этапе, это:

  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  

• У <svg>тега также есть куча других бесполезных атрибутов, которые вы можете безопасно удалить, например, enable-backgroundи xml:space="preserve". (Они вставляются экспортером SVG Illustrator, а Inkscape недостаточно умен, чтобы понять, что они бесполезны.) viewBoxАтрибут также можно безопасно удалить из этого изображения, поскольку он просто повторяет значения атрибутов x, yи width.height

• Вы также можете безопасно удалить атрибуты encodingи из тега.standalone<?xml ... ?>

• Теперь давайте перейдем к сути данных изображения. По какой-то причине Inkscape настаивает на назначении idатрибутов каждому элементу, даже если на них никогда не ссылаются. Любой idатрибут, значение которого никогда не повторяется где-либо еще в файле (найдите его!), можно безопасно удалить. По сути, вам нужно сохранить только идентификаторы для градиентов и, возможно, для любых других объектов (например, путей), найденных внутри <defs>разделов.

• Кроме того, Inkscape любит генерировать длинные идентификаторы, такие как linearGradient4277. Рассмотрите возможность сокращения любых идентификаторов, которые вы не можете просто удалить, до чего-то короткого, например lg1.

• Есть также несколько <defs>разделов сразу друг за другом. Их объединение экономит несколько байтов (и упрощает структуру документа в целом).

• Также есть несколько пустых групп ( <g>элементов) в конце файла. Просто избавься от них. Также может быть несколько последовательных групп с одним и тем же transformатрибутом (или вообще без них); их также безопасно объединять.

• По какой-то странной причине Inkscape сохраняет избыточный путь Безье ( dатрибут) для <circle>элементов. Это занимает место без всякой причины, так что просто удалите их. d( Атрибуты элементов оставьте <path>без изменений; они на самом деле для чего-то используются.)

• Inkscape также любит использовать CSS в styleатрибутах, где более конкретные атрибуты были бы короче, например, переписывая fill="#4888fa"их на более подробные style="fill:#4888fa". Вы можете сэкономить несколько байтов, разбив эти стили на отдельные атрибуты (и удалив те, которые просто бесполезно повторяют настройку по умолчанию), но для этого требуется немного больше знакомства с форматом SVG, чем для большинства изменений выше.

• Кроме того, если есть какие-либо <use ... >элементы, вы можете сэкономить несколько байтов, заменив их фактическим элементом, на который они ссылаются. (Конечно, это экономит место только в том случае, если связанные элементы используются только один раз.) Также кажется, что Inkscape любит косвенно определять круговые градиенты, сначала определяя остановки в <linearGradient>, а затем ссылаясь на них в <radialGradient>; вы можете упростить это, переместив точки непосредственно внутри радиального градиента и избавившись от теперь неиспользуемого линейного градиента. В качестве бонуса, если при этом вам удалось избавиться от всех xlink:hrefатрибутов, вы можете удалить xmlns:xlinkатрибут из <svg>тега.

• Если вы действительно хотите выжать каждый лишний байт, ищите числовые значения со слишком большим количеством десятичных знаков и округляйте их до чего-то более разумного. Здесь действительно помогает предварительный просмотр в реальном времени, поскольку он позволяет увидеть, насколько можно округлить значение, прежде чем оно станет видимым. Даже если вы не хотите тщательно проверять каждое число, чтобы увидеть, насколько оно может быть округлено, вы можете, по крайней мере, выбрать легко висящие плоды, например, округлить значение 1.0000859пикселей до 1.

• Наконец, очистите отступы и пробелы в файле. Чтобы полностью свести к минимуму количество байтов, вам нужно поместить все в одну строку (или, по крайней мере, поставить разрывы строк только перед атрибутами, где в любом случае требуются пробелы), но это действительно трудно читать. Тем не менее, можно найти достойный баланс между читабельностью и компактностью с помощью простого, консервативного отступа.

Во всяком случае, вот что мне удалось вручную отредактировать в вашем SVG-изображении:

<?xml version="1.0"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
  <linearGradient id="lg1"
    x1="70.1063" y1="13.4122"
    x2="66.1994" y2="-26.4368"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#154BBF" />
    <stop offset="1" stop-color="#6E8BFF" />
  </linearGradient>
  <path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
  <linearGradient id="lg2"
    x1="70.4391" y1="13.5887"
    x2="70.4391" y2="-25.3265"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#4166FA" />
    <stop offset="1" stop-color="#87A4FF" />
  </linearGradient>
  <path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
  <path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
  <path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
  <path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
  <circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
  <circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
  <circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
  <radialGradient id="rg3"
    cx="90.874" cy="39.29"
    fx="90.874" fy="39.29"
    r="19.89"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
    <stop stop-color="#1166a8" stop-opacity="0" offset="0" />
    <stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
    <stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
  </radialGradient>
  <path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></svg>

Это изображение SVG выглядит почти неотличимо от второго примера изображения выше и занимает всего 5189 байт, что значительно меньше , чем ваше изображение JPEG. Я уверен, что его можно еще оптимизировать, но на самом деле это всего лишь пример того, что вы можете сделать за несколько минут с практикой. (Мне потребовалось гораздо больше времени, чтобы напечатать этот ответ, чем реально отредактировать код SVG.)

Наконец, сжатие этого SVG-кода с помощью gzip сокращает его до 1846 байт (!), чуть более четверти размера вашей версии JPEG.

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

Другие методы уменьшения размера файла SVG включают в себя:

• Удалите все метаданные и тому подобное. В Inkscape для этого есть функция « Сохранить как обычный SVG » . Я полагаю, что в других программах есть что-то подобное.
• Удалите узлы, которые мало что добавляют к фигурам, например, на фигуре вашего контроллера есть ложные узлы.

Это заставляет меня думать, что, возможно, слои в оригинале вызывают большой размер?

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

Изображение, с которым я работаю, слишком сложное для SVG?

Если вы можете разумно создать изображение с нуля¹, оно не должно быть слишком сложным для формата SVG. Не существует такого понятия, как волшебный порог сложности, за которым размеры файлов резко увеличиваются (вероятно, это справедливо для любого смутно разумного формата). Конечно, если вы выберете достаточно грубое разрешение, вы можете экспортировать каждый SVG в JPEG с меньшим размером файла. Но это не обязательно означает, что вам не следует использовать SVG.

^{¹ В частности, без отслеживания и т.п. Приведем крайний пример: если вы хотите точно воспроизвести каждый пиксель фотографии с помощью примитивов SVG (т. е. без встраивания пиксельной графики в SVG), вы действительно можете посчитать результат слишком сложным для эффективного представления в формате SVG. . Но это, надеюсь, здравый смысл.}

Я немного удивлен, что никто не упомянул расширение " Scour ". Он связан с Inkscape (начиная с версии 0.47) и выполняет многие оптимизации, упомянутые Илмари Кароненом.

Вы можете преобразовать его в сжатый SVG (SVGZ) и поместить image.svgz на свою веб-страницу:

gzip image.svg
mv image.svg.gz image.svgz

Или, в Adobe Illustrator, просто сохраните как «сжатый SVG», который запишет файл image.svgz.

Однако для вашего тестового изображения оно все еще больше, чем JPG:

image.jpg:   7268 bytes
image.svg:  22385 bytes
image.svgz: 14614 bytes

СВГОМГ! это отличное веб-приложение для оптимизации SVG

По словам создателя приложения, SVGOMG — это « Отсутствующий графический интерфейс SVGO ».

Запуск его на предоставленном изображении сводит его к простому размеру 3.42kbи сразу 1.4kbпосле сжатия.

Недавно я нашел на https://petercollingridge.appspot.com/svg-editor инструмент ( исходный код ), который помогает оптимизировать файлы SVG. В этом случае он дает хорошие результаты, уменьшая размер файла до 3,7 КБ, что составляет чуть более половины размера JPG, с небольшой ручной настройкой:

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