Comece com a estrutura do documento
SVG é uma linguagem baseada em XML para gráficos vetoriais. Um elemento svg pode conter formas, caminhos, texto, grupos e atributos que determinam o que aparece na imagem. O pequeno exemplo abaixo tem uma viewBox de 40 por 40, com um círculo de raio 12 centrado nas coordenadas (20; 20). A viewBox estabelece um sistema de coordenadas; ela não exige que a imagem ocupe 40 pixels CSS na página. Como SVG se baseia em XML, o aninhamento dos elementos e os atributos entre aspas importam. O formatador XML genérico pode ajudar a inspecionar a estrutura XML, mas o formatador SVG verifica especificamente se existe uma raiz svg. Use este último quando a entrada representar uma imagem SVG.
Formate para inspecionar; depois compacte uma cópia
A ferramenta de formatação adiciona recuo e quebras de linha para que você possa inspecionar o elemento círculo, seu preenchimento e a viewBox separadamente. Isso é útil durante a edição ou revisão. O minificador de SVG visa uma forma serializada mais compacta, que pode ser útil ao enviar um arquivo; não é um compressor de imagem que otimiza caminhos ou escolhe um desenho diferente. Mantenha a fonte original e compare os resultados em um renderizador real. Uma string mais curta não significa automaticamente renderização idêntica para cada recurso SVG incomum, especialmente se uma ferramenta tiver cobertura limitada do analisador. Trate um erro do formatador ou do minificador como uma solicitação para inspecionar a entrada, não como permissão para adivinhar XML ausente.
- SVG XML com viewBox e círculo
- formatar para inspecionar a estrutura
- compactar uma cópia → comparar a renderização
Verificar o significado visível e não visível
Um diagrama pode incluir texto, rótulos ou um título que seja importante para os leitores e tecnologia assistiva. Não remova esse conteúdo apenas para economizar bytes. SVG também pode incluir estilos, links, animação e scripts, portanto, a formatação não é a sanitização de um arquivo enviado por terceiros. Se a fonte veio de fora do seu projeto, use um processo de revisão de segurança e sanitização adequado antes de incorporá-la em uma página. O exemplo de círculo é intencionalmente simples: ele ilustra a estrutura sem afirmar que cada recurso SVG sobreviverá a um pequeno formatador do lado do navegador. Compare a imagem exibida, suas dimensões e quaisquer alternativas textuais após a transformação.
Verificar coordenadas e contexto de incorporação
Se um SVG aparecer pequeno demais, cortado ou em branco, examine primeiro o viewBox. Seus quatro números definem o retângulo visível no sistema de coordenadas; um elemento fora desse retângulo pode não aparecer mesmo que o XML seja válido. Depois, verifique a largura e a altura no local onde o SVG foi incorporado, pois o CSS pode controlar o tamanho exibido. O preenchimento e o contorno de uma forma também afetam sua visibilidade. A formatação não altera as coordenadas pretendidas; compare o arquivo compactado com o original usando os mesmos estilos da página. Quando o gráfico for importante, abra o arquivo como imagem independente e também no contexto real da página.
Use as ferramentas como um fluxo de trabalho controlado
Cole um SVG pequeno e representativo no formatador incorporado e confirme que o resultado permanece legível. Se o arquivo for XML, mas não SVG, escolha o formatador XML. Depois de rever o SVG, copie seu conteúdo para o minificador de SVG, mantenha as duas versões e compare-as visualmente em um navegador em vários tamanhos. Verifique alternativas de texto e qualquer comportamento interativo, se esses recursos existirem. Somente então substitua o arquivo publicado. A ferramenta processa a entrada no seu navegador, mas publicar um widget incorporado com entrada pré-preenchida exibiria essa entrada no fragmento da URL incorporada; evite usar material de fonte privada em um exemplo público. Um formato limpo é um auxílio para revisão, não um substituto para testes de renderização.