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

37

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

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

    Экспорт JPEG

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

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

Evanss
источник
16
Не относится к вашему вопросу, но вы не должны использовать JPG для изображений, подобных этому. Вместо этого используйте PNG: размер, вероятно, будет похожим, и вы не потеряете качество.
svick
Поймите, что сравнение будет зависеть от физического размера изображения. Масштабирование JPEG значительно увеличивает размер. Масштабирование SVG не имеет никакого эффекта. Вполне возможно, что очень маленькая иконка будет меньше, чем JPEG, хотя я бы не назвал вашу графику очень маленькой.
Пол Дрейпер
Если вы не являетесь пользователем Inkscape и не уверены в том, что можете играть в SVG вручную, вам может понравиться онлайн-инструмент, на который я ссылаюсь в моем ответе .
Дом
1
Просто добавьте к комментарию svick: изображения «как этот», где PNG лучше, это что-нибудь с прозрачными краями или что-нибудь с четкими сплошными областями цвета или белого. Если это «графика» (например, логотип, значок и т. Д.), А не «фотография», PNG обычно лучше. JPG лучше для фотографий (или фотореалистичных изображений).
user56reinstatemonica8

Ответы:

40

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

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

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

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

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

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

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


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

Wrzlprmft
источник
80

Как уже указывал 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.

Илмари Каронен
источник
4
Красиво в гольф .
Wrzlprmft
7
избавьтесь от разрывов строк, и вы сэкономите еще 50 байтов :)
Yorik
15
Я должен был присоединиться к этому сайту, чтобы поднять этот удивительный ответ! Отлично сработано!
Карл-Йохан Шегрен
Привет, Ильмари, интересно, не могли бы вы проверить веб-приложение, на которое я ссылался в ответе, и убедиться, что оно выполняет все, что вы делаете вручную? Я запустил его на большом SVG с поразительными сокращениями, но когда я также запустил этот SVG через другой сервис заранее, я смог сэкономить дополнительные 2 КБ. Когда я проверяю код SVG, я все еще вижу некоторые метаданные со ссылками на Adobe, и я понятия не имею, если это необходимо. Ваша SVG мудрость очень ценится.
Дом
30

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

кто то
источник
14
+1 Это круто! Честно говоря, я даже не знал, что этот инструмент существует. При правильных настройках версия для командной строки даже превосходит мой оптимизированный вручную код почти на 200 байтов, а выполнение его на оптимизированном вручную коде сокращает его до 4571 байта (!).
Ильмари Каронен
5

Вы можете преобразовать его в сжатый 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
Гленн Рандерс-Персон
источник
6
К сожалению, сжатые SVG не работают в большинстве, если не во всех, последних версиях IE. Идея полезна, но IE делает ее гораздо менее жизнеспособной. +1 в любом случае, потому что это не твоя вина, IE $ ucks. :)
Дом
5
@Dom, опыт работы с IE и PNG предполагает 3-5 десятилетий, а не лет.
Гленн Рандерс-Персон
3
Захватывающий IE никогда не перестает меня развлекать! :) Очень круто, что мы можем привлечь кого-то вашего уровня опыта в GDSE, я надеюсь, вам здесь понравится, и если никто еще не сказал это, добро пожаловать!
Дом
2
Для тестирования в IE вы можете использовать виртуальные машины
Скотт Карлсон
4
Если вы размещаете его на веб-сайте, это даст незначительную выгоду клиентам, запрашивающим сжатие HTTP (которое обычно использует gzip).
Боб
3

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

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

user60561
источник
Добро пожаловать в графический дизайн SE. Обратите внимание, что спрашивающий упомянул именно этот инструмент в вопросе. Не то чтобы это лишает законной силы этот ответ, но вы можете представить его в перспективе. Кроме того, что вы подразумеваете под ручной настройкой?
Wrzlprmft
Это не совсем то же самое средство, о котором говорилось в вопросе, но оно сделано одним и тем же автором и находится в том же домене. Ссылка автора имеет ссылку на этот инструмент, но я не заметил ее, пока не опубликовал свой ответ; Я не удалил его, так как он все еще полезен. Под ручной настройкой я имею в виду, что я снял флажки с нескольких полей (объединение путей, удаление идентификаторов), чтобы сделать вывод правильным, и уменьшил десятичные разряды для дальнейшего улучшения размера.
user60561
Как и в случае с SVGOMG (из ответа Dom), здесь также самая большая экономия, по-видимому, связана с отключением xlink, что в качестве побочного эффекта полностью удаляет внедренное изображение. Очевидно, что замена изображения градиентом не является чем-то, чего нельзя ожидать от автоматизированного инструмента.
Илмари Каронен
3

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

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

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

Скриншот SVGOMG

Дом
источник
1
Глядя на визуализированный предварительный просмотр, кажется, что большая часть экономии достигается за счет того, что он полностью удаляет встроенное изображение. Очевидно, что замена растрового изображения градиентом - это не то, чего можно ожидать от программного инструмента автоматически.
Илмари Каронен
1
У меня нет неоптимизированной версии с только фиксированным градиентом, но если я вручную отредактирую исходный SVG, чтобы заменить растровое изображение последним, <radialGradient>и <path>из моего оптимизированного вручную кода, SVGOMG оптимизирует полученное изображение размером 5,8 кБ до 4,02 кБ (4,11 кБ предварительно), и, кажется, выполняет довольно тщательную работу; Я действительно не вижу очевидных упущенных возможностей. (Играя с этим немного больше, я заметил, что иногда не удается объединить последовательные группы с одинаковыми атрибутами; иногда кажется, что Inkscape генерирует их, например, при корректировке страницы, чтобы соответствовать чертежу.)
Илмари Каронен
@IlmariKaronen спасибо, что посмотрел, запустив его на оригинальном SVG 22 КБ в Dropbox, я понизил его до 3,42 КБ на диске, есть идеи, почему мой меньше? (Я включил каждую опцию). Это приложение может быть лучшим (самый простой / быстрый) вариант для большинства случаев. Я не имею никакого отношения к приложению, это просто потрясающе!
Дом
1
Посмотрите внимательно на контроллер: если вы выберете «Удалить растровые изображения» при оптимизации исходного SVG, затенение на контроллере полностью исчезнет (потому что это фактически встроенный полупрозрачный PNG). Вы можете увидеть это, если сравните скриншот в своем ответе с оригинальным JPEG. Версия 4,02 кБ, которую я получил, больше, потому что она включает в себя дополнительный путь и градиент для замены удаленного затенения.
Ильмари Каронен,
@IlmariKaronen Я думаю, что вижу разницу , она настолько незначительна, что я не уверен, что мои глаза играют трюки. Это хороший момент, я до сих пор работал только со сплошными цветами в SVG, так что я буду помнить об этом в будущем, спасибо.
Дом