SVG inline ou img: escolha o comportamento da arte

Use um SVG em um elemento <img> quando quiser exibir um gráfico finalizado. Coloque o SVG inline quando a página precisar alterar formas individuais com CSS ou JavaScript. As duas abordagens podem exibir a mesma arte vetorial em tamanhos diferentes; colocá-la inline não melhora sua geometria.

Essa distinção importa quando um logo parece correto em uma aba do navegador, mas ignora a regra de cor do seu site. O arquivo pode estar correto. A regra pode simplesmente não ter acesso a ele. Abaixo, a mesma ilustração de montanhas aparece nas duas formas para você conferir a diferença antes de alterar seu fluxo de recursos.

Escolha o comportamento de que você precisa

Um SVG externo continua sendo um arquivo vetorial quando exibido por <img>. O limite fica entre a página e os elementos internos do arquivo. O CSS da página pode redimensionar, girar ou alterar a opacidade do elemento de imagem, mas um seletor como .logo path não alcança traçados dentro do recurso em seu src. Formas inline se tornam parte da árvore de documento da página. O guia de incorporação SVG da MDN descreve essas duas abordagens.

Se você ainda está conferindo o conteúdo do arquivo, comece por o que é um arquivo SVG. A extensão .svg, sozinha, não significa que todos os detalhes visíveis são traçados. Para uma entrega de loja virtual, siga o guia de ícones SVG personalizados no Shopify depois de verificar o conteúdo do arquivo.

Teste a mesma arte nas duas formas

Para esta demonstração, fizemos manualmente dois traçados de montanhas e um círculo de sol. Carregamos essa arte de um arquivo separado e colamos as mesmas formas no HTML. É um teste de incorporação, não um resultado de conversão do PerfectVector.

No nosso teste no Chromium, as duas versões inicialmente ocupavam 360 × 240 pixels CSS e mostravam um sol âmbar. Depois, ativamos uma regra de página que selecionava .sun. O sol inline ficou coral; o sol da imagem externa continuou âmbar. Reduzir as duas caixas para 180 × 120 alterou seus tamanhos de exibição sem mudar essa diferença.

1. Salve o arquivo SVG separado

Crie artwork.svg com este código-fonte completo. O viewBox define o espaço de coordenadas do desenho. A largura e a altura fornecem dimensões iniciais explícitas.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Adicione a imagem e a cópia inline

Salve o seguinte como index.html ao lado de artwork.svg e abra-o em um navegador. Os dois gráficos têm a mesma geometria e os mesmos atributos de pintura. A versão inline também tem um nome para tecnologias assistivas.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

A captura de tela usa um layout de comparação estilizado ao redor dessas mesmas formas. O exemplo menor acima mantém o comportamento fácil de reproduzir.

3. Altere uma variável por vez

Remova class="theme" do body e recarregue. Os dois sóis agora devem ficar âmbar. Restaure a classe, e somente o sol inline deve ficar coral. Altere .artwork de width: 360px para width: 180px; havendo espaço no contêiner, os dois gráficos devem diminuir para 180 × 120.

Se você quer que o sol da imagem externa mude permanentemente, edite seu fill em artwork.svg. Se quer que ele responda ao estado da página, escolha marcação inline ou outro método deliberado de entrega. Nosso guia de alteração de cores SVG aborda a edição do próprio arquivo.

O nome .sun foi adicionado para este exemplo. Um arquivo convertido ou exportado não terá necessariamente uma classe útil para cada parte significativa. Inspecione e nomeie as formas que você pretende controlar, em vez de supor que um objeto visível é um único traçado selecionável.

Mantenha o dimensionamento e os nomes acessíveis explícitos

Preserve o viewBox ao mover a arte para HTML. Defina atributos de largura e altura como uma base adequada e aplique CSS responsivo. Para esta ilustração 3:2, width: 180px; height: auto preserva suas proporções. Uma grande margem vazia dentro do viewBox continua fazendo parte da área de desenho nos dois métodos; mudar a incorporação não a remove.

Quando a caixa de layout tem outra proporção, o guia de ajuste com preserveAspectRatio compara ajuste da arte inteira, recorte e distorção.

Para uma imagem externa significativa, escreva alt no <img> HTML. Para uma imagem inline significativa, o exemplo usa role="img" e aria-labelledby apontando para seu <title>. SVG inline não usa o atributo alt da imagem HTML. Essas opções de nome são documentadas no guia de SVG em HTML da MDN.

Se repetir o exemplo inline, dê a cada ID de título um valor único e atualize seu aria-labelledby correspondente. A mesma disciplina se aplica a IDs usados por gradientes, máscaras ou traçados de recorte. Para arte decorativa ao lado de texto visível equivalente, use um alt vazio em <img> ou esconda o SVG inline das tecnologias assistivas com aria-hidden="true". Teste o link ou botão completo em contexto para que seu propósito continue nomeado.

Para muitos ícones reutilizáveis, um sprite de símbolos SVG introduz uma abordagem separada de definição e instância. Decida se você precisa dessa reutilização antes de colar um grande conjunto de cópias em cada página.

Trate o desempenho como uma medição

A marcação inline coloca as formas no documento, em vez de buscar essa arte como um recurso de imagem separado. Ela também aumenta a marcação do documento. Um arquivo externo pode ser reutilizado do cache do navegador, conforme sua URL, cabeçalhos de resposta e estado do cache. O guia de cache HTTP da MDN explica essas condições.

Nenhum desses fatos demonstra qual versão deixará sua página mais rápida. Compare a página real em uma visita inicial e em uma repetida, com sua quantidade real de cópias e a complexidade real dos SVGs. A demonstração aqui testa acesso à pintura e dimensionamento; não é um teste de velocidade de carregamento.

O modo de imagem externa também tem restrições além do CSS. A MDN documenta que SVG usado como imagem desativa JavaScript e restringe recursos externos. Não mova um SVG desconhecido para inline apenas para fazer funcionar um recurso ausente. Revise e sanitize marcação não confiável antes de incorporá-la a uma página.

Quando sua arte inicial é somente um PNG

A vetorização vem antes dessa escolha de incorporação se a imagem original não tem as formas de que você precisa. Para um logo ou uma ilustração raster adequada, converta o PNG para SVG com o PerfectVector, inspecione o resultado em relação à imagem original e mantenha o SVG aceito como mestre da arte. Confira a silhueta, os vazados e as pequenas regiões de cor antes de adicionar classes ou preparar uma cópia para web.

O PerfectVector fornece a arte vetorial. Você ainda escolhe quais partes devem responder ao CSS, adiciona nomes significativos e testa a página final. Converter uma imagem não produz automaticamente um componente com nomes semânticos de classes. Se um SVG existente já contém traçados utilizáveis, trabalhe com eles, em vez de vetorizar uma cópia renderizada.

Confira também se há um SVG contendo uma imagem raster incorporada. Colar esse arquivo inline expõe seu elemento <image>; não transforma os pixels dentro dele em formas recoloríveis separadamente. Para uma fotografia que deve continuar fotográfica, mantenha um formato raster de entrega adequado.

Confira a página final

• Confirme que a arte independente parece correta antes de testar o CSS da página.
• Escolha <img> para exibição finalizada, ou SVG inline para controle direto de seus elementos.
• Verifique o tamanho renderizado e as proporções no layout mais estreito compatível.
• Teste a forma exata que você pretende recolorir; não dependa de uma regra ampla de path.
• Confira nomes de imagens, IDs duplicados e o link ou botão ao redor.
• Meça o comportamento de carregamento se isso afeta a decisão; não deduza um resultado de velocidade deste exemplo.

Perguntas frequentes

Um SVG vira bitmap quando uso uma tag img? Não. Um SVG carregado por img ainda pode renderizar geometria vetorial. O elemento de imagem impede que a página hospedeira selecione diretamente suas formas internas; ele não converte essas formas em PNG.

Por que currentColor não acompanha a cor do texto da minha página? Uma imagem SVG externa tem seu próprio contexto de estilo. A cor da página não se torna automaticamente o currentColor usado dentro desse arquivo. Use SVG inline quando sua pintura deve herdar da página e configure o preenchimento ou contorno relevante para usar currentColor.

Devo converter meu SVG existente antes de colocá-lo inline? Nenhuma conversão é necessária se ele já contém as formas vetoriais desejadas. Revise sua marcação, preserve as referências necessárias, adicione nomes adequados e teste-o na página. A conversão de raster para vetor só é relevante quando você precisa recuperar formas de uma imagem raster.

Fontes

1. MDN — inclusão de gráficos vetoriais em HTML — Comportamento de incorporação como imagem externa e inline.
2. MDN — introdução ao SVG em HTML — Marcação inline, viewBox e nomes acessíveis.
3. MDN — cache HTTP — A reutilização do cache depende da política de resposta e da identidade do recurso.
4. MDN — SVG como imagem — Restrições de scripts e recursos em contextos de imagem.

Escolha a incorporação que corresponde ao papel da arte e teste-a com os estilos reais da página. Se sua única imagem original é um PNG adequado, recupere primeiro suas formas vetoriais, inspecione o resultado e prepare a arte aceita para essa incorporação.