Magical SVG Techniques
Great article and great collection of links!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  element, which lets one define shapes anywhere in an HTML page, and reuse them anywhere else (ie, not inside the same SVG).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.Used shapes can also be transformed: different colors for fill or stroke, scaled up or down, rotated, moved, etc.> Good news, you can achieve fractional ratings with only CSS and inline SVG. Samuel Kraft explains how it works.The technique presented in that other page is overly complex and convoluted.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:    
      
        
        
      
        
        
        
      
      

In order to change the fill one just needs to manipulate the offset attribute of the first stop.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.