Hyvector – editor de SVG rápido e moderno
(hyvector.com)- Em trabalhos com gráficos vetoriais, sem precisar abrir um aplicativo de desktop pesado, o Hyvector oferece um fluxo para editar e exportar SVG no navegador em poucos segundos
- Tarefas rápidas como ajustar ícones, rascunhar logotipos e limpar caminhos SVG podem ser feitas na hora, sem criar conta nem baixar um app pesado
- Todo o processamento fica no dispositivo, em uma abordagem privacy-first, com foco em inicialização rápida e baixo uso de memória
- Suporta modelagem entre formatos para texto bidirecional, sistemas de escrita complexos e caracteres conectados, como no árabe
- Depois de um desenvolvedor solo criar a base central ao longo de 5 anos, agora estão sendo adicionados recursos como cores globais, espessura de traço dinâmica e fontes variáveis sobre um motor principal já estabilizado
Fluxo de edição de SVG sem instalação
- Hyvector é um editor de SVG e gráficos vetoriais que roda diretamente no navegador
- O foco está em um fluxo de trabalho para abrir arquivos, editar rapidamente e depois exportar os gráficos
- Pode ser usado sem criar conta nem baixar um aplicativo grande
- Alguns tipos de tarefa ideais para processamento rápido são
- ajustes de ícones
- criação de rascunhos de logotipo
- limpeza de caminhos SVG
Ambiente leve e privacidade
- Pode ser executado em qualquer lugar sem instalação
- Tem como objetivo inicialização rápida e baixo uso de memória
- Usa uma abordagem privacy-first em que todo o processamento permanece localmente
Recursos de edição e estágio de desenvolvimento
-
Suporte tipográfico
- Suporta texto bidirecional completo
- Consegue lidar com sistemas de escrita complexos
- Suporta modelagem entre formatos para caracteres conectados, como no árabe
-
Ferramentas de edição vetorial
- Oferece uma visualização em árvore de elementos com arrastar e soltar
- Permite controle preciso de caminhos com base em transformações completas, incluindo inclinação, rotação e redimensionamento
- Oferece um pincel de pintura com um modo borracha poderoso
-
Projeto de desenvolvedor solo
- No início começou como um side project rápido, mas avançou por 5 anos por causa da complexidade dos gráficos vetoriais
- A base central foi concluída, e o motor principal está estabilizado
- Entre os próximos recursos estão cores globais (global colors), espessuras de traço dinâmicas (dynamic stroke widths) e fontes variáveis (variable fonts)
1 comentários
Opiniões no Hacker News
Legal. Meu projeto paralelo é uma biblioteca de renderização SVG em C++, e era difícil encontrar um bom editor de SVG
Normalmente eu acabava trabalhando no Illustrator e depois limpando o markup gerado, ou voltava para um editor baseado em texto como https://www.svgviewer.dev/
A UX é bem polida e, mesmo agora, já oferece mais recursos do que outras ferramentas que pesquisei. Para referência, meu projeto é https://github.com/jwmcglynn/donner, e um protótipo de “editor” web (por enquanto só com edição baseada em código) está em https://jwmcglynn.github.io/donner-editor/
SVG é uma área com muito potencial, mas que tem sido prejudicada por ferramentas fracas, então é bom ver novas tentativas nesse espaço
É um bom começo. Há alguns recursos claros que senti falta
A ferramenta de nós deveria tentar fazer snap entre os nós inicial/final ao editar; ao criar pela primeira vez, especialmente com a ferramenta lápis, a distância de snap poderia ser maior
Em vez de uma ferramenta de nós para edição, algo como a transformação de puxar/empurrar no estilo Flash/Futurewave SmartSketch do Wick Editor provavelmente seria muito mais amigável em dispositivos móveis
Se arredondar cantos em polígonos não funciona, isso deveria ser ocultado ou desativado
Eu queria que o Karbon, do KDE, fosse assim. É um editor de SVG amigável, mas rápido e capaz
Se possível, seria ótimo incluir também os recursos existentes no SVG Path Editor0. Por exemplo, transformar coordenadas absolutas em relativas, ou editar individualmente as linhas e curvas de cada caminho; coisas que não encontrei em outros editores
Um recurso que seria excelente ter, embora possa exigir um volume enorme de trabalho ou até virar um projeto separado, é animação
Parece bom. Não quero criticar, mas sempre achei que, em um editor, o SVG em si é o alvo no nível errado de abstração. O que se quer não é um editor de SVG, e sim um programa de desenho vetorial
Claro que ele deve renderizar para SVG otimizado, mas criar a UI/UX em torno de conceitos de SVG como paths e clip paths não é amigável para o usuário final. Isso também sempre me incomodou no Inkscape
Acho que o recurso realmente poderoso seria colocar em um editor vetorial algo como os modificadores do Blender (array, mirror etc.), permitindo edição não destrutiva
A primeira exceção são os clip paths, que no Hyvector são tratados como paths com traço, preenchimento e conteúdo recortado fora desse path. Lidar com clip paths em SVG é bem trabalhoso e pouco intuitivo
Se eu puder continuar desenvolvendo, recursos como arredondamento de cantos de paths, operações booleanas não destrutivas, largura variável de traço, múltiplos preenchimentos e distorção devem vir em seguida
Porém, quero manter SVG como formato de exportação. Ele é muito bom para a web e pode ser estilizado com CSS. Por isso, os efeitos precisam poder ser exportados como SVG real, e quero evitar a abordagem de alguns editores que colocam bitmaps falsos dentro do SVG ao exportar. Por exemplo, gradiente cônico não existirá até que o SVG venha a suportá-lo algum dia
Tentei editar este ícone para colocar a seta no centro do círculo, mas, como a máscara não foi reconhecida corretamente, só apareceu um círculo preto
http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
height="20" viewBox="0 0 20 20" stroke-width="2" stroke="black">
Para esse ícone, um clip path pode ser mais adequado que uma máscara. Se quiser criar um ícone com o mesmo formato, basta pegar os elementos dentro da máscara, colá-los no Hyvector e trabalhar a partir daí
Muito bom. Gosto de editores baseados na web
Gostei de ver que todos os objetos e grupos em SVGs importados aparecem claramente, com pré-visualização correta
Há dois recursos que senti falta ou não encontrei. Gostaria de saber se existe uma forma de converter linhas em formas, e se é possível editar manualmente o código SVG em tempo real. Talvez sejam recursos nichados demais para usuários comuns, mas algumas tarefas, como preenchimentos, são muito mais fáceis de editar em código do que com ferramentas visuais
Também tenho curiosidade se há possibilidade de torná-lo open source
Gostei muito da UX. Ele também é bem utilizável em um tablet Android com suporte a Wacom
Não sei se o modo de editar splines — isto é, poder arrastar qualquer ponto da linha em vez de ajustar handles individuais — foi criado por vocês ou veio de outro lugar, mas gostei muito
A única coisa que notei foi que a rolagem por toque não funciona na árvore à esquerda; fora isso, é muito fluido. Também fiquei curioso para saber se atalhos de teclado já foram implementados
Manter Shift pressionado durante o arrasto para preservar a direção dos handles também funciona
A árvore à esquerda é difícil de acertar em todos os dispositivos. Ela precisa suportar clique, toque como clique, arrastar e soltar, rolagem por swipe, rolagem por toque etc., e ao mesmo tempo se comportar como se pudesse conter centenas de elementos. Ainda há problemas como a rolagem por swipe no iOS e algumas travadinhas, mas já coloquei na lista
Atalhos de teclado estão implementados em dispositivos que não são móveis. Ao abrir um menu na barra de menus, os atalhos aparecem à direita dos itens
Não consegui descobrir como usar. Criei um segmento de linha, mas não encontrei como movê-lo ou redimensioná-lo, embora os handles de arrasto tenham aparecido
Também não sei como criar outras formas, como retângulos ou círculos. Apertei quase todos os botões visíveis umas vinte vezes, em várias ordens, mas na maior parte nada acontecia
Legal. Espero que este projeto dê certo
Como feedback de primeira impressão, eu sugeriria abrir logo de início um documento vazio e sem título, pronto para brincar, e talvez deixar selecionada como ferramenta inicial alguma coisa divertida, como o lápis Bézier
Eu estava motivado o bastante para sair clicando por aí, perceber que não havia documento aberto, criar um novo documento, trocar de ferramenta e começar a brincar, mas muitos usuários não farão isso. Especialmente o fato de não haver um documento aberto parece ser o maior obstáculo
Parece um detalhe pequeno, mas seria bom deixar a tela padrão um pouco maior. Por exemplo, algo como um quadrado de 512 ou 500. Ao experimentar uma ferramenta nova, realisticamente as pessoas só dão os primeiros 10 a 20 segundos; se você não as prender nesse tempo, elas simplesmente vão embora e você perde muitos usuários
Parece muito bom, obrigado por compartilhar
Mesmo depois de criar um novo documento e tentar usar o lápis, nada acontecia. No fim, não consegui descobrir como usar
Com a ferramenta Bézier consegui adicionar alguns nós, mas não consegui manipulá-los com nenhuma ferramenta. Será que o arrasto está completamente quebrado no Chrome/Windows?
É bom e vejo bastante potencial. Como feedback simples, colocar uma barra de ferramentas flutuante na parte de cima distrai e consome a área real de desenho
Eu preferiria uma barra de ferramentas comum ou posicionada na parte inferior do canvas. Ou então que ela pudesse ser movida ou recolhida