SVG → </>
Visualizador SVG e editor de código
Abra um arquivo SVG ou cole o código para ver como ele fica, conferir o tamanho e editar com pré-visualização ao vivo. Tudo fica no seu navegador.
Roda no navegador · os arquivos ficam no seu aparelho
Como visualizar um arquivo SVG
- Abra um arquivo ou cole o código. Use Abrir arquivo, solte um SVG sobre a prévia ou cole o código no editor.
- Confira a prévia. Alterne entre fundo transparente, claro e escuro para enxergar bordas e formas brancas.
- Edite o código. A prévia se atualiza enquanto você digita. Formatar código organiza a indentação.
- Copie ou baixe. Salve o SVG editado ou copie o código.
SVG view: veja o arquivo em qualquer fundo
Muitos ícones SVG são brancos ou usam áreas transparentes e somem em uma página branca. O seletor de fundo mostra a imagem sobre um quadriculado, sobre branco e sobre uma superfície escura, e é assim que você percebe um logo branco, um preenchimento que falta ou uma borda que vaza.
Abaixo da prévia aparecem o width e o height declarados, o viewBox, o número de elementos e o tamanho do arquivo. Esses valores explicam a maioria dos problemas de tamanho: um SVG sem width e height assume o tamanho do contêiner, e um viewBox errado corta ou encolhe o desenho.
Visualizar SVG online com editor de código
O editor destaca o XML, recolhe grupos longos e mostra os números de linha. Quando o código tem um erro, como uma tag que não foi fechada, o visualizador mostra a mensagem do parser em vez de uma imagem em branco, e você sabe qual linha corrigir.
A prévia é renderizada como imagem. Scripts dentro de um SVG não são executados, então é seguro abrir arquivos que você recebeu de outra pessoa.
Editor SVG online e grátis para ajustes rápidos
As edições mais comuns levam poucos segundos: mudar a cor de um fill, tirar o width e o height fixos para deixar o ícone responsivo, apagar uma camada oculta ou adicionar um <title> para acessibilidade. Para uma limpeza mais profunda, passe o arquivo pelo otimizador SVG.