Magical SVG Techniques
Great article and great collection of links!<p>I have taken up coding simple SVG icons by hand, and it's easier than it looks. Also, a great feature of SVG is the <defs> element, which lets one define shapes anywhere in an HTML page, and reuse them anywhere else (ie, not inside the same SVG).<p>So for example one can have an SVG element at the top of the page that lists a bunch of symbols in a global defs element, and reuse them at will some other places, without loading anything externally, or copy-pasting anything.<p>Used shapes can also be transformed: different colors for fill or stroke, scaled up or down, rotated, moved, etc.<p>> <i>Good news, you can achieve fractional ratings with only CSS and inline SVG. Samuel Kraft explains how it works.</i><p>The technique presented in that other page is overly complex and convoluted.<p>Fractional stars can be done very simply in pure SVG with gradients. Here's an example of a grey star filled at 40% with red:<p><pre><code>    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 60 60">
      <defs>
        <polygon points="30,0 10,60 60,22 0,22 50,60" id="star"/>
        </defs>
      <linearGradient id="gradid">
        <stop offset="40%" stop-color="red"/>
        <stop stop-color="grey"/>
        </linearGradient>
      <use href="#star" fill="url('#gradid')"/>
      </svg>
</code></pre>
In order to change the fill one just needs to manipulate the offset attribute of the first stop.<p>If there are many stars it can be tiresome to attach a different gradient to each star; what I do in that case is define 8 gradients from 10% to 90% fill, and reference them as needed for each object that needs to be filled to approx. that percentage.