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

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:

  

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?

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.}

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.

               
^{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.

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.

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

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.

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.