Hyvector – editor de SVG rápido e moderno

• Hyvector é um editor baseado na web para editar com eficiência imagens SVG (Scalable Vector Graphics) de forma rápida e moderna
• Requer suporte a JavaScript e precisa estar ativado para funcionar corretamente
• Pode ser acessado imediatamente no navegador, sem instalação complexa nem configuração de ambiente
• Combina alto desempenho com design moderno para oferecer uma experiência de usuário intuitiva
• Não é uma ferramenta de edição de SVG em nível de texto ou código, mas sim um ambiente prático de edição por meio de uma interface visual

Principais vantagens e importância

• Em comparação com editores de SVG open source e comerciais, oferece resposta rápida e uma UI moderna
• Por ser baseado na web, pode ser acessado de qualquer lugar independentemente do sistema operacional
• Oferece um ambiente eficaz de trabalho com imagens vetoriais tanto para designers quanto para desenvolvedores
• Pode ser usado imediatamente, sem o peso de instalar plugins ou programas adicionais
• Ferramentas de edição intuitivas permitem criar e modificar recursos SVG com facilidade

[GN⁺]

Comentários no Hacker News

• Estou desenvolvendo uma biblioteca de renderização SVG em C++ como projeto paralelo e nunca encontrei um bom editor de SVG, então geralmente uso o Illustrator e depois limpo a marcação resultante, ou uso o editor baseado em texto svgviewer.dev. Fiquei impressionado com o quão refinada é a UX e com o fato de já oferecer mais recursos do que outras ferramentas que encontrei antes. Meu projeto Donner também oferece um protótipo de editor de código baseado na web. SVG é uma área com muito potencial, mas que vinha sendo limitada pelas ferramentas, então fico feliz em ver inovação acontecendo.
  • Fico curioso sobre quais problemas existem com o Inkscape. Tem alguns bugs aqui e ali, mas no geral parece funcionar bem.
• Parece um ótimo começo. Há algumas funcionalidades claramente ausentes: ao editar com a ferramenta de nós, seria bom que os nós inicial/final encaixassem facilmente um no outro, e especialmente ao desenhar com a ferramenta lápis seria melhor se a distância de snap fosse maior. Acho que uma ferramenta de transformação e distorção no estilo do Wick Editor seria amigável para mobile. Se não for possível arredondar cantos em polígonos, seria melhor esconder ou desativar essa função.
  • Era exatamente esse tipo de feedback que eu queria, obrigado.
• Gostei muito de poder ter controle em alto nível; por exemplo, achei ótimo haver controle até sobre mudanças que não aparecem visualmente, como inverter um caminho. Mas seria bom ter algum feedback porque é difícil saber se a inversão foi executada. Ao copiar uma seleção, há um comportamento em que todas as fontes usadas são incorporadas em base64 no SVG, inflando o arquivo. Fico curioso se a ideia é continuar seguindo rigidamente o mapeamento 1:1 com SVG ou se também consideram abstrações. Eu continuo usando o Figma por causa de um recurso chamado Vector Networks; embora isso exija uma conversão interna para dados de caminho válidos, seria muito útil. Fiquei surpreso tecnicamente por vocês terem adotado renderização em SVG; achei que seria baseado em canvas. Recentemente tentei renderizar objetos 3D em SVG e rapidamente encontrei problemas de desempenho, mas ainda não descobri a causa. Gostaria de saber se vocês já fizeram testes de estresse em dispositivos antigos.
  • Por um tempo eu não percebi que o Vector Networks (eu chamo de path graph) já era uma estrutura intermediária que eu tinha ao fazer operações booleanas de caminho. Até recentemente eu era cético quanto a Vector Networks, mas hoje, com tantas imagens geradas por IA, comecei a achar que isso ficaria muito legal como resultado de vetorização de bitmap. É uma funcionalidade que quero adicionar, mas há uma montanha de coisas mais urgentes na fila. Também pretendo continuar fazendo testes de estresse e já rodei isso até em um tablet Android antigo e lentíssimo de 100 euros. O post no Hacker News foi meio impulsivo e eu deveria ter testado mais antes. Antes eu usava uma máquina ThinkPad antiga para perceber imediatamente problemas de desempenho, mas as IDEs foram ficando pesadas demais e isso deixou de ser viável. Mesmo assim, quero continuar mantendo aparelhos antigos por perto para verificar se continua rodando bem. Vou ler todas as sugestões dos comentários e abrir issues para elas. Estou surpreso com a quantidade de feedback útil que apareceu; eu esperava só 5 upvotes e uns 2 comentários. O motivo de usar renderização em SVG foi querer que o SVG salvo ficasse exatamente igual ao que é renderizado. Também considerei fazer overlays com Canvas ou WebGL, mas por enquanto isso é rápido o bastante na maioria das imagens.
• Isso me fez pensar em como seria bom se o Karbon, do KDE, tivesse se tornado uma ferramenta de edição SVG tão intuitiva e rápida assim. Sinto muita falta especialmente das funções oferecidas pelo SVG Path Editor, como converter coordenadas do caminho para valores relativos e editar separadamente curvas e linhas dentro de um path, mas ainda não encontrei isso em nenhum outro editor. E, embora seja um trabalho enorme, seria muito bom se suporte a animação fosse adicionado.
  • Existem vários projetos com o nome SVG Path Editor, mas o projeto do yqnn.github.io mencionado aqui é, de longe, a ferramenta mais avançada e utilizável que já experimentei.
• Torço muito para que esse projeto dê certo. Tenho uma sugestão sobre a experiência do primeiro uso: logo ao começar, deveria haver um documento vazio já criado para a pessoa praticar imediatamente e, por exemplo, uma ferramenta divertida como o lápis Bézier poderia vir selecionada por padrão. Eu cliquei várias vezes até perceber que não havia documento nenhum, depois criei um novo e troquei de ferramenta para testar, mas a maioria das pessoas vai travar nisso muito rápido. Também seria bom se o tamanho padrão da tela fosse um pouco maior, como um quadrado de 512 ou 500. A realidade é que, ao testar algo novo, se não for divertido nos primeiros 10–20 segundos, muita gente simplesmente vai embora. É preciso conquistar a pessoa nesse intervalo. Está muito bem feito.
  • Concordo. Eu imediatamente cliquei no lápis para rabiscar e fiquei decepcionado quando nada aconteceu. Mesmo depois de criar um novo documento, o lápis continuou sem funcionar. No fim, nunca consegui entender como usar. Com a ferramenta Bézier eu consegui adicionar nós, mas não consegui manipular com outras ferramentas. Parece que o recurso de arrastar não funciona direito no Chrome/Windows.
• Não consegui pegar o jeito de como usar. Consegui criar um segmento de linha, mas não descobri como mover ou redimensionar, embora tenha conseguido mostrar as alças de arraste. Também não achei nenhum jeito de criar outras formas, como retângulos ou círculos. Apertei os botões quase 20 vezes cada e nada acontecia.
  • Na barra de ferramentas principal, o item entre a ferramenta de texto e a de imagem é justamente a ferramenta de formas. As duas primeiras opções são retângulo e círculo.
  • Acho que apps assim deveriam mostrar muitas dicas de uso, com a opção de desativá-las.
• Foi realmente um prazer testar essa ferramenta; ela é muito rápida e intuitiva, especialmente o desempenho de zoom/pan, muito superior ao de ferramentas antigas. Uma coisa que me pergunto é se há planos para adicionar uma camada de plugin ou API voltada para fluxos de trabalho generativos. Cada vez mais gente mistura scripting ou efeitos visuais baseados em IA com edição de SVG, então, se o Hyvector tiver uma camada programável como uma mini linguagem ou uma ponte com JS, ele poderá ficar muito mais poderoso. Parabéns pelo lançamento; é sempre ótimo ver mais ferramentas novas reduzindo a barreira para trabalhos vetoriais criativos.
  • Obrigado. Recentemente comecei a usar um pouco de IA em outros projetos do meu trabalho principal e concordo que permitir integração com geração por IA é importante. Seria ótimo se você pudesse falar com mais detalhes sobre como gostaria de combinar IA com um editor vetorial. Eu pensei em usar IA para vetorizar e colorir bitmaps gerados por IA, mas fora isso ainda não explorei muito.
• Gostei muito dessa UX. Em um tablet Android com suporte a Wacom, a usabilidade foi muito boa. Não sei de onde veio a ideia do modo de editar splines — isto é, ajustar arrastando pontos arbitrários sobre a linha em vez de alças individuais —, mas certamente funciona bem. Minha única frustração é que a rolagem por toque não funciona na árvore à esquerda. Fora isso, está tudo muito fluido. Queria saber se atalhos de teclado já estão implementados.
  • A forma de implementar o arraste de curvas foi surpreendentemente simples. Tirei a ideia de uma discussão antiga em um fórum do Google. Se você segurar Shift e arrastar, a direção da alça também é mantida. A árvore à esquerda é difícil de fazer funcionar perfeitamente em todos os dispositivos, porque precisa suportar clique, toque, arrastar e soltar, rolagem por swipe, rolagem por toque etc., além de mostrar bem centenas de elementos, então é algo complexo. Ainda há coisas como rolagem por swipe no iOS ou pequenos engasgos, e isso já está na lista. Os atalhos de teclado, exceto no mobile, aparecem à direita de cada item ao abrir a barra de menus no desktop.
• Ao usar diretamente, minha primeira impressão foi muito boa. Estou especialmente satisfeito com a UX: a ferramenta caneta é intuitiva, o painel de objetos mostra miniaturas de cada camada, o clipping path está bem integrado e gostei de ver recursos raros como conversão de texto em contorno e operações booleanas. Como feedback crítico: seria bom ter atalhos para alternar entre ferramentas e exibi-los também nos tooltips; gostaria de poder usar Ctrl +/- para zoom e Espaço + arrastar para pan; ao editar grupos, é difícil selecionar objetos individuais dentro deles, e o duplo clique muda direto para a ferramenta de nós, então seria bom existir um modo de isolamento de grupo; durante o uso da caneta, deveria ser possível ajustar os pontos de controle do ponto anterior; no modo caneta, desfazer está incômodo porque não desfaz a adição de pontos do caminho, apenas a ação anterior a isso; o suporte a texto é limitado, fontes incorporadas como @font-face não são exibidas, e o mesmo vale para filtros; parece que a renderização SVG está sendo feita de forma independente e por isso não desenha corretamente no navegador.
  • Obrigado pelo ótimo feedback. Acho que vou ter muita issue para escrever nos próximos dias. Na verdade, quando postei no Hacker News eu só esperava 5 upvotes e 2 comentários, mas a reação foi enorme. Dá para selecionar objetos individuais dentro de grupos com Ctrl + clique. A lógica de seleção ainda não está muito refinada e pretendo melhorar mais, mas por enquanto isso deve ajudar.
• Gostei de ver tanto potencial. Como feedback rápido, a estrutura em que a barra de ferramentas aparece no topo da tela quebra um pouco a concentração e reduz a área de trabalho. Acho que uma posição mais convencional para a barra, ou na parte de baixo da tela, seria melhor. Ou então seria bom permitir mover e recolher a barra.
  • Obrigado. O design e a posição da barra de ferramentas já mudaram várias vezes. Já existe uma função para recolhê-la automaticamente quando a janela fica estreita, e adicionar um botão para recolher seria bem fácil de implementar.