SVG really are not scary.
Doing some icons for this blog, I just try to find some icons online and use it. But sometimes the icons I like are not royalty-free, or sometimes I just cannot find any icon I liked at all.
So I think I should make icon myself. The thing is that I think most graphics editor are not suitable to make small, 16x16 icons. Since SVGs are vector graphic, most editor don’t bother to snap to grid, which make displaying at low resolution pretty bad. Also, I think they output necessarily complicated SVG code.
And so an idea come up to me. I know lines. I know arcs. I know quadratic and Bézier curves. So why not just code the SVG manually?
The most complicated path of SVG markup is the d attribute. Once you master the d attribute, as documented on MDN, most other thing are easy.
For example, this is a flag SVG I code in like, 3 minutes?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M2,16L2,3A1 1 0 0 1 4,3L14,3 14,10 4,10 4,16" />
</svg>
And here is it rendered:
That’s it!
It also enabled you to do many decoration easily as you can use SVG as CSS Mask, etc. to do things like this:
This is a <hr> tag that has been styled to have SVG of three triangles as a background image. Since it’s SVG, it’s vector and infinitably scalable.
The main point is: you should try coding SVG by hand. It’s easier than you think and can produce really clean code.