SVG em linha versus img e object
Escolha o método correto de incorporação de SVG para seu caso de uso.
SVG em linha versus img e object é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Três formas de incorporar SVG
SVG (Gráficos vetoriais escaláveis) pode ser incorporado de três formas:
<img src="icon.svg">— simples, armazenado em cache, sem acesso a JS/CSS<object data="chart.svg">— interação incorporada, documento separado- SVG incorporado diretamente no HTML — acesso completo a CSS/JS, sem solicitação adicional
SVG com img src
O método mais simples: referencie SVG como uma imagem:
<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
cannot use SVG filters or animations from CSS -->SVG como imagem de fundo do CSS
Use SVG como imagem de fundo do CSS para ícones decorativos:
.icon-check {
background-image: url('/icons/check.svg');
background-size: contain;
background-repeat: no-repeat;
width: 1rem;
height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->SVG no elemento object
Incorpore SVG com <object> para obter um SVG interativo:
<object
type="image/svg+xml"
data="interactive-chart.svg"
width="800"
height="400"
aria-label="Interactive revenue chart"
>
<!-- Fallback: -->
<img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
SVG document is somewhat isolated from parent page -->SVG incorporado
Incorpore SVG diretamente no HTML para ter controle total:
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
aria-hidden="true"
focusable="false"
>
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
</svg>Vantagens do SVG incorporado
Por que usar SVG incorporado:
- Estilização completa com CSS:
fill,stroke, transições e animações - Interação com JavaScript: selecione elementos SVG e escute eventos
- currentColor: herda a cor do CSS do elemento pai
- Nenhuma solicitação adicional
- Pode fazer parte da árvore de acessibilidade com role e title
Desvantagens do SVG incorporado
Desvantagens do SVG incorporado:
- O arquivo HTML fica maior
- Não é armazenado separadamente pelo navegador
- Não é fácil reutilizar o mesmo SVG em várias páginas sem duplicação
- Repetição de código para ícones repetidos
Elemento use para um conjunto de ícones
Defina os ícones SVG uma vez e faça referência a eles com <use>:
<!-- Icon sprite (often hidden): -->
<svg style="display:none">
<symbol id="icon-close" viewBox="0 0 24 24">
<path d="M18 6L6 18M6 6l12 12"/>
</symbol>
<symbol id="icon-check" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"/>
</symbol>
</svg>
<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>SVG acessível
Torne os SVG incorporados acessíveis:
<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
<title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
<!-- chart paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
<!-- decorative paths -->
</svg>
<!-- focusable="false" needed for IE to prevent tab focus -->Truque do currentColor
Use currentColor para herdar a cor do texto do CSS:
<button class="btn btn-primary">
<svg aria-hidden="true" width="16" height="16">
<path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
</svg>
Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
When button is hovered/focused, icon color changes too
No need for separate icon color rules -->Verificação rápida
Qual é a principal vantagem do SVG incorporado em relação ao uso de um SVG com img src?
Revisão: incorporação de SVG
Essenciais da incorporação de SVG:
<img src>— simples; sem acesso a CSS/JS; armazenado em cache- Imagem de fundo do CSS — somente decorativa
<object data>— SVG interativo; parcialmente isolado- SVG incorporado — controle total de CSS/JS; sem solicitação adicional
- Conjunto de símbolos SVG com
<symbol>+<use>— reutilização eficiente
Perguntas Frequentes
A aula “SVG em linha versus img e object” é grátis?
Sim — o texto completo de “SVG em linha versus img e object” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “SVG em linha versus img e object”?
Escolha o método correto de incorporação de SVG para seu caso de uso. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “SVG em linha versus img e object”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- SVG em linha versus img e object
- Formas básicas de SVG: rect circle path
- viewBox do SVG e dimensionamento responsivo
- Animando SVG com CSS e SMIL