SVG Tutorial (svg-tutorial.com)

Article summary

The article provides an SVG tutorial, covering the basics of SVG, drawing shapes, using the viewBox property, and more advanced topics such as transformations, animations, and interactions with CSS and JavaScript. The tutorial aims to help readers learn how to code images in HTML with SVG. The article includes a table of contents and links to various resources, including a tech blog, website, LinkedIn, YouTube, and CodePen. The tutorial is designed to be a comprehensive guide to SVG, with lessons and examples to help readers learn and practice their skills.

Main themes

• SVG basics
• SVG coding
• Graphical editors
• Inlining SVG
• Caching issues
• Workflow choices
• Text and image alignment
• ForeignObject tag
• SVG animations and interactions

What commenters say

• Some developers prefer to code SVG directly, while others use graphical editors like Inkscape or Illustrator and then export and clean up the code.
• Inlining SVG code in HTML can be useful for simple graphics and animations, but may not be suitable for larger or more complex images due to caching issues.
• Using SVG as a vector graphics format and a human-readable XML can be beneficial for frontend developers who also work in UX and graphics.
• Graphical editors like Boxy SVG can be useful for designing and manipulating SVG graphics, especially for those who are not familiar with coding SVG directly.
• The choice of workflow depends on whether the SVG is meant to be illustrative, quantitative, or interactive and animated.
• Some developers find it helpful to start with pen and paper and then figure out the coordinates and adjust them until the graphic looks good enough.
• ForeignObject tag can be useful for putting normal HTML inside SVG, allowing for more flexibility and ease of use.
• Aligning text and images in SVG can be challenging, and using text-anchor and foreignObject tags can be helpful in achieving the desired layout.