Como saber se um SVG contém uma imagem raster

Sim, um SVG pode conter uma imagem raster. Ele pode reunir traçados vetoriais e pixels no mesmo documento ou ser pouco mais que um contêiner para um PNG ou JPEG. A extensão .svg informa o formato do contêiner, não se cada parte visível é vetorial.

A verificação confiável é examinar tanto os objetos quanto o código do arquivo. O zoom ajuda a perceber um problema, mas não mostra se um aplicativo está rasterizando a prévia ou se os pixels estão realmente armazenados no SVG.

Para um aplicativo WPF, o guia de representação de SVG no WPF separa o código SVG dos objetos de desenho nativos e da entrega em bitmap. Confira o que o aplicativo recebe antes de tratar uma exibição rasterizada como evidência sobre o arquivo original.

O que um SVG pode conter

SVG é um formato gráfico baseado em XML, e seu modelo de conteúdo vai além dos traçados. A especificação de conteúdo incorporado do SVG 2 define um elemento <image> que posiciona um arquivo completo referenciado dentro de um retângulo. Esse arquivo pode ser um PNG, JPEG ou outro SVG.

Isso cria quatro estruturas comuns:

Conteúdo misto não é automaticamente errado. Um mapa pode usar traçados para rótulos e limites e manter uma camada de satélite sombreada em raster. Uma imagem de produto pode colocar um selo editável sobre uma fotografia. O problema começa quando você esperava que a conversão produzisse traçados editáveis e recebeu pixels em outro contêiner.

Verificação 1: examine os objetos

Abra o SVG no Illustrator, Inkscape, Affinity Designer ou outro editor com painel Objects ou Layers. Selecione a área que você suspeita ser raster.

• Um único objeto retangular identificado como imagem é uma evidência forte de conteúdo de imagem.
• Nós visíveis nas bordas reais da arte indicam geometria vetorial.
• Um caminho de recorte pode esconder uma imagem retangular, então expanda a árvore de camadas ou objetos antes de decidir.
• Traçados em outras partes não provam que o documento inteiro é vetorial. Um arquivo pode conter ambos.

Essa verificação é útil para designers que não querem ler XML, mas tem um limite: um objeto retangular <image> pode referenciar outro SVG. A verificação do código mostra o que o objeto realmente carrega.

Verificação 2: examine o código do SVG

Faça uma cópia e abra o arquivo .svg em um editor de texto simples. Procure por <image. Se não houver elemento de imagem, o mecanismo comum de imagem incorporada está ausente. Se encontrar um, leia o valor de href.

Um PNG incorporado costuma começar assim:

<image href="data:image/png;base64,iVBORw0KGgo..." />

Um JPEG incorporado normalmente começa com data:image/jpeg;base64,. A referência de URLs de dados da MDN explica que os dados são colocados diretamente na URL, com codificação Base64 opcional. Uma sequência muito longa e ilegível é normal nesse formato.

Uma imagem raster vinculada se parece mais com isto:

<image href="photos/product-shot.png" />

Esse PNG não está armazenado dentro do SVG. O documento depende de um arquivo separado nesse caminho. Mova ou envie o SVG por e-mail sem a imagem e a arte pode desaparecer.

Por fim, isto não é prova de conteúdo raster:

<image href="icons/mark.svg" />

A referência de <image> na MDN informa explicitamente que o elemento pode exibir formatos raster ou outro SVG. Verifique o tipo de mídia ou a extensão antes de classificá-lo.

Três estruturas dentro ou ao lado de um SVG

Incorporar e vincular são problemas diferentes

Ao importar uma imagem, o Inkscape pode vinculá-la ou incorporá-la. Seu guia de importação de imagens descreve a diferença com clareza: vincular mantém o SVG menor, mas faz o documento depender da localização da imagem; incorporar torna o SVG autocontido, mas aumenta seu tamanho.

Essa diferença importa na entrega:

• Raster incorporado: portável como um único arquivo, mas ainda limitado pela resolução e frequentemente muito maior que o esperado.
• Raster vinculado: mais fácil de atualizar de forma independente, mas frágil ao mover entre pastas, computadores, sites ou fornecedores.
• Traçados vetoriais: editáveis como geometria, mas apenas se a arte original tiver sido traçada ou desenhada como traçados desde o início.

Incorporar é empacotar, não vetorizar. Base64 não transforma pixels em curvas. Se você prepara arte para bancos de imagens, siga a conferência de envio de vetores para Adobe Stock para as verificações adicionais de prancheta, editabilidade e arquivo original.

Por que o zoom não basta

Se a região suspeita revela blocos em alto zoom em vários visualizadores, provavelmente é raster. Ainda assim, um visualizador pode rasterizar um SVG saudável para uma miniatura, canvas, prévia de impressão ou cache de importação. Por outro lado, um PNG incorporado de alta resolução pode parecer suave no zoom comum e passar despercebido dentro do documento.

Use o zoom como verificação de sintomas e confirme com os objetos ou código. O guia mais amplo sobre por que um SVG parece pixelado separa conteúdo incorporado do comportamento do visualizador e da renderização de ícones pequenos. Para um aplicativo em canvas, compare as importações de imagem e traçados editáveis no Konva antes de interpretar um único nó de imagem como um problema no código do SVG.

Decida se deve manter, revincular ou substituir

Mantenha o raster quando os pixels forem intencionais

Fotografias, digitalizações, textura, iluminação suave e detalhes complexos de pintura frequentemente devem continuar em raster. Se o SVG existe para combinar essa imagem com rótulos ou sobreposições vetoriais, um arquivo misto pode ser o desenho correto. Confirme que o raster tem resolução suficiente no tamanho físico final e decida se a entrega deve ser autocontida ou acompanhada dos recursos vinculados.

Revincule ou incorpore quando o problema for portabilidade

Se uma imagem vinculada desaparece em outro computador, entregue o SVG e a imagem com a mesma estrutura relativa de pastas ou incorpore a imagem antes de entregar. Isso corrige o recurso ausente. Não torna a imagem editável como traçados.

Substitua o raster quando foram prometidos traçados

Se um conversor colocou um logotipo chapado, ícone ou desenho de linhas dentro de um SVG, encontre o PNG ou JPEG original. Se o original não estiver disponível, extraia a imagem incorporada ou exporte esse objeto em seu tamanho nativo. Depois converta a imagem em traçados vetoriais, examine as formas e substitua o objeto <image> pelo resultado vetorial verificado.

O PerfectVector é útil para reconstruir arte chapada adequada como formas editáveis. Ele não transforma por mágica uma fotografia de tons contínuos em um conjunto pequeno e fiel de traçados. Para uma foto, mantenha o raster, a menos que o objetivo seja uma interpretação posterizada deliberadamente. Se você precisa de uma cópia PNG para entrega a partir de um SVG aprovado, renderize diretamente no tamanho final em pixels com o Sharp; ampliar um PNG pequeno não acrescenta detalhes a nenhuma imagem raster incorporada nesse SVG.

Usuários do Scratch devem conferir por que Convert to Vector não traça um bitmap antes de exportar outro contêiner.

Reconstrua efeitos que foram rasterizados na exportação

Alguns SVGs são principalmente vetoriais, mas contêm uma sombra, desfoque, textura ou efeito não compatível rasterizado. Decida se o efeito precisa continuar editável e portável. Reconstrua um efeito simples com recursos vetoriais compatíveis, achate-o intencionalmente como raster na resolução de entrega ou remova-o. Traçar uma sombra suave costuma criar formas ruidosas, não um efeito melhor.

Conferência de entrega para SVGs mistos

Antes de enviar o arquivo a um site, gráfica, máquina de corte ou colaborador:

1. Procure no código por <image, data:image/, .png, .jpg e .jpeg.
2. Confirme se cada recurso referenciado deve ser raster, vetorial ou estar ausente.
3. Mova temporariamente os arquivos vinculados e reabra o SVG para revelar dependências quebradas.
4. Selecione a arte importante e verifique se as partes que devem ser editáveis são traçados.
5. Compare as dimensões nativas em pixels do raster com seu tamanho final de exibição ou impressão.
6. Reabra a cópia entregue em um segundo aplicativo.
7. Guarde o arquivo original e uma prova raster quando a aparência importar mais que a editabilidade.

Para corte ou fabricação, remova conteúdo raster decorativo do arquivo da máquina e faça a conferência de SVG para corte. Uma máquina de corte acompanha traçados; ela não transforma uma fotografia incorporada em contorno de corte.

Perguntas frequentes

Um SVG pode conter um PNG ou JPEG? Sim. Um elemento de imagem SVG pode referenciar um PNG ou JPEG como arquivo separado ou carregar seus dados dentro do SVG. O raster mantém seu comportamento original baseado em pixels.

Uma tag de imagem sempre significa que o SVG contém uma imagem raster? Não. O elemento de imagem também pode referenciar outro SVG. Examine seu valor de href ou do antigo xlink:href em busca do tipo de mídia, URL de dados ou nome do arquivo antes de classificá-lo.

Como saber se o raster está incorporado ou vinculado? Uma imagem incorporada geralmente tem um href que começa com data:image, então seus bytes ficam dentro do SVG. Uma imagem vinculada tem um caminho ou URL como images/photo.png e depende desse recurso separado.

Posso remover uma imagem incorporada de um SVG? Sim. Exclua-a se for desnecessária, substitua-a por um recurso raster intencional ou vetorize a arte chapada adequada e coloque os traçados resultantes no lugar. Guarde uma cópia de segurança antes de editar o XML.

Por que meu SVG contém traçados e uma imagem? É um SVG misto. O arquivo pode combinar intencionalmente uma foto com sobreposições vetoriais, ou um exportador pode ter rasterizado um efeito. Examine quais partes precisam de editabilidade antes de alterar o arquivo.

Fontes

1. W3C — Conteúdo incorporado do SVG 2 — Define o elemento <image>, seu href e os recursos raster ou SVG que ele pode referenciar.
2. MDN — SVG <image> — Referência prática para conteúdo de imagem compatível e comportamento de dimensionamento.
3. Guia para iniciantes do Inkscape — Importação de imagens — Explica imagens importadas vinculadas e incorporadas e a diferença de portabilidade.
4. MDN — URLs de dados — Documenta o esquema data: usado com frequência para armazenar dados de imagem dentro de um SVG.

Encontrou um bitmap dentro de um contêiner onde deveria haver traçados editáveis? Converta a arte chapada original em vetor real, reabra o SVG e verifique se os objetos importantes agora são selecionados como formas.