Nesse tutorial, mostrarei uma implementação básica de alguns ícones em SVG, como prover uma versão alternativa e como torná-los em um sprite SVG.

Implementação Básica em SVG

Para esse tutorial, usarei uma página única, que agirá parecido com um cartão de visitas/negócios. Ele apresentará minha pessoa e mostrará três perfis de rede sociais relevante ao meu trabalho.
















Da captura de tela acima, você pode ver que estou usando ícones (para Twitter, Dribbble e GitHub) para referenciar simbolicamente meus perfis nessas redes sociais. Baixei os ícones da flaticon, que possui uma grande variedade de ícones & símbolos, tanto em formato vetor quanto rasterizado. 

PNG e SVG

Começaremos usando as versões PNG desses ícones, pelo fato da retro compatibilidade, e depois prepararemos as versões em SVG para usar nos navegadores que dão suporte à tecnologia.
Usei o Sketch para gerar as versões PNG dos meus ícones, então usarei ele novamente para preparar os ícones para uso no SVG.














Se prestar atenção na captura de tela acima, perceberá que nomeei, apropriadamente, todos os grupos e formas no painel do lado esquerdo (O Adobe Illustrator tem uma visão parecida no painel de Camadas). É importante nomear todos os seus recursos corretamente, uma vez que, além de ajudar a manter a organização, também ajudará na hora que formos usá-los num passo mais a frente, nesse tutorial. 

Exportando os SVGs

Agora, exportarei os ícones como SVGs, que é bem simples, usando a ferramenta de recorte (slicing tool) no Sketch. Exportarei como arquivos separados e os colocarei dentro do diretório de imagens do meu projeto.
Normalmente, para mostrar uma imagem em seu site, você a referenciaria através do atributo src de um elemento ou algo similar: 
​

Entretanto, com SVG, há inúmeras formas de usá-lo dentro de um documento HTML. Por exemplo, podemos usar o código SVG diretamente na página - eis como o código se parece:

twitter-icon	Created with Sketch.