SVG Viewer - ferramenta para visualizar, editar e otimizar arquivos SVG

• O SVG Viewer é uma ferramenta web que permite pré-visualizar e editar código na mesma tela após enviar um SVG
• É possível realizar tarefas básicas de edição diretamente no navegador, como rotação, inversão horizontal e vertical, redimensionamento e organização do código
• O exemplo de otimização mostra o tamanho do SVG sendo reduzido de 578 bytes para 493 bytes, uma redução de -15%
• Além do download do SVG, a ferramenta também oferece caminhos de conversão para React, React Native, PNG e Data URI
• A lista de ícones e as ações de upload, cópia, download e compartilhamento ficam na mesma tela, permitindo ir rapidamente da verificação do SVG ao seu reaproveitamento

---

Edição e otimização de SVG

• SVG Viewer é uma ferramenta web para visualizar, editar e otimizar arquivos SVG
• A tela de edição mostra o código SVG e a pré-visualização juntos, permitindo verificar imediatamente o resultado das alterações no código

• Operações disponíveis

  • Rotate
  • Flip Y
  • Flip X
  • Change dimensions
  • Optimize
  • Prettify
  • Clear
  • O SVG de exemplo é exibido no tamanho 400px x 400px, e o código <svg> aparece na área de edição
  • O estado de otimização é mostrado como 578 bytes → 493 bytes, -15%

Importação e exportação

• As operações com arquivos oferecem as ações Upload, Copy, Download e Share
• Destinos de exportação ou conversão:
  • Preview
  • React
  • React Native
  • PNG
  • Data URI
• Na tela aparecem vários itens de ícones SVG, como eye-close, gps, minus, lock-line, email, battery, document, comment, home, search e wifi, além de Load More SVGs
• Também são fornecidos links de feedback, termos de uso e política de privacidade

[GN⁺]

Opiniões no Hacker News

• Uma ferramenta SVG baseada na web que uso com frequência é https://jakearchibald.github.io/svgomg/. É uma ferramenta de otimização de SVG que permite ajustar as configurações de forma bem granular

  • Acabo usando bastante https://yqnn.github.io/svg-path-editor/. Gostaria que o Inkscape fosse tão intuitivo assim ao lidar com o interior de path, e operações como conversão entre valores absolutos/relativos são especialmente convenientes
  • Para acrescentar mais uma ferramenta SVG de que gosto, há o cortador de SVG https://svgcrop.com/. Quando há uma margem grande ao redor do SVG ou elementos estranhos que dificultam centralizar, ele corta com base nos elementos visíveis
  • Esta ferramenta também é boa: https://www.softr.io/tools/svg-shape-generator
  • Uso esta ferramenta ao preparar coleções de símbolos SVG: https://daveknispel.github.io/svg2use/
  • O SVGOMG também está disponível aqui: https://svgomg.net/

• Não imaginava que isso fosse virar assunto no Hacker News no fim de semana. Somos uma pequena empresa em Vancouver, BC, e criamos ferramentas de software: https://www.checkersoftware.ca/
  Se tiverem perguntas, avisem

  • Fiquei curioso se vocês pretendem manter este web app baseado em anúncios, ou se há planos para lançar em breve uma versão pro paga com recursos adicionais
  • A maioria dos exemplos tem muitos path com longas sequências de números, então é difícil saber de imediato qual path corresponde a qual forma na imagem.
    Fiquei curioso se seria possível, ao passar o cursor sobre o código no editor, mudar temporariamente a cor ou o contorno daquele caminho, e fazer algo parecido também para seleção de texto
  • Não sou desenvolvedor React, então pergunto por desconhecimento: qual é a utilidade do recurso de exportar SVG para React?
    Há algum motivo para um desenvolvedor React usar a exportação para React em vez de inserir o SVG inline?
  • Sempre uso esta ferramenta quando trabalho com ícones

• Mexi um pouco nela e parece muito útil para quando eu algum dia tentar resolver pequenos problemas que encontro nos SVGs que uso. A UI é fácil de entender e o feedback sobre as alterações é claro, então já salvei nos favoritos.
  Alguns SVGs tinham um problema em que, durante o carregamento, alargavam a página por um instante e, pouco depois, se ajustavam ao tamanho pretendido. Tentei mexer em viewBox, width e height, mas não consegui resolver. Como dá para reduzir esse efeito inicial de esticamento?

  • O flash do SVG antes da aplicação dos estilos pode ser corrigido especificando explicitamente o viewBox (viewBox) e o viewport (width, height): https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
  • Fiquei curioso se é possível converter SVG para outro formato em tempo real mais rápido que o navegador. Do ponto de vista de um leigo, soa como inicializar um bitmap no tamanho máximo e depois fazer o parsing do SVG dentro dele

• É uma ferramenta realmente boa. Reúne muitas funções em um só lugar. Normalmente uso o phpStorm; ele não tem uma otimização no estilo SVGOMG, mas organiza bem o código.
  Seria bom ter exemplos melhores para começar a editar, e também usar outras formas básicas, não apenas path. Uma grade também seria útil.
  Por exemplo, um ícone de busca pode ser feito com um circle e uma line com o viewBox bem definido. Se você colocar a origem no centro do círculo, só precisa do raio, sem valores de x e y, e dá para fazer otimizações absurdas desse tipo.
  Um ícone de busca comum costuma vir esmagado em um path com centenas de números da NASA com seis casas decimais. Na prática, basta um único círculo definido com inteiros; não é preciso a tralha exportada pelo Adobe Illustrator.
  SVG é um meio artístico, e eu gosto muito dele. Mas parece que nem artistas nem desenvolvedores o veem assim. Por isso, a maioria dos SVGs não expressa bem o espírito do que é possível e não deixa claro que ele é mais do que um simples formato de arquivo

• SVG é realmente poderoso. Na semana passada tive um problema em que uma imagem transparente com parallax e filtro drop-shadow aparecia toda quebrada no Mac Safari e no iOS; a solução foi criar o contorno da imagem em SVG e aplicar a sombra com um filtro SVG usando feGaussianBlur.
  Sinto que ainda estou só arranhando a superfície do que é possível fazer com SVG. Tenho usado svgomg para otimização, mas esta ferramenta parece ter várias outras funções úteis

  • Comecei com um frontend desktop em Qt/QML e acabei pensando em quanto seria possível construir só com configurações parecidas com mapas de imagem SVG.
    Abrir o Jupyter junto com conexões de dados e ferramentas SVG foi uma experiência bastante reveladora
  • Embora isso provavelmente não seja viável nem na prática nem politicamente, seria ótimo se DWG, DXF, DGN fossem substituídos por SVG. Não faz sentido que desenhos 2D da indústria AEC não possam ser usados corretamente na maioria dos programas

• Uso o Inkscape e, quando falta algo, uso o Xara Xtreme ou a antiga versão gratuita para Linux.
  Mas o que significa otimizar SVG?

  • Significa remover informações desnecessárias. O Inkscape adiciona muita coisa. Por exemplo, se você exportar um SVG simples do Figma, abrir no Inkscape, salvar e depois comparar, verá a diferença

• Gosto muito deste site e já o usei incontáveis vezes. É muito útil para entender elementos SVG estranhos e verificar rapidamente o resultado

• Alguns anos atrás comprei o BoxySVG no Mac por 10 dólares; era uma ferramenta pequena e confiável.
  https://boxy-svg.com/

  • Parece que agora mudou para um modelo de assinatura. Como só preciso dele algumas vezes por ano, por 10 dólares eu teria gostado de comprar e manter para sempre. Fiz isso com o Monodraw: comprei uma vez, guardei, uso de vez em quando e ainda acho uma ótima ferramenta
  • Recomendo o Boxy como um editor SVG leve para ajustes rápidos e simples

• É meu recurso e ferramenta favoritos ao mexer com SVG. Procurei bastante, mas não encontrei nada melhor