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

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

• Этот выпадающий список содержит файл SVG, а также оригинальный файл Illustrator.

• Это экспорт JPEG:

  

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

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

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

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

• Удалить все метаданные и тому подобное. Для этого в Inkscape есть Save as plain SVG . Я полагаю, что другие программы имеют нечто подобное.
• Удалите узлы, которые мало добавляют к фигурам, например, на фигуре вашего контроллера есть ложные узлы.

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

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

Является ли изображение, с которым я работаю, слишком сложным, чтобы подходить для SVG?

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

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

Как уже указывал 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". (Те , которые вставляются экспортером Illustrator SVG, и 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 любит косвенно определять круговые градиенты, сначала определяя остановки в a <linearGradient>, а затем ссылаясь на них в a <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.

Я немного удивлен, что никто не упомянул расширение " 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

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

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

SVGOMG! удивительное веб-приложение для оптимизации SVG

По словам создателя приложения, SVGOMG является " M Minging G UI" SVGO .

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