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:inkscape
e xmlns:sodipodi
. Se houver um xmlns:svg
atributo 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-background
e 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 viewBox
atributo também pode ser removido com segurança a partir desta imagem, uma vez que apenas repete os valores das x
, y
, width
e height
atributos.
Você também pode remover com segurança os atributos encoding
e standalone
da <?xml ... ?>
marca.
Agora vamos ao que interessa os dados da imagem. Por alguma razão, o Inkscape insiste em atribuir id
atributos a todos os elementos, mesmo que nunca sejam referenciados. Qualquer id
atributo 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 lg1
vez 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 transform
atributo (ou nenhum); também é seguro mesclar esses.
Por algum motivo estranho, o Inkscape salva um caminho redundante de Bezier ( d
atributo) para <circle>
elementos. Isso ocupa espaço sem absolutamente nenhuma razão, então exclua-os. (Deixe os d
atributos nos <path>
elementos be; esses são realmente usados para algo.)
O Inkscape também gosta de usar CSS em style
atributos 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:href
atributos, poderá excluir o xmlns:xlink
atributo 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.0000859
pixels 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.