Editor de código SVG online com visualização ao vivo

Um Editor de Código, Visualizador e Pré-visualizador de SVG, Tudo em Um

SVG (Scalable Vector Graphics) é o formato XML por trás dos ícones, logotipos e ilustrações na maioria dos sites. O Phoenix Code abre arquivos .svg como código legível e editável e renderiza a imagem ao lado, atualizando-a ao vivo enquanto você digita.

Ele também funciona como um visualizador de SVG. Abra qualquer arquivo .svg para ver sua aparência real e inspecione a marcação ao mesmo tempo, em vez de arrastar arquivos para a aba de um navegador, um por um.

E como o Phoenix Code é um editor de código de verdade, você obtém mais do que uma caixa de texto de colar e pré-visualizar: destaque de sintaxe, projetos com múltiplos arquivos, integração com Git e a assistência de IA do Claude Code já vêm integrados, para que você possa editar os SVGs dentro de um projeto de site ou aplicativo real.

Tudo o que Você Precisa para Editar Arquivos SVG

Edite ícones manualmente, ajuste logotipos e limpe vetores exportados sem precisar abrir um aplicativo de design pesado.

Pré-visualização de SVG ao Vivo

Veja a imagem renderizada ser atualizada enquanto você digita. Altere um preenchimento, ajuste um caminho ou redimensione a viewBox e veja o resultado instantaneamente.

Autocompletar de Tags e Atributos SVG

Dicas de código para elementos e atributos SVG enquanto você digita, desde caminho e viewBox até gradientes, filtros e máscaras.

Amostras e Seletor de Cores

Cores de preenchimento e contorno exibem amostras de cor em linha ao lado do código. Clique em uma para abrir um seletor de cores e ajuste as cores sem sair do editor.

Formate Código SVG Bagunçado

SVGs exportados frequentemente chegam como uma única linha longa. Um clique reformata a marcação para um código limpo, indentado e legível, e tags pareadas são renomeadas juntas quando você as edita.

Assistente de IA para Código Claude

Peça à IA para ajustar um caminho, recolorir um conjunto de ícones ou explicar o que um filtro faz. Use seu login/chave existente; seus arquivos permanecem locais.

Projetos Reais, Não uma Caixa de Texto

Abra uma pasta inteira de ícones, edite vários arquivos SVG lado a lado e faça o commit das alterações com o Git integrado. Funciona offline no aplicativo gratuito para desktop.

Abrir e Visualizar Arquivos SVG Online

Precisa abrir um arquivo SVG que alguém lhe enviou? Abra-o em phcode.dev e você verá a imagem renderizada e seu código-fonte lado a lado, sem instalação e sem necessidade de conta. Ele funciona como um visualizador e abridor de SVG online.

Passar o mouse sobre uma referência SVG em seu HTML ou CSS exibe uma miniatura da imagem com suas dimensões, o que torna a busca pelo ícone certo em um projeto grande muito mais rápida.

Edite SVG Online, com Privacidade

Nada é enviado para um servidor. Seja usando o editor no navegador ou o aplicativo para desktop, seus arquivos SVG permanecem na sua máquina. Sem conta, sem cadastro, sem marcas d'água.

Uma nota honesta: o Phoenix Code é um editor de código, não uma ferramenta de desenho. Se você quer arrastar formas em uma tela, um editor visual como o Inkscape é uma opção melhor. Se você quer controle preciso sobre a marcação que é entregue em seu produto, editar o código diretamente é exatamente o objetivo.

Como Abrir e Editar um Arquivo SVG

De um arquivo .svg bruto a uma edição finalizada em menos de um minuto.

Abra o Phoenix Code

Inicie o editor instantaneamente em phcode.dev, ou instale o aplicativo gratuito para desktop para Windows, macOS ou Linux.

Abra seu arquivo .svg

Abra a pasta que contém seu SVG, ou arraste o arquivo para dentro do editor. Ele abrirá como código editável com a pré-visualização da imagem ao lado.

Edite com visualização ao vivo

Altere caminhos, cores, tamanhos ou texto e veja a imagem renderizada ser atualizada enquanto você digita.

Salve e publique

Salve o arquivo e adicione-o diretamente ao seu site, aplicativo ou README. A marcação que você editou é exatamente o que será publicado.

Mais que um Editor de SVG

O Phoenix Code faz o mesmo truque de visualização ao vivo para Markdown. Se você escreve documentação ou READMEs, experimente o editor de Markdown online gratuito ou navegue por nossas ferramentas de desenvolvedor gratuitas para conversores, formatadores e geradores.

Perguntas Frequentes

Sim. Editar arquivos SVG com visualização ao vivo é totalmente gratuito no Phoenix Code, tanto no navegador em phcode.dev quanto no aplicativo para desktop. O editor é de código aberto.

Abra o phcode.dev no seu navegador, depois abra a pasta com seu arquivo .svg e clique nele. Você verá a imagem renderizada e o código-fonte editável lado a lado, sem necessidade de instalação ou conta.

Sim. A imagem renderizada é atualizada conforme você digita, então você pode ajustar um caminho ou uma cor e ver o resultado imediatamente no painel de pré-visualização.

Não. O Phoenix Code edita o código-fonte do SVG em vez de oferecer uma tela de desenho. Isso o torna ideal para limpar ícones, ajustar cores e caminhos, e manter o controle preciso da marcação. Para ilustração à mão livre, uma ferramenta visual como o Inkscape funciona melhor.

Comece a editar SVG agora

Um editor e visualizador de código SVG gratuito e de código aberto com pré-visualização em tempo real, no seu navegador ou no seu desktop.

Baixar o Phoenix Code Abrir Editor de SVG