One effective way to learn SVG is to start with the
<path> element. In “The SVG
path Syntax: An Illustrated Guide,” Chris Coyier writes:
It can draw anything! I’ve heard that under the hood all the other drawing elements ultimately use path anyway.
Even though I am a long-time CodePen user, I’ve built samples based on this introduction in a GitHub repo dedicated to my self-education.
Note that this introduction stays laser-focused on the
<path> element so all
viewBox attributes declare
150px squares (the use of
100px in the Guide is an error because it crops out what we see in the images).
The external SVG files are loaded with
<img> elements. In terms of falling back to a bitmap away from SVG, Sara Soueidan talks about the limitations of using
<img>. However, her general rule stands for SVG without concern for fallbacks:
Unless you’re in need of interactivity or external styling,
<img>is the standard way for loading an SVG image…
The CSS in this sample is confined to styling the
<img> container. The ‘styling’ of the SVG is done in the most primitive way: the use of
stroke-width attributes directly on
“simple shapes” and
Sara Soueidan, her number one tip in “Tips for Creating and Exporting Better SVGs for the Web” is this:
Create Simple Shapes Using Simple Shape Elements, Not
Even though the
<path> element does ‘everything,’ this tip reminds us why we have: