Editor e explicador de SVG
SVG Editor and Explainer
Edita um SVG ao lado da renderização ao vivo e explica o arquivo: viewBox e escala, transformações, cada comando de caminho, pintura herdada, bytes desperdiçados e o que quebra num <img>, num data URI ou inline.
Edite um SVG com a renderização ao lado e leia um painel que diz o que o arquivo realmente é: se ele vai escalar, o que cada transform faz no caminho até uma forma, o que o atributo d soletra comando por comando, como um fill se resolve pela herança, quanto as sobras do editor custam em bytes, e o que quebra quando o mesmo arquivo é usado como <img>, como fundo CSS ou colado inline. Cada achado aponta para o atributo exato a que se refere. É um conjunto de regras sobre o arquivo interpretado, não um modelo, então relata o que está lá e nunca adivinha para que o arquivo serve.
Código do SVG
Solte um arquivo .svg
Lido nesta aba. Nada é enviado.
Digite aqui e a prévia acompanha. Clique numa figura da prévia e o código pula para o elemento dela.
Prévia
Os contornos clicáveis cobrem as figuras cuja caixa dá para deduzir do arquivo. <text>, <use> e um <image> sem tamanho precisam de um renderizador, então esses são selecionados pelo código.
Desenhado num quadro isolado a partir da marcação remontada da árvore analisada — nunca dos seus bytes. O quadro é uma caixa de tamanho fixo e o arquivo recebe ela inteira, que é o que deixa visível quando um documento que não escala se recusa a preenchê-la.
Bytes
395
Elementos
5
Figuras
3
Comandos de caminho
10
Aninhamento mais profundo
1
O que é este arquivo
- notaMoldura
Tem tamanho e escala
width="24" e height="24" dão a ele um tamanho intrínseco, e viewBox="0 0 24 24" faz desse tamanho um ponto de partida, e não um limite. Dê outra largura no CSS e tudo o que está dentro é reescalado junto. É o que você quer para um ícone.
- notaCoordenadas
Uma unidade de usuário, e quanto ela vale
As coordenadas lá dentro vão de 0 a 24 na horizontal e de 0 a 24 na vertical. Na largura declarada de 24, uma unidade de usuário desenha 1 pixel CSS, e esse número muda com o tamanho que o arquivo realmente receber.
- notaCaminhos
Comandos absolutos e relativos misturados
3 comandos absolutos e 6 relativos no mesmo caminho. Os dois são válidos e desenham a mesma figura; a diferença prática é que um caminho todo relativo pode ser movido editando só o primeiro M, e este não.
- notaPintura
currentColor: quem decide a cor é a página
1 atributo pinta com currentColor, que se resolve na propriedade CSS `color` herdada no ponto em que o SVG está. Inline numa página, é exatamente o que você quer de um ícone: pega a cor do texto ao redor e acompanha uma troca de tema sem esforço. Usado como <img> ou como background-image de CSS, não se resolve contra nada e sai preto, porque não há elemento de onde herdar.
- notaAcessibilidade
Nome: “보관함에 저장”
<title> é o nome acessível do gráfico, e a maioria dos visualizadores também o mostra como dica ao passar o mouse — por isso um <title> escrito como nome de arquivo é pior do que nenhum. Este diz “보관함에 저장”.
- notaAcessibilidade
Sem <desc>
<title> é o nome curto; <desc> é a descrição mais longa para um gráfico cujo conteúdo importa — um gráfico de dados, um diagrama, um mapa. Um ícone não precisa, e acrescentar um vazio é pior do que deixar de fora.
Elemento selecionado
Clique numa figura da prévia, ou ponha o cursor dentro de um elemento no código.
Tirar o excesso com o otimizador de SVG · Transformar num data URI de CSS · Mexer num caminho sozinho
Como usar
Cole o SVG, ou solte o arquivo
A caixa de código aceita uma colagem e a área de soltar aceita um .svg. Tudo é lido nesta aba. Os quatro exemplos acima dos painéis merecem um clique antes: cada um é um formato diferente de arquivo real, e o relatório diz algo diferente sobre cada um.
Leia primeiro a seção de enquadramento
Ela diz qual dos quatro formatos este documento é, e isso decide a maior parte do que vem depois. Um viewBox com width e height escala e tem um tamanho próprio; um viewBox sozinho preenche qualquer caixa que receber; width e height sem viewBox não escalam de jeito nenhum, e é por isso que um ícone copiado de uma ferramenta de design tantas vezes se recusa a redimensionar. A prévia entrega ao arquivo uma caixa fixa, para que você veja qual dos casos é.
Clique em uma forma para alinhar os dois painéis
Clicar em um contorno na prévia põe o cursor naquele elemento no código e preenche o painel do elemento: a cadeia de transforms do elemento mais externo para baixo, o que a matriz acumulada faz, a pintura conforme se resolve pela herança e, para um caminho, cada comando em linguagem simples. Mover o cursor no código seleciona na direção contrária.
Use os botões “mostrar” em vez de procurar
Cada achado carrega o intervalo de código a que se refere, então o botão nele seleciona exatamente aqueles caracteres — o segundo degradê com o id duplicado, não o primeiro, e o atributo em si, e não a tag ao redor.
Leve os achados de tamanho ao otimizador
A seção de tamanho conta bytes e diz o que eles são — metadados de editor, um degradê sem uso, sete casas decimais que ninguém escolheu — mas esta ferramenta não reescreve o seu arquivo. O otimizador de SVG faz essa passada no documento inteiro de uma vez e mostra a diferença antes/depois, para que você confira que nada se moveu.
Perguntas frequentes
Por que meu ícone não aumenta quando defino uma largura no CSS?
Quase sempre porque o arquivo tem width e height, mas não tem viewBox. Sem ele, as unidades do usuário são pixels CSS e não há mapeamento para o navegador reescalar — a caixa cresce e o desenho fica parado. A seção de enquadramento diz isso e propõe o viewBox exato a acrescentar, que normalmente é "0 0 <largura> <altura>" com os números que já estão no arquivo.
Coloquei dois ícones inline e o segundo perdeu o degradê. Por quê?
Os ids colidiram. Ferramentas de design geram nomes como a, Layer_1 e SVGID_1_, e uma vez que os dois arquivos estão na mesma página, cada url(#a) resolve para o que vier primeiro no documento — então o segundo ícone toma emprestado em silêncio o degradê ou o clip path do primeiro. A seção de portabilidade sinaliza ids gerados por exportadores exatamente por isso. Prefixe cada id com algo único do arquivo antes de colocá-lo inline.
O arquivo funciona na minha página e renderiza em branco como fundo CSS. O que mudou?
Três coisas diferem, e o relatório nomeia a que se aplica. Um xmlns ausente é perdoado pelo parser de HTML e fatal em todo outro lugar. currentColor não tem de onde herdar fora de uma página, então sai preto. Referências externas não são buscadas de jeito nenhum em um <img> ou em um background-image, então o elemento que precisa delas não desenha nada. E um # em uma cor hexadecimal trunca um data URI, a menos que seja escrito como %23.
Um buraco no meu caminho está sendo preenchido. Eu o movo?
Não — inverta-o. Sob o fill-rule="nonzero" padrão, um laço interno só é um buraco quando gira no sentido oposto ao do laço que o contém, então um buraco que se preenche é um problema de direção, não de posição. A seção de caminho diz quantos subcaminhos há e qual regra está decidindo. Inverter um subcaminho é o que o editor de caminhos SVG faz.
Ela encontrou um <script> em um arquivo que me enviaram. Isso é perigoso?
Depende inteiramente de para onde o arquivo vai, e o relatório diz qual é o caso. Colado inline em uma página, o script de um SVG roda com a origem daquela página — os cookies dela, o armazenamento dela, o DOM dela. Carregado como <img> ou como fundo CSS, ele nunca roda. A prévia aqui o removeu antes de renderizar, e o quadro em que ela renderiza não consegue rodar script de qualquer modo, então olhar o arquivo nesta ferramenta é seguro em todos os casos.
Por que o painel de pintura discorda do que eu vejo?
Porque o arquivo tem um bloco <style> e este relatório não o aplica. Resolver seletores CSS exige um motor de CSS; cada valor citado aqui vem só de atributos de apresentação e de estilos inline. O relatório diz isso onde quer que exista um bloco <style>, em vez de mostrar em silêncio um valor que a folha de estilo sobrescreveu.
Pode receber de
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Gerador de box-shadow
Box Shadow Generator
Compõe sombras de caixa e de texto em camadas com prévia ao vivo e gera o CSS.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
SVG para data URI de CSS
SVG to CSS Data URI
Codifica um SVG como data URI de background CSS, escapando só o que precisa para mantê-lo pequeno.
Otimizador de SVG
SVG Optimiser
Remove sobras de editor, achata transformações e arredonda a precisão dos caminhos, mostrando a diferença renderizada.
Editor de caminhos SVG
SVG Path Editor
Converte dados de caminho entre comandos absolutos e relativos, move, escala, gira e inverte, e mostra a bounding box com prévia ao vivo.
SVG para PNG
SVG to PNG
Renderiza um SVG em PNG, JPEG ou WebP em qualquer fator de escala, com fundo transparente ou preenchido.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.