Ícones SVG

O ícone SVG é uma imagem SVG, usada como ícone ou botão de imagem em aplicações web ou móveis. Os ícones SVG também podem ser usados para logotipos. Este tutorial de ícone SVG explica como criar seus próprios ícones SVG e onde baixar ícones SVG pré-fabricados de alta qualidade.

Vantagens dos ícones SVG

Os benefícios de usar ícones SVG é que é fácil ampliar e diminuir os ícones, dependendo da posição em que serão exibidos no aplicativo e do tamanho da tela do aplicativo. Os ícones SVG têm vantagens sobre as imagens bitmap, pois, ao ampliar ou diminuir, ainda parecem boas. As imagens bitmap tendem a pixelar ao ampliar e a perder qualidade (pixel) ao diminuir.

Usar ícones SVG em Aplicações Web

Como mencionado ao exibir SVG no navegador da Web, há várias maneiras deNo navegador da WebNo meio da página HTML, como parte de uma página HTML. No entanto, o uso do elemento img da HTML para exibir o ícone é o mais fácil, o elemento img da HTML pode facilmente ampliar ou diminuir o tamanho do ícone SVG.

Este é o elemento de exemplo que exibe o ícone SVG:

<img src="svg-icon.svg">

Para ampliar ou diminuir o tamanho do ícone SVG, use apenas os atributos de estilo CSS width ou height. Abaixo está um exemplo do elemento img com a propriedade Height CSS adicionada:

<img src="svg-icon.svg" style="height:32px">

Para manter a proporção do SVG ao ampliá-lo ou diminuí-lo, deve-se definir apenas um dos width ou height - E não pode definir os dois valores ao mesmo tempo. Quando apenas um dos atributos de largura é definido, o navegador ajustará a escala do ícone SVG na outra dimensão para que o ícone SVG mantenha sua proporção.

Criar seu próprio ícone SVG

Às vezes, você pode precisar criar seu próprio ícone SVG. Um ícone SVG é apenas uma imagem SVG contida em seu próprio arquivo SVG. Abaixo está um ícone circular muito simples, composto pelo elemento SVG circle:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink="
　　　　<circle cx="64"cy="64"r="64"style="fill: #00ccff;"></circle>
</svg>

Aqui está a aparência do ícone SVG exibido ao lado do elemento img:

Mas, quando você usa o elemento img para exibir este ícone SVG e ajusta o tamanho do elemento img, o ícone SVG não se expande ou diminui. Em vez disso, mostrará mais ou menos do canvas SVG. Abaixo está a configuração da propriedade Height CSS do elemento img:32Exemplo:

Atenção, como apenas exibir uma parte do círculo em vez de redimensionar todo o círculo proporcionalmente.

A causa deste problema é que o arquivo de imagem SVG falta algumas informações. Você deve definir um valor para a propriedade viewBox do SVG. A propriedade viewBox do SVG especifica quantas partes do canvas SVG devem ser exibidas (em X e Y).

Em nosso exemplo, queremos apenas exibir a parte do canvas SVG que contém o ícone em círculo. A área se estende do ponto 0,0 até o ponto128,)128（o raio do círculo é64，usando64，64Como ponto central). Utilizando a propriedade Viewbox do SVG, podemos especificar apenas esta área do canvas do SVG para renderização. A seguir está a aparência do ícone circular SVG com valor de Viewbox configurado:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0　128　128">
　　　　<circle cx="64"cy="64"r="64"style="fill: #00ccff;"></circle>
</svg>

Este é o ícone SVG exibido, com alturas respectivas de32、48e64Pixels: