Inspetor SVG: encontre problemas no código SVG
Cole ou abra um SVG para ver a estrutura, as cores e os recursos, mais uma lista de problemas em que pode clicar para saltar para a linha exata.
Largue aqui um ficheiro SVG
Até 5 MB. Aberto apenas no seu navegador.
O seu SVG é processado neste separador do navegador. Nunca é enviado.
Como funciona
- Abra um ficheiro ou cole código. O código aparece à esquerda.
- Leia o separador Problemas e clique num resultado para saltar para a sua linha.
- Corrija o código no próprio sítio. A análise atualiza-se enquanto escreve.
Usos comuns
- Descobrir porque é que um SVG aparece em branco ou com o tamanho errado.
- Corrigir IDs duplicados antes de pôr vários SVG numa página.
- Listar as cores e os tipos de letra de que um gráfico depende.
O que faz
- Deteta XML inválido, viewBox em falta, IDs duplicados e referências quebradas.
- Assinala scripts, manipuladores de eventos e referências externas.
- Verifica se há title e role para que os leitores de ecrã possam nomear o gráfico.
- Lista cores, gradientes, imagens, tipos de letra, IDs e classes com o seu uso.
Bom saber
O inspetor lê o código, não o desenha. As cores são encontradas em atributos, atributos style e elementos style por uma leitura simples, não pela cascata CSS completa, e as verificações de acessibilidade são básicas, não uma auditoria completa.
Perguntas frequentes
- O que conta como problema?
- Os erros quebram o ficheiro ou são perigosos, os avisos podem dar resultados errados e as notas convém conhecer. Cada item indica o seu tipo.
- Porque é que os IDs duplicados importam?
- Quando vários SVG partilham uma página, um ID repetido pode fazer com que gradientes, máscaras e referências apontem para a forma errada.
- O tamanho gzip é real?
- Sim. O seu navegador comprime o código e indica o número real de bytes. Só é mostrado se o seu navegador o suportar.
- O meu ficheiro é enviado?
- Não. A análise corre no seu separador do navegador.
Ferramentas relacionadas
- Pronto para alterar? Edite-o no editor SVG.
- Só quer ver um ficheiro? Abra-o no visualizador SVG.
- Veja todas as ferramentas no SVG Studio.