Tutorial de SVG

Resumo do tutorial de SVG

• Um tutorial de SVG criado por Hunor Márton Borbély, no qual é possível aprender passo a passo como programar imagens SVG, começando por formas básicas até animações complexas.
• Aborda diversos temas, como desenho de formas básicas, árvore de Natal, boneco de biscoito de gengibre e construção de uma casa, além de apresentar vários recursos do SVG, como clip-path, gradientes, curvas de Bézier e desenho de texto ao longo de um caminho.
• Também inclui maneiras de combinar SVG com outras tecnologias, como desenhar um relógio com JavaScript, adicionar interações a elementos SVG e gerar diagramas SVG com JavaScript.

Opinião do GN⁺

• Este tutorial é um ótimo material para que engenheiros de software iniciantes aprendam de forma estruturada, dos fundamentos às técnicas avançadas de programação de imagens SVG.
• Em especial, ele inclui exemplos práticos, como criar um relógio que mostra a hora real e adicionar interações a elementos SVG, o que deve proporcionar aos estudantes uma experiência muito útil e interessante.
• Para quem deseja aprender SVG, este tutorial pode ser um material de estudo atraente para ampliar a compreensão sobre design gráfico para a web e melhorar a capacidade de adicionar elementos visuais originais às páginas web.

[GN⁺]

Comentários do Hacker News

• A combinação de SVG com React é subestimada. Dá para aproveitar todos os recursos e abstrações do React e renderizar gráficos arbitrários em vez do DOM. Já usei para renderizar gráficos e charts e, em certas situações, supera o Canvas. Por exemplo, é útil quando você precisa de interações simples, mas não de gráficos complexos com manipulação em nível de pixel.
• SVG é um formato flexível, e vale a pena dedicar tempo para aprendê-lo por meio de tutoriais como este. Combinando SVG com componentes React, é possível criar UIs incríveis que seriam difíceis de implementar apenas com HTML.
• Usei um componente interativo de "Circle of Fifths" feito em React em um projeto paralelo de teoria musical. O componente está disponível para uso, e o post do blog sobre o processo de construir um Circle of Fifths com SVG é útil.
• No exemplo de uso de <clip-path> em SVG, definir o círculo grande duas vezes é ineficiente. Como é preciso alterar ambos os lugares ao mudar o tamanho, se você já está usando defs, é melhor definir o círculo uma vez só e reutilizá-lo.
• Escrever SVG inline com SVG e React é divertido, e a tag <foreignObject> permite usar SVG dentro de HTML, o que é útil para tarefas em que o HTML faz melhor, como links, imagens e estilização básica com flexbox.
• Alguns anos atrás, ao usar SVG em um trabalho de interface, surpreendi o designer ao simplesmente localizar e substituir os códigos de cor dentro do arquivo SVG para criar dois esquemas de cores.
• Agradece pelo feedback positivo sobre o tutorial e corrige os erros encontrados. Ainda está ajustando detalhes e, por exemplo, quer saber se alguém sabe por que a prévia de miniatura no Twitter não está funcionando.
• Há uma pequena implicância com o termo "tag" de SVG. Quando comecei com HTML, eu chamava tudo de "tag", mas depois que o XHTML apareceu, passei a chamar de "elemento". Ainda penso em "tag", mas agora digo "elemento".
• Gostei especialmente dos exemplos sobre curvas e clipping. Prefiro path, porque dá para fazer quase tudo com ele e ele é menos verboso do que outras abordagens. Como não sou bom em desenho e não gosto de imagens, construí um projeto paralelo inteiro em SVG por desempenho e praticidade. Este tutorial me fez perceber que há muita coisa para refatorar.
• Gostaria de ver exemplos usando texto e imagens juntos. Estou lutando com esse problema agora, e alinhamento é uma questão complicada. Já usei Inkscape, mas acabo mais para o lado de escrever XML para gerar o que preciso.
• Fico curioso se codificar SVG diretamente é uma prática comum, ou se o mais normal é, por exemplo, desenhar no Figma e gerar um arquivo SVG.