Repolode
Enviar
Yqnn

Yqnn/svg-path-editor

Editor visual no navegador para criar e manipular dados de SVG path com pontos arrastáveis e um painel de comandos.

Alternativa open source a:Inkscape

Ver no GitHubSite
Estrelas
5,336
Forks
423
Issues abertas
27
Último commit
há 4 meses

O que é?

SVG Path Editor é um app web para criar e editar o atributo `d` de paths SVG. Você pode colar os dados brutos do path em um campo de texto e ver a forma se atualizar no canvas, ou criar um path do zero escolhendo um tipo de comando e clicando no ponto de destino.

Os pontos podem ser movidos por arraste, e cada comando do path pode ser inserido, excluído, convertido para outro tipo ou alternado entre coordenadas relativas e absolutas. O editor também reorganiza paths, por exemplo, iniciando um path ou subpath a partir de um comando selecionado ou invertendo um subpath. As operações aplicadas ao path inteiro incluem escala, translação, rotação, arredondamento, conversão de coordenadas, inversão e otimização. É possível ampliar, arrastar ou definir numericamente a viewBox, que também conta com a opção de ajustar o zoom para caber.

A lógica de edição é publicada separadamente como o pacote npm svg-path-editor-lib. O projeto roda com Node.js 18.13 ou superior e inclui um servidor de desenvolvimento, build de produção e testes unitários com Karma.

Recursos principais

  • 01Edite dados de SVG path como texto bruto ou arrastando pontos no canvas.
  • 02Insira, exclua e converta comandos individuais do path.
  • 03Alterne comandos entre coordenadas relativas e absolutas.
  • 04Aplique escala, translação, rotação, arredondamento e otimização ao path inteiro.
  • 05Ajuste a viewBox com zoom, arraste, campos numéricos ou a opção de ajustar o zoom para caber.

Casos de uso

  • Ajustar manualmente paths de ícones ou ilustrações exportados de outras ferramentas.
  • Criar formas SVG simples diretamente no navegador.
  • Limpar e encurtar dados de paths arredondando ou otimizando comandos.

Início rápido

  1. 1

    Instale o Node.js v18.13 ou superior e, em seguida, instale as dependências

    npm install
  2. 2

    Inicie o servidor de desenvolvimento e abra http://localhost:4200/

    npm start

Antes de usar

  • Para executar localmente, é necessário ter o Node.js v18.13 ou superior.
  • O README não oferece uma versão desktop independente; a versão hospedada é executada no navegador.

Tópicos

#svg#svg-path#graphics#vector#web-editor#typescript#svg-editor#svg-parser

Perguntas frequentes

O que é svg-path-editor?
Editor visual no navegador para criar e manipular dados de SVG path com pontos arrastáveis e um painel de comandos. SVG Path Editor é um app web para criar e editar o atributo `d` de paths SVG. Você pode colar os dados brutos do path em um campo de texto e ver a forma se atualizar no canvas, ou criar um path do zero escolhendo um tipo de comando e clicando no ponto de destino.
svg-path-editor é gratuito? Qual é a licença?
svg-path-editor é open source sob a licença Apache-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
svg-path-editor ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de svg-path-editor foi em 18 de jun. de 2026.
Para que posso usar svg-path-editor?
Ajustar manualmente paths de ícones ou ilustrações exportados de outras ferramentas. Criar formas SVG simples diretamente no navegador. Limpar e encurtar dados de paths arredondando ou otimizando comandos.
Como instalar svg-path-editor?
Instale o Node.js v18.13 ou superior e, em seguida, instale as dependências: npm install Inicie o servidor de desenvolvimento e abra http://localhost:4200/: npm start
Onde consigo svg-path-editor?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/Yqnn/svg-path-editor

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados