Posso reduzir o tamanho do arquivo de um SVG para ficar mais próximo do seu equivalente em JPEG?


37

Eu tenho uma imagem que estou usando em um site. Gostaria de usar um SVG para que ele possa ter qualquer tamanho e ainda parecer nítido.

  • Essa caixa de depósito contém o arquivo SVG e o arquivo original do Illustrator.
  • Esta é uma exportação JPEG:

    Exportação JPEG

O SVG tem um tamanho de arquivo muito maior que o JPG. É possível otimizar o SVG para que ele tenha um tamanho de arquivo semelhante? Talvez eu consiga perder parte da qualidade, se isso ajudar. Eu tentei este otimizador SVG , mas não fez muita diferença.

Se eu salvar o arquivo do illustrator como JPG, rastrear o resultado e salvá-lo como um SVG, obterá um tamanho de arquivo muito menor, mas com alguma perda de qualidade. Isso me faz pensar que talvez as camadas no original estejam causando o tamanho grande? A imagem com a qual estou trabalhando é muito complexa para ser adequada ao SVG?


16
Não está relacionado à sua pergunta, mas você não deve usar JPG para imagens como esta. Em vez disso, use PNG: o tamanho provavelmente será semelhante e você não terá nenhuma perda de qualidade.
svick

Perceba que a comparação dependerá do tamanho físico da imagem. Escalar um JPEG aumenta muito o tamanho. Escalar um SVG não tem efeito. É concebível que um ícone muito pequeno seja menor como um JPEG, embora eu não chamaria seu gráfico muito pequeno.
Paul Draper

Se você não é um usuário do Inkscape e não se sente confiante em jogar um SVG manualmente, pode gostar da ferramenta on-line à qual vinculei minha resposta .
Dom

11
Apenas para adicionar ao comentário de svick: imagens "como esta" em que PNG é melhor são qualquer coisa com bordas transparentes ou qualquer coisa com áreas sólidas nítidas de cor ou branco. Se for um 'gráfico' (por exemplo, um logotipo, ícone etc.) e não uma 'foto', o PNG geralmente é melhor. JPG é melhor para fotografias (ou imagens foto-realistas).
usar o seguinte comando

Respostas:


40

Seu SVG contém um gráfico de pixels incorporado para a sombra no canto inferior direito do controlador. Isso é responsável por cerca de ⅔ do tamanho do arquivo. Se você removê-lo, seu arquivo SVG é parecido com o seu JPEG. Provavelmente, é possível obter um efeito adequadamente semelhante com um gradiente.

Outras técnicas para reduzir o tamanho do arquivo SVG incluem:

  • Remova todos os metadados e similares. O Inkscape tem Salvar como SVG simples para isso. Suponho que outros programas tenham algo semelhante.
  • Remova os nós que adicionam pouco às formas, por exemplo, existem nós espúrios na forma do seu controlador.

Isso me faz pensar que talvez as camadas no original estejam causando o tamanho grande?

A menos que você esteja usando muitas camadas absurdamente (pense em uma camada para cada objeto), as camadas não devem dar uma contribuição relevante ao tamanho do arquivo e, mesmo assim, seria apenas uma fração.

A imagem com a qual estou trabalhando é muito complexa para ser adequada ao SVG?

Se você puder criar razoavelmente uma imagem do zero¹, ela não deve ser muito complexa para o formato SVG. Não existe um limite de complexidade mágica além do qual os tamanhos dos arquivos explodem (provavelmente isso vale para qualquer formato vagamente razoável). Obviamente, se você escolher apenas a resolução suficientemente grossa, poderá exportar todos os SVG para um JPEG com tamanho de arquivo menor. Mas isso não significa necessariamente que você não deve usar SVGs.


¹ Isso é especialmente sem rastreamento e similar. Para dar um exemplo extremo: se você deseja reproduzir exatamente todos os pixels de uma fotografia com primitivas SVG (ou seja, sem incorporar gráficos de pixels em SVG), considere o resultado muito complexo para ser representado com eficiência no formato SVG . Mas espero que seja senso comum.


80

Como o Wrzlprmft já apontou, mais de 50% do tamanho do seu arquivo SVG é ocupado por uma imagem de bitmap PNG incorporada usada para criar um efeito de sombreamento bastante sutil no controlador. Apenas se livrar dessa imagem e substituí-la por um simples gradiente radial é suficiente para reduzir o SVG para cerca de 10kb.

        Original         Com gradiente radial simples
Imagem original com sombreamento de bitmap sofisticado à esquerda, versão editada com gradiente radial simples à direita.

Enquanto você está nisso, você também deve verificar seus caminhos para ver se há algo para simplificar lá. Não encontrei muita coisa, mas o contorno do seu controlador possui alguns nós adjacentes (próximo ao meio superior e inferior) que podem ser mesclados sem fazer nenhuma diferença visível.

Essa é uma economia fácil de 50%, mas não vamos parar ainda. Se você conhece um pouco do formato SVG , pode fazer muito melhor que isso.

Primeiro, execute "Vacuum Defs" no Inkscape para se livrar de definições inúteis e salve a imagem como "SVG simples". Agora, é hora de abri-lo em um editor de texto e ver do que podemos nos livrar. Idealmente, você deve usar um editor com uma visualização integrada do SVG, para poder ver rapidamente que efeito (espero que nenhum) suas edições tenham na aparência da imagem. Eu uso o emacs para isso, mas existem outros editores com recursos semelhantes por aí.

De qualquer forma, com o arquivo SVG aberto no seu editor de texto, vamos começar a simplificá-lo!

  • Bem no topo, há um grande inútil <!-- comment -->. Apenas apague.

  • Se você estiver editando um SVG diretamente do Illustrator, também há uma <!DOCTYPE ... >linha inútil . Exclua-o também.

  • O Inkscape insiste em inserir um bloco inútil de metadados RDF na sua imagem. Basta localizar a <metadata ...>tag e excluí-la, juntamente com tudo, inclusive o fechamento </metadata>.

  • Além disso, mesmo se você salvar o arquivo como "SVG simples", o Inkscape ainda o ilumina com vários atributos personalizados. Encontre todos os atributos que começam com inkscape:ou sodipodi:e exclua-os.

  • Com os metadados e os atributos específicos do Inkscape, você pode remover todos os atributos de espaço para nome XML não utilizados da <svg>marca. Deve ser seguro para remover pelo menos xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapee xmlns:sodipodi. Se houver um xmlns:svgatributo redundante , remova-o também. Os únicos atributos de namespace que você deve ter neste momento são:

    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  • A <svg>tag também possui vários outros atributos inúteis que você pode remover com segurança, como enable-backgrounde xml:space="preserve". (Aqueles são inseridos pelo exportador Illustrator SVG, e Inkscape não é inteligente o suficiente para perceber que eles são inúteis.) O viewBoxatributo também pode ser removido com segurança a partir desta imagem, uma vez que apenas repete os valores das x, y, widthe heightatributos.

  • Você também pode remover com segurança os atributos encodinge standaloneda <?xml ... ?>marca.

  • Agora vamos ao que interessa os dados da imagem. Por alguma razão, o Inkscape insiste em atribuir idatributos a todos os elementos, mesmo que nunca sejam referenciados. Qualquer idatributo cujo valor nunca seja repetido em outra parte do arquivo (procure-o!) É seguro para remover. Basicamente, os únicos IDs que você precisa manter são os dos gradientes e possivelmente de outros objetos (por exemplo, caminhos) encontrados nas <defs>seções.

  • Além disso, o Inkscape gosta de gerar IDs longos, como linearGradient4277. Considere abreviar qualquer ID que não possa ser excluído em algo curto, como em lg1vez disso.

  • Também há várias <defs>seções logo após a outra. A mesclagem deles economiza alguns bytes (e simplifica a estrutura do documento em geral).

  • Existem também vários grupos vazios ( <g>elementos) no final do arquivo. Apenas se livre deles. Também pode haver vários grupos consecutivos com exatamente o mesmo transformatributo (ou nenhum); também é seguro mesclar esses.

  • Por algum motivo estranho, o Inkscape salva um caminho redundante de Bezier ( datributo) para <circle>elementos. Isso ocupa espaço sem absolutamente nenhuma razão, então exclua-os. (Deixe os datributos nos <path>elementos be; esses são realmente usados ​​para algo.)

  • O Inkscape também gosta de usar CSS em styleatributos em que atributos mais específicos seriam mais curtos, por exemplo, reescrevendo fill="#4888fa"para os mais detalhados style="fill:#4888fa". Você pode salvar alguns bytes dividindo esses estilos em atributos individuais (e removendo os que apenas repetem inutilmente a configuração padrão), mas que exigem um pouco mais de familiaridade com o formato SVG do que a maioria das alterações acima.

  • Além disso, se houver algum <use ... >elemento, você poderá salvar alguns bytes substituindo-os pelo elemento real ao qual estão vinculando. (Obviamente, isso só economiza espaço se os elementos vinculados forem usados ​​apenas uma vez.) Parece também que o Inkscape gosta de definir gradientes circulares indiretamente, primeiro definindo as paradas em a <linearGradient>e depois referenciando-as em a <radialGradient>; você pode simplificar isso movendo as paradas diretamente para dentro do gradiente radial e se livrando do gradiente linear agora não utilizado. Como bônus, se, ao fazer isso, você se livrar de todos os xlink:hrefatributos, poderá excluir o xmlns:xlinkatributo da <svg>tag.

  • Se você realmente deseja extrair cada último byte extra, procure valores numéricos com decimais demais e arredonde-os para algo mais sensato. É aqui que a visualização ao vivo realmente ajuda, pois permite ver quanto você pode arredondar o valor antes que ele comece a ficar visível. Mesmo que você não queira testar cuidadosamente cada número para ver quanto ele pode ser arredondado, no entanto, é possível escolher pelo menos frutas penduradas como, por exemplo, arredondar um valor de 1.0000859pixels para apenas 1.

  • Por fim, limpe o recuo e os espaços em branco no arquivo. Para minimizar absolutamente a contagem de bytes, você precisa colocar tudo em uma linha (ou pelo menos, colocar apenas quebras de linha na frente de atributos, onde é necessário espaço em branco de qualquer maneira), mas isso é realmente difícil de ler. Ainda assim, é possível encontrar um equilíbrio decente entre legibilidade e compacidade com algum recorte simples e conservador.

De qualquer forma, aqui está o que eu consegui editar manualmente sua imagem 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>

Esta imagem SVG parece quase indistinguível da segunda imagem de exemplo acima e ocupa apenas 5189 bytes, consideravelmente menos que a sua imagem JPEG. Tenho certeza de que poderia ser otimizado ainda mais, mas este é realmente apenas um exemplo do que você pode fazer em alguns minutos com a prática. (Demorei muito mais para digitar essa resposta do que realmente editar o código SVG.)

Finalmente, compactar esse código SVG com gzip reduz para apenas 1846 bytes (!), Pouco mais de um quarto do tamanho da sua versão JPEG.


4
Bem jogado .
Wrzlprmft

7
se livrar de quebras de linha e você economizar mais 50 bytes :)
Yorik

15
Eu tive que ingressar neste site apenas para votar nesta resposta incrível! Bem feito!
Karl-Johan Sjögren

Ei, Ilmari, gostaria de saber se você pode conferir o aplicativo da web que vinculei em uma resposta e confirmar se ele faz tudo o que você faria manualmente? Eu o executei em um SVG grande com reduções incríveis, mas quando eu também executei esse SVG em outro serviço anteriormente, pude economizar 2kb adicionais. Quando inspeciono o código SVG, ainda vejo alguns metadados com links para a Adobe e não faço ideia se é necessário. Sua sabedoria em SVG é muito apreciada.
Dom

30

Estou um pouco surpreso que ninguém tenha mencionado a extensão " Scour ". Ele vem com o Inkscape (a partir da v0.47) e faz muitas das otimizações mencionadas por Ilmari Karonen.


14
+1 Isso é incrível! Honestamente, eu nem sabia que essa ferramenta existia. Com as opções corretas, a versão da linha de comando bate até meu código otimizado à mão em quase 200 bytes, e executá-lo no código otimizado à mão reduz para apenas 4571 bytes (!).
Ilmari Karonen 9/04/2015

5

Você pode convertê-lo em um SVG compactado (SVGZ) e colocar o image.svgz em sua página da web:

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

Ou, no Adobe Illustrator, basta salvar como "SVG compactado", que gravará um arquivo image.svgz.

Para sua imagem de teste, ela ainda é maior que o JPG:

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

6
SVGs compactados não funcionam na maioria, senão em todos os IE recentes, infelizmente. A ideia é útil, mas o IE a torna muito menos viável. +1 de qualquer maneira, porque não é sua culpa IE $ ucks. :)
Dom

5
@ Dom, a experiência com o IE e PNG sugere 3-5 décadas, não anos.
Glenn Randers-Pehrson

3
Bashing IE nunca deixa de me divertir! :) É muito legal podermos atrair alguém do seu nível de experiência para a GDSE. Espero que você goste daqui e se ninguém disse isso ainda, seja bem-vindo!
Dom

2
Para testar no IE, você pode usar as VMs de modern.ie/en-us
Scott Carlson

4
Se você o estiver veiculando em um site, isso oferecerá benefícios insignificantes para os clientes que solicitam compactação HTTP (que normalmente usa o gzip de qualquer maneira).
Bob

3

Encontrei recentemente uma ferramenta em https://petercollingridge.appspot.com/svg-editor ( código fonte ) que ajuda a otimizar arquivos SVG. Ele tem bons resultados nesse caso, diminuindo o tamanho do arquivo para 3.7kB, que é pouco mais da metade do tamanho do JPG, com um pequeno ajuste manual:

O uso dessa ferramenta para otimizar arquivos SVG requer muito menos tempo do que jogar o arquivo manualmente.


Bem-vindo ao Design Gráfico SE. Observe que o autor da pergunta mencionou essa mesma ferramenta na pergunta. Não que isso invalide esta resposta, mas você pode colocá-la em perspectiva. Além disso, o que você quer dizer com ajuste manual?
Wrzlprmft

Essa não é a mesma ferramenta mencionada na pergunta, mas é feita pelo mesmo autor e está localizada no mesmo domínio. O link do autor tem um link para essa ferramenta, mas eu não o notei até publicar minha resposta; Não o apaguei, pois ainda é útil. Por ajuste manual , quero dizer que desmarquei várias caixas (combinar caminhos, remover IDs) para corrigir a saída e diminuir as casas decimais para melhorar ainda mais o tamanho.
user60561

Assim como no SVGOMG (da resposta do Dom), aqui também as maiores economias parecem advir da desativação do xlink, que, como efeito colateral, exclui completamente a imagem incorporada. Obviamente, substituir a imagem por um gradiente não é algo que você possa esperar que uma ferramenta automatizada faça.
Ilmari Karonen

3

SVGOMG!é um aplicativo Web impressionante para otimização SVG

De acordo com o criador do aplicativo, SVGOMG é SVGO " 's M Issing G UI".

Executá-lo na imagem fornecida reduz a apenas 3.42kbe logo 1.4kbapós ser compactado.

Captura de tela SVGOMG


11
Observando a visualização renderizada, parece que a maior parte da economia vem do fato de excluir completamente a imagem incorporada. Obviamente, substituir o bitmap por um gradiente não é algo que se pode esperar que uma ferramenta de software faça automaticamente.
Ilmari Karonen

11
Não tenho a versão não otimizada com apenas o gradiente corrigido, mas se eu editar manualmente o SVG original para substituir o bitmap pelo último <radialGradient>e <path>do meu código otimizado para mão, o SVGOMG otimiza a imagem resultante de 5,8 kB até 4,02 kB (4,11 kB prettificados) e parece fazer um trabalho bastante completo; Realmente não vejo oportunidades perdidas óbvias. (Jogar com ele um pouco mais, eu notei que às vezes não consegue fundir grupos consecutivos com attrs idênticos; Inkscape, por vezes, parece gerar aqueles, por exemplo, ao ajustar a página para caber o desenho.)
Ilmari Karonen

@IlmariKaronen, obrigado por dar uma olhada, executá-lo no SVG original de 22kb no Dropbox reduz para 3,42kb em disco para mim, alguma idéia de por que o meu é menor? (Eu habilitei todas as opções). Este aplicativo pode ser a melhor opção (mais fácil / mais rápida) para a maioria dos casos. Não tenho afiliação com o aplicativo, é simplesmente incrível!
Dom

11
Observe atentamente o controlador: se você selecionar "Remover imagens raster" ao otimizar o SVG original, o sombreamento no controlador desaparecerá completamente (porque na verdade é um PNG semitransparente incorporado). Você pode realmente vê-lo se comparar a captura de tela na sua resposta ao JPEG original. A versão de 4,02 kB que obtive é maior porque inclui um caminho extra e um gradiente para substituir o sombreamento removido.
Ilmari Karonen

@IlmariKaronen Acho que vejo a diferença , é tão leve que não tenho certeza se meus olhos estão pregando peças. É um bom ponto, eu só trabalhei com cores sólidas nos SVGs até agora, então vou ter isso em mente no futuro, obrigado.
Dom
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.