Tutorial de SVG

 (svg-tutorial.com)
6 pontos por GN⁺ 2023-12-08 | 1 comentários | Compartilhar no WhatsApp
  • Material de estudo de SVG para desenhar imagens diretamente em código dentro do HTML, permitindo acompanhar o aprendizado passo a passo, das formas básicas até a interatividade
  • O fluxo de aprendizado começa com elementos básicos como viewBox, polygon e polyline, e se expande para path, curvas Bézier e arco
  • A parte de transformações aborda rotação, deslocamento, reutilização, escala e transformações gerais, e a parte de CSS conecta animações, hover, animação baseada em caminho e SVG inline em CSS
  • Nos tópicos avançados, cobre texto, clip-path e gradientes, e com JavaScript propõe exercícios práticos como um relógio que mostra a hora real, interatividade, diagramas orientados por dados e decomposição em múltiplos componentes
  • Também oferece links de editores para line, circle, rect, polyline, polygon, text e para curvas Bézier quadrática/cúbica e arco, para experimentar cada elemento imediatamente

Estrutura do tutorial

Elementos SVG e segmentos de path para prática

Leituras relacionadas

1 comentários

 
GN⁺ 2023-12-08
Opiniões no Hacker News

  • A combinação SVG + React é subestimada. Dá para usar a abstração e o poder do React como eles são, mas renderizando gráficos arbitrários em vez do DOM; para alguns usos, como renderizar grafos ou charts, acho muito melhor que Canvas.
    É especialmente boa quando você não precisa de algo graficamente complexo, como manipulação pixel a pixel, e quer só um pouco de interatividade. Para criar um efeito de hover no Canvas, é preciso calcular manualmente sobre qual elemento o mouse está, o que dá trabalho; no SVG, basta usar recursos nativos como onmouseover.

    • Exato. O fato de poder adicionar click listeners ao SVG e estilizar com CSS como HTML comum às vezes parece mágica, e React / JSX tornam isso fácil de usar.
    • Existe algum bom material introdutório sobre esse tema? Também sou praticamente iniciante em React, mas parece algo bem divertido de explorar.
      Seria ótimo ter algum exemplo funcional que desse uma direção ou inspiração.
    • Já usei Preact.js e SVG no cliente para criar um componente de segmentação de imagem + tagging, e ficou muito bom. Eu recomendaria para esse tipo de aplicação.
    • Sim. Há muitos casos em que HTML Canvas tem desempenho muito melhor, mas, se você não está criando o próximo Figma, trabalhar com SVG é muito mais conveniente.
    • Estou codando padrões para cortar com a GlowForge usando React & SVG, e funciona muito bem.

  • No geral, é um material excelente, e os exemplos são realmente claros. Mas, na seção de clip-path, o código sugerido acaba descrevendo o círculo grande duas vezes; se quiser mudar o tamanho do círculo, é preciso alterar em dois lugares.
    Como defs já está sendo usado, acho melhor escrever de forma a reutilizar a mesma definição.

    • Nem é preciso ter o segundo elemento; basta renderizar o círculo normalmente e referenciá-lo dentro de clipPath.
      Pessoalmente, eu também removeria o wrapper com <g>. Nunca entendi o motivo de recomendar essa estrutura, e ela não parece trazer benefício, exceto em casos extremamente raros em que você quer colocar ali elementos que seriam renderizados se não estivessem dentro de <defs>. Em situações como defs/circle do exemplo, normalmente o correto é usar <symbol>.
    • Faz sentido, e é uma boa ideia. Talvez eu acrescente uma nota relacionada.

  • Muito legal. SVG é um formato limpo e flexível, e tem relação direta com um side project em andamento, então pretendo reservar um tempo para acompanhar o tutorial.
    Assim como outras pessoas, achei bem divertido criar componentes React baseados em SVG. React e JSX facilitam adicionar interações, e SVG permite criar UIs que não seriam fáceis de fazer apenas com HTML.
    Já publiquei um componente React que renderiza um Circle of Fifths interativo para um side project de teoria musical. Ainda há muita coisa a fazer, mas ele já está utilizável: https://github.com/epiccoleman/react-circle-of-fifths
    Também escrevi um post sobre o processo de criar um Circle of Fifths em SVG, e gosto especialmente das partes intermediárias de explicação que acompanham o desenho de elementos complexos: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    Agora estou criando um gerador de diagramas de braço de guitarra de forma parecida, e é útil poder voltar ao post antigo como referência. Uma das coisas boas de registrar o trabalho em texto é poder “reproduzir” como você resolveu o problema.

  • Gostei deste material. Fiz alguns SVGs inline no React e adicionei interações, e é muito divertido brincar com isso.
    A tag <foreignObject> é especialmente útil. Ela permite colocar HTML comum dentro do SVG, então dá para lidar, dentro de um projeto de arte em SVG, com coisas que o HTML faz melhor, como links, imagens e estilização básica com flexbox.
    Para acrescentar ao autor: alguns links do site não estão funcionando. O bio.link no rodapé da página e o link para a demo interativa de curva de Bézier em Day 11, “How to Draw Quadratic Bézier Curves with SVG”, estão fora do ar.

    • Corrigi o link da demo interativa. Como aquele site provavelmente foi feito com Vue, parece que deep links nem sempre funcionam bem.
      Do lado do bio.link, não vejo problema; fico curioso para saber qual erro aparece para você.
    • Na página https://svg-tutorial.com/svg/transform, o link “next example” no rodapé também aponta para /svg/path e dá 404; o link correto parece ser /svg/use.
    • Sempre tem alguma coisa quebrada. Vou verificar.
      Eu também não conhecia foreignObject, e é realmente ótimo.

  • Alguns anos atrás, enquanto trabalhava em uma interface, eu estava usando SVG para parte dos gráficos. Havia dois esquemas de cores, mas um dos gráficos existia só em um deles, então fui até o outro lado do corredor para pegar os códigos hex da outra cor.
    Fiquei muito surpreso ao ver o designer abrir o arquivo SVG e simplesmente localizar e substituir todas as cores para criar a segunda versão.

    • Isso nunca tinha me ocorrido. É uma dica excelente que pode economizar muito tempo algum dia.
    • Interessante; você poderia explicar melhor a parte de “fui até o outro lado do corredor para pegar os códigos hex da outra cor”?

  • Excelente. Gostei especialmente dos exemplos de curvas e clipping, que ainda acho difíceis.
    Pessoalmente, prefiro path, porque dá para fazer quase tudo com ele e é menos verboso do que outras abordagens.
    Venho aprendendo isso há bastante tempo, mas sinto que ainda há muito a aprender. Como desenho muito mal e também não gosto muito de imagens, fiz um side project inteiro em SVG por conveniência e desempenho.
    Depois de ver o material de hoje, acho que vou ter que refatorar bastante coisa: https://eddiots.com/1

    • Fico feliz que tenha ajudado. O quadrinho também é ótimo.

  • Agradeço pelo bom feedback, e corrigi alguns dos erros que apontaram. Se ainda houver algo que não funcione, seria bom me avisarem. Ainda estou fazendo alguns ajustes finais
    Por exemplo, alguém sabe por que a prévia da miniatura no Twitter não funciona? Nas subpáginas funciona bem

  • Muito bom. O problema com que estou brigando agora é texto + imagem, então seria ótimo ter um ou dois exemplos relacionados
    Alinhamento é uma baita dor de cabeça. Também tentei usar o Inkscape, mas, para fazer o que preciso, definitivamente fica mais perto de “escrever XML na mão”

    • Não experimentei muito com texto, exceto exemplos de fazê-lo acompanhar uma linha
      Conheço text-anchor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      E alguém sugeriu que a tag foreignObject poderia ser útil aqui: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • Texto é mesmo trabalhoso. Fiz às pressas um código Python com svgwrite para gerar uma tabela, e posicionar o texto onde eu queria foi um inferno
      No fim, ajustei vários valores meio no olho e encerrei com um “isso é bom o suficiente”. Concordo com o pedido por exemplos de posicionamento de texto não trivial
      [0] O link do GitHub está no perfil
    • O recurso de alinhamento do Inkscape funciona bem para mim. Quando preciso de mais precisão, aperto ctrl+shift+x e digito as coordenadas diretamente
      O editor XML do Inkscape trava com bastante frequência no meu ambiente, mas, se eu me lembrar de salvar a cada edição, dá para usar

  • Como normalmente se faz? As pessoas codificam SVG diretamente ou desenham em algo como o Figma e depois geram um arquivo SVG?

    • Como fui formado como designer gráfico, normalmente eu desenhava diretamente no Inkscape ou importava de outros programas
      Foi preciso bastante trabalho para reduzir o tamanho dos arquivos de http://shapeoko.github.io/Docs/ a um nível razoável
      Mais tarde, também criei um mecanismo em que clicar na imagem a abre em uma nova janela: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      E consegui fazer com que, ao clicar no nome de uma peça na lista de peças, a peça correspondente fosse destacada no diagrama
    • O pessoal de design provavelmente usa seu editor preferido, como Illustrator, Sketch ou Inkscape. Programadores também conseguem fazer pequenas alterações com esses softwares, mas, quando há interação, normalmente editam o SVG diretamente
      Formas ou curvas complexas às vezes coloco em um editor online para visualizar, e esta ferramenta é boa: https://yqnn.github.io/svg-path-editor/
    • Para gráficos mais complexos, ainda deve ser melhor usar ferramentas de design. Mas gráficos simples podem ser codificados diretamente
      Se você precisa de uma seta ou de um ícone de menu hambúrguer, dá para ir direto para o código. Às vezes começo com papel e caneta e depois ajusto as coordenadas até ficar bom o suficiente
    • Com novos modelos vetoriais baseados em transformers, como o da Adobe, gerar SVG ficará mais fácil do que nunca: https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • Nos projetos em que trabalhei, eu criava ou editava os arquivos no Inkscape e depois os vinculava como imagens comuns
      Às vezes uma página estática específica precisava de um gráfico próprio, então eu o incorporava na página, mas nesses casos o gráfico não era muito complexo

  • Uma coisa de que me dei conta recentemente foi que, dentro de uma aplicação React, é possível colocar tags SVG inline como tags JSX
    Não sei se isso é exatamente suporte de primeira classe ou se é o Webpack que trata disso, mas em alguns casos é muito bom sentir que você está criando um componente SVG com lógica. Agora dá para alterar a forma, as cores, omitir algumas seções etc. do SVG com lógica baseada em React

    • É bom quando é um SVG simples ou quando você precisa de muitas variações
      Mas, se você coloca o código SVG inline, o navegador não consegue cachear a imagem. Se o SVG for grande ou houver apenas algumas variações, talvez seja melhor ter um endpoint separado para cada variação da imagem
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • Isso mesmo. Desde o HTML5 é possível inserir SVG inline, e não é preciso nada como Webpack. Simplesmente funciona
      Um dos exemplos deste tutorial também é um diagrama baseado em dados gerado no React. Combinando os dois, dá para fazer coisas bem legais