1. A Superpotência dos Gráficos Vetoriais na Web

Diferente de imagens rasterizadas em pixels (JPEG, PNG ou WebP), que sofrem perda de definição e ficam borradas quando ampliadas em monitores de alta densidade (Retina/4K), um gráfico vetorial é composto por coordenadas geométricas:

• Nitidez Infinita: Um ícone SVG mantém traços e cantos perfeitos em qualquer escala, desde um smartwatch de 1,5 polegada até uma tela publicitária de 80 polegadas.
• Leveza de Transferência: O código textual do SVG é extremamente compacto e altamente compressível via Gzip ou Brotli.
• Interatividade com o DOM: No modo inline, círculos, retângulos e caminhos tornam-se elementos filhos da página, permitindo animações com CSS puro, mudanças de cor no hover e eventos de clique.

2. Anatomia do Elemento <svg> e a Mágica do viewBox

Para que um SVG seja responsivo e se adeque a qualquer container, o atributo mais importante é o viewBox:

<svg viewBox="0 0 100 100" width="100" height="100" role="img" aria-labelledby="iconeTitulo">
    <title id="iconeTitulo">Estrela Dourada</title>
    <polygon points="50,5 64,36 98,38 72,60 80,94 50,75 20,94 28,60 2,38 36,36" 
             fill="#f59e0b" stroke="#d97706" stroke-width="2" />
</svg>

Decodificando os Quatro Números do viewBox:

A sintaxe viewBox="min-x min-y largura altura" define o sistema de coordenadas virtuais interno do gráfico:

1. min-x e min-y: A coordenada de origem (geralmente 0 0).
2. largura e altura: A proporção da prancheta virtual interna. Ao definir viewBox="0 0 100 100", você estabelece uma relação 1:1 (quadrada). Se você alterar a largura visual no CSS para width: 32px, o navegador recalcula automaticamente a escala sem distorcer o desenho.

3. Formas Primitivas Essenciais do SVG

O SVG dispõe de uma rica coleção de tags declarativas para compor ilustrações e layouts gráficos:

4. Estilização Dinâmica com CSS e currentColor

Ao utilizar SVG inline, você pode transferir a estilização do HTML para a folha de estilos CSS. A técnica mais produtiva da web moderna consiste em usar a palavra-chave currentColor no atributo fill ou stroke, fazendo o ícone herdar instantaneamente a cor do texto do elemento pai:

<!-- Botão com Ícone SVG Herdeiro de Cor -->
<button class="btn-download">
    <svg class="icon-svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 3v11m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2" 
              fill="none" 
              stroke="currentColor" 
              stroke-width="2" 
              stroke-linecap="round" 
              stroke-linejoin="round"/>
    </svg>
    <span>Baixar Relatório</span>
</button>

/* Estilo do Botão Moderno */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: #0f172a;
    color: #38bdf8; /* Cor que alimenta o currentColor do SVG */
    border: 1px solid #1e293b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}
 
.icon-svg {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}
 
/* No hover, tanto o texto quanto o ícone mudam de cor em harmonia */
.btn-download:hover {
    background-color: #38bdf8;
    color: #0f172a; /* Ícone e texto viram azul escuro automaticamente! */
}
 
.btn-download:hover .icon-svg {
    transform: translateY(2px); /* Micro-animação do ícone descendo */
}

5. Comparativo: SVG Inline vs HTML5 Canvas

Tanto o SVG quanto o Canvas lidam com gráficos 2D no HTML5, mas com finalidades arquiteturais distintas:

6. Ferramentas Relacionadas & Próximos Passos

Continue expandindo suas habilidades com as ferramentas da nossa plataforma:

• Hub Master de Imagens: Utilitários para conversão, otimização e processamento visual.
• Central do Desenvolvedor Web: Conversores de formato, minificadores e geradores de código.
• Lição 34: Canvas: Gráficos 2D no Navegador: Revise a renderização de pixels por script.
• Lição 36: Drag and Drop API: Descubra como arrastar e soltar elementos interativos na web.

7. Referências Técnicas & Especificações Oficiais

• W3C Scalable Vector Graphics (SVG) 2 Specification
• MDN Web Docs: Scalable Vector Graphics (SVG) Reference
• W3C Web Accessibility Initiative: Accessible Functional SVG Images

O post SVG Inline no HTML5: Guia de Vetores e Ícones | Web Academy apareceu primeiro em Web-Zoneware.