Todos nós conhecemos as vantagens dos gráficos vetoriais escaláveis. Os gráficos são definidos no formato xml, o que causa um tamanho de arquivo menor, enquanto a imagem pode ser redimensionada para qualquer tamanho sem degradação.
Mas se você usar muitos gráficos em uma página da web, o número de consultas http pode aumentar muito, o que também pode aumentar o tempo de carregamento da página. Com a técnica Inline SVG você pode colocar seus gráficos diretamente em seu código-fonte html, então não há necessidade de carregar nenhum arquivo externo.
Imagine carregar seu código html e todos os gráficos na mesma solicitação http. Sim, parece bom e é fácil como torta:
<!DOCTYPE html>
<html>
<head>
<title>My Inline SVG</title>
</head>
<body>
<svg version="1.1" >="http://www.w3.org/2000/svg" >="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px"
height="50px" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
<g>
<polygon fill="#212121" points="0,46.334 32.5,22.833 54.5,39.834 79.333,19.333 74,14.5 100,6.667 91.667,29.334 86.167,25
55.5,50 32.167,29.334"/>
</g>
<g>
<polygon fill="#3EE02B" points="36.975,7 39.042,25.959 50,34.078 47.935,7"/>
<polygon fill="#3EE02B" points="49,0 51.881,35.335 54.636,37.59 61.838,30.951 59.208,0"/>
<polygon fill="#3EE02B" points="61.939,12.05 63.305,29.861 73,21.933 73,12"/>
</g>
</svg>
</body>
</html>No meu exemplo acima, acabei de inserir um logotipo svg simples (gerado com Adobe Illustrator) no meu código html. Nenhuma tag img, ou quaisquer truques de fundo css necessários, apenas o código svg simples.
Espero que isso ajude você também a resolver alguns problemas de desempenho em aplicativos da web de carga pesada!