Arquivo SVG: confira formas vetoriais e imagens embutidas

Um arquivo SVG pode conter formas vetoriais, uma imagem em pixels ou os dois tipos de conteúdo. Para conferir a entrega, examine os elementos que o compõem e o recurso a que cada imagem se refere. Renomear um PNG ou colocá-lo dentro de um SVG não reconstrói o desenho como curvas.

O guia de imagem para web reúne escolhas de formato, exportação e apresentação. Neste aprofundamento, vamos separar a extensão do conteúdo, comparar três amostras geométricas próprias e preparar um registro de conferência para conversar com quem produziu o arquivo.

Por que a extensão SVG não basta

SVG é uma linguagem baseada em XML, usada para descrever imagens. A introdução a SVG da MDN mostra que a composição pode reunir formas, imagens rasterizadas e combinações desses recursos. Círculos, retângulos e curvas podem ser descritos por elementos do documento.

Uma imagem rasterizada, como um PNG, guarda uma grade de pixels. Uma forma vetorial descreve sua geometria. Essa diferença importa quando a entrega exige ajustar partes do desenho ou ampliar suas formas para outra aplicação. O nome terminado em .svg identifica o formato do documento; não responde sozinho como o conteúdo foi construído.

Também não basta encontrar um elemento chamado <image>. A referência de <image> da MDN informa que ele pode exibir imagens rasterizadas ou outros arquivos SVG. É preciso examinar a referência e o conteúdo correspondente antes de concluir que existe uma parte em pixels.

Confira o documento preservando o original

Guarde o arquivo recebido e trabalhe numa cópia identificada. Abra essa cópia no editor vetorial adotado pela equipe e examine os objetos ou a estrutura disponíveis. O nome dos painéis varia entre ferramentas. Se a inspeção exigir conhecimento que você não tem, peça ao profissional a identificação dos elementos e a demonstração da parte que precisa ser editável.

Em uma leitura do XML, procure elementos que descrevam formas e elementos que façam referência a imagens. <circle> é um exemplo de forma; <image> merece a conferência do recurso associado. Uma busca por duas palavras no texto é apenas uma triagem: documentos reais podem ter grupos, referências e outros recursos que exigem análise mais completa.

No atributo href de uma imagem, a referência pode indicar um recurso por endereço ou trazer os dados no próprio documento. Nas amostras deste artigo, usamos data:image/png;base64 para incorporar um PNG próprio. Essa informação foi conferida também pela leitura e decodificação dos dados, sem depender do nome escolhido para o arquivo.

Se houver um recurso externo, identifique o arquivo correspondente e confira como ele será entregue e localizado no destino. Se o recurso estiver incorporado, registre seu tipo e sua função. Estar dentro do SVG resolve a localização dos dados dessa amostra, mas não transforma seus pixels em formas vetoriais.

Três amostras próprias com a mesma extensão

Exemplo didático S034: criamos três documentos SVG simples. A amostra A contém um círculo descrito como forma. A B contém uma imagem PNG própria, de 32 × 32 pixels, incorporada no documento. A C reúne um círculo vetorial e o mesmo PNG. Não são arquivos de logotipo de cliente nem uma comparação de desempenho entre programas.

Amostras próprias S034

Três documentos com extensão .svg. O esquema explica a composição, sem simular uma interface de editor.

A-forma.svg · Forma

Contém 1 circle e nenhum image. A geometria do círculo está descrita como forma vetorial.

B-png-embutido.svg · Imagem

Contém 1 image e nenhum circle. Os dados internos são de um PNG próprio de 32 × 32 pixels.

C-misto.svg · Conteúdo combinado

Contém 1 circle e 1 image. Combina uma forma vetorial e o mesmo PNG interno de 32 × 32 pixels.

Conferência e limite

Estrutura XML e PNG incorporado conferidos. image também pode apontar para SVG. Sem comparação de renderização, teste de editor, impressão ou vetorização.

Descrição da figura

A figura apresenta três documentos SVG próprios como recipientes de conteúdo. A-forma.svg contém um elemento circle e nenhum image, representado por um círculo contínuo. B-png-embutido.svg contém um elemento image e nenhum circle, representado por uma grade de pixels. C-misto.svg contém um circle e um image, com ambos os símbolos lado a lado. Nas amostras B e C, a referência interna contém os dados do mesmo PNG próprio de 32 por 32 pixels. Uma faixa inferior lembra que o recurso precisa ser inspecionado: image também pode apontar para outro SVG. As contagens XML e os dados incorporados foram conferidos. Os símbolos são esquemáticos e não reproduzem a renderização das amostras. Não houve comparação de programas, impressão, vetorização ou arquivo de cliente. No celular, a estrutura e os limites aparecem em texto HTML.

A-forma.svg
1 elemento circle; nenhum elemento image.

B-png-embutido.svg
Nenhum circle; 1 image com dados internos de PNG.

C-misto.svg
1 circle e 1 image com o mesmo PNG interno.

PNG próprio: 32 × 32 pixels.
Conferência realizada: estrutura XML e dados incorporados.
Sem teste comparativo de renderização, editor ou impressão.

Na amostra A, o círculo é descrito por centro, raio e preenchimento. Na B, o elemento de imagem indica onde apresentar os pixels. Na C, as duas construções coexistem. O esquema explica essa composição, sem simular uma captura de editor ou atribuir diferenças de nitidez a um teste que não foi feito.

A contagem acima é suficiente para estas amostras mínimas, cujo conteúdo completo foi criado e lido. Não a transforme numa regra para certificar qualquer SVG recebido. Um documento pode ter outras construções, e a possibilidade de selecionar uma forma não demonstra que toda a composição esteja pronta para o processo desejado.

Relacione o que encontrou ao requisito da entrega

Se o acordo exige um símbolo composto por formas, identifique a parte que continua como PNG e solicite uma correção específica. Se o projeto usa deliberadamente uma fotografia dentro da composição, a presença de pixels pode estar prevista. O critério de aceite deve acompanhar o uso, sem reprovar automaticamente todo arquivo misto.

Para organizar o pacote completo, consulte a conferência dos arquivos do logotipo. O original editável, as exportações e as orientações de aplicação têm funções diferentes. Receber um SVG não substitui por si só o documento de trabalho e os recursos combinados na contratação.

Use a ampliação como observação complementar

Ampliar a visualização pode ajudar a localizar bordas e detalhes que merecem inspeção, mas não comprova sozinho a construção do arquivo. Um PNG com muitos pixels pode parecer adequado no tamanho observado. Uma composição vetorial também pode ter detalhes que deixam de ser úteis numa aplicação pequena. Confira a estrutura e o destino, além da aparência momentânea.

Se o problema for deformação, veja como redimensionar mantendo a proporção. Alterar largura e altura de maneira desigual é uma questão diferente de identificar pixels incorporados. Preservar a proporção também não reconstrói contornos ausentes nem demonstra que o arquivo atende à produção.

Evite registrar “vetorizado” quando o procedimento realizado foi apenas salvar ou exportar dentro de outro formato. Para afirmar que uma parte foi reconstruída como formas, confira o resultado correspondente. Mesmo depois dessa reconstrução, será necessário comparar o desenho e avaliar a aplicação, sem presumir equivalência automática ao original.

Registre a pendência e confira a nova versão

Arquivo, origem e versão recebida:
Aplicação prevista e requisito combinado:
Parte do desenho que precisa ser editada ou ampliada:
Editor ou método usado na inspeção:
Formas identificadas e trecho examinado:
Imagens identificadas e respectivos tipos:
Referências internas ou externas e recursos correspondentes:
Dimensões da imagem em pixels, quando pertinentes:
O que foi conferido e o que ficou pendente:
Correção solicitada, responsável e prazo combinado:
Nova versão recebida e comparação com a referência:
Conferência no destino e resultado observado:
Responsável pelo aceite e local da cópia aprovada:

Descreva a dúvida de modo que a equipe consiga agir: “o símbolo central está como PNG incorporado; a entrega combinada exige essa parte como formas editáveis”. Esse registro é mais útil que pedir um SVG melhor sem explicar a necessidade. Quando houver uma nova versão, confira o trecho corrigido e a composição completa.

A conferência termina no uso previsto. Abra a versão entregue no ambiente de aplicação e verifique aparência, proporção, recursos e a tarefa combinada. Se uma plataforma não aceitar SVG, use um formato adequado ao destino e peça orientação à equipe responsável. Este roteiro não exige mudar regras de upload, plugins ou configurações globais.

Perguntas frequentes sobre conteúdo de arquivo SVG

Todo arquivo SVG é inteiramente vetorial?

Não. O documento pode conter formas vetoriais, imagens rasterizadas ou uma combinação. Confira sua composição e o requisito da aplicação.

Encontrar image prova que existe PNG no SVG?

Não. Esse elemento também pode apontar para outro SVG. Examine o recurso referenciado; nas amostras didáticas, os dados incorporados foram identificados como PNG.

Salvar um PNG dentro de SVG vetoriza o desenho?

Não. A incorporação mantém os pixels como imagem. Uma reconstrução em formas exige um procedimento e uma conferência próprios.

Um SVG com conteúdo misto deve ser recusado?

Depende do uso combinado. Uma imagem em pixels pode fazer parte da composição prevista. Registre a incompatibilidade específica quando alguma parte precisar ser fornecida como formas.

Se a equipe precisa organizar os arquivos e seus critérios de entrega, converse conosco sobre a apresentação visual do conteúdo. Podemos ajudar a definir aplicações e responsabilidades. Criação, reconstrução de desenhos e implantação no site precisam de entregas e escopos combinados.