Primeiro, você precisa entender como as imagens funcionam. Formatos comuns de imagem como PNG e JPG são classificados como formatos raster. Isso essencialmente significa que eles são baseados em pixels, com os dados rastreando o valor da cor em cada pixel. Uma grande desvantagem das imagens baseadas em raster é que elas não aumentam de escala bem. Se você já tentou aumentar o tamanho de um PNG, pode ter percebido que ele fica pixelado ou borrado. Um SVG é um tipo diferente de imagem. SVG significa um gráfico vetorial escalável. Um gráfico vetorial rastreia dados com base em caminhos e equações para traçar pontos, linhas e curvas. O que isso realmente significa é que um gráfico vetorial, como um SVG, pode ser escalado para qualquer tamanho sem impactar a qualidade. SVGs especificamente têm o benefício adicional de armazenar dados em XML. Isso significa que você pode usá-los diretamente no seu código como HTML bruto com o elemento svg. Isso também significa que você pode alterar programaticamente a cor da imagem. Para mudar o rosto sorridente para vermelho, ative o editor interativo e altere o fill="yellow" para fill="red".

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="yellow" />
  <circle cx="35" cy="40" r="5" fill="black" />
  <circle cx="65" cy="40" r="5" fill="black" />
  <path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="transparent" />
</svg>

Aqui estão os elementos básicos para o exemplo:

• O elemento svg é o contêiner para todo o desenho. Ele configura o espaço onde todas as formas aparecem. Tudo o que você quiser desenhar com SVG, como círculos, linhas ou caminhos, vai dentro do elemento svg.
• O elemento circle é usado para fazer o rosto e os olhos. Um círculo grande forma o rosto amarelo e dois círculos menores fazem os olhos.
• O elemento path é usado para desenhar o sorriso. Ele cria uma linha curva para a boca.
• Cada elemento SVG possui atributos que controlam sua aparência e posição dentro da área de desenho.

Aqui estão mais alguns exemplos. Para alterar a cor de qualquer um dos exemplos, atualize o valor do atributo fill para qualquer cor nomeada como red, green, blue, yellow etc.

<!-- Star Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L14.9 8.6L22 9.3L17 14.1L18.3 21.2L12 17.8L5.7 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z"/>
</svg>

<!-- Heart Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="crimson" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 6 4 4 6.5 4C8 4 9.5 4.8 10.5 6.09C11.5 4.8 13 4 14.5 4C17 4 19 6 19 8.5C19 12.28 15.6 15.36 10.45 20.04L12 21.35Z"/>
</svg>

<!-- Checkmark Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="green" xmlns="http://www.w3.org/2000/svg">
  <path d="M20.29 5.71L9 17L3.71 11.71L5.12 10.29L9 14.17L18.88 4.29L20.29 5.71Z"/>
</svg>

Então, quando você gostaria de usar um SVG? Um ótimo caso de uso é para ícones. Se você quiser criar marcadores personalizados ou adicionar ícones aos seus links para representar plataformas de mídia social, usar SVGs é a melhor abordagem. Uma das bibliotecas de ícones mais populares, Font Awesome, usa imagens SVG para seus ícones. SVGs também são ótimos para logos de páginas da web, porque eles escalam perfeitamente. Eles permitem que você adapte seu layout a qualquer design responsivo que você precisar. Na próxima vez que você tiver um SVG localmente, tente abri-lo com um editor de texto e brincar com o código.