⚡ Curso de HTML • Web-ZoneWare

SVG Inline no HTML5: Guia de Vetores e Ícones | Web Academy

Lição 35 de 50

SVG Inline no HTML5: Guia de Vetores e Ícones | Web Academy

O SVG (Scalable Vector Graphics) é a linguagem padrão da web para descrição de gráficos bidimensionais baseados em vetores e fórmulas matemáticas. Uma das maiores conquistas da especificação HTML5 foi permitir a inserção de elementos <svg> diretamente no fluxo do código HTML (inline), eliminando a necessidade de tags obsoletas como <object> ou o isolamento de tags <img>. Isso concede aos desenvolvedores controle total sobre cada nó vetorial através de CSS e JavaScript.

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:

HTML5 5 linhas 
<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:

Elemento Atributos Principais Finalidade
<rect> x, y, width, height, rx, ry Desenha retângulos e cartões, com suporte a cantos arredondados via rx/ry.
<circle> cx, cy, r Cria círculos perfeitos informando o centro (cx, cy) e o raio (r).
<line> x1, y1, x2, y2 Traça segmentos de linha reta entre dois pontos cartesianos.
<polyline> / <polygon> points="x1,y1 x2,y2 ..." Constrói formas geométricas com múltiplos vértices (abertas ou fechadas).
<path> d="M... L... C... Z" O elemento mais poderoso do SVG: permite traçar curvas Bézier e silhuetas complexas.

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:

HTML5 12 linhas 
<!-- 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>
CSS3 29 linhas 
/* 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 */
}
🧪 Quer testar o SVG inline com transições CSS agora?

⚡ Abrir no Playground IDE →

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:

Critério SVG Inline (Modo Retido) HTML5 Canvas (Modo Imediato)
Tipo de Renderização Vetorial (fórmulas e coordenadas) Rasterizada (matriz de pixels)
Resolução / Escala Infinita (sempre ultra-nítido) Depende da resolução de buffer declarada
Integração com DOM Cada forma é um elemento HTML acessível Superfície única; o navegador não retém nós
Estilização & Eventos CSS nativo, hover, focus e JavaScript Requer cálculos manuais de coordenadas
Cenário Ideal Ícones, logotipos, infográficos e dashboards Jogos 2D, edição de fotos e milhares de partículas

💡 Dica Pro: Limpeza de Código SVG

Arquivos exportados de editores gráficos como Figma, Illustrator ou Inkscape costumam vir sobrecarregados de metadados inúteis, como comentários de autoria, namespaces XML desnecessários e IDs duplicados.

Antes de colar um SVG inline em suas páginas, utilize ferramentas de minificação e otimização de SVG para reduzir o peso do arquivo em até 70% e garantir uma renderização ultrarrápida.

6. Ferramentas Relacionadas & Próximos Passos

Continue expandindo suas habilidades com as ferramentas da nossa plataforma:

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


Rolar para cima