WILT: SVG for pie charts

Learnings

• Titles can be included in paths by adding a title element to a path e.g.

  1<path>
  2    ...
  3    <title>tooltip</title>
  4</path>
  

• Patterns can be a complete SVG. e.g.

  1<pattern id="pattern-0" patternUnits="userSpaceOnUse" width="10" height="10">
  2        <image xlink:href="data:image/svg+xml;base64,PHN2Zy[...]"></image>
  3    </pattern>
  

  • If the pattern image doesn't load (due to strong CSP for example) it won't fall back to a color tag. Darnit.

• Cool way to get variables into the SVG is via the Querystring in a JSON object. e.g. (assuming JSON object only thing after ?)

  1<object data='/blog/media/2020/01/graph.svg?{"one":1,"two":2,"twenty":20","nine":9}' type="image/svg+xml"></object>
  

  1let search = location.search.substr(1),
  2    data = JSON.parse(decodeURIComponent(search))
  

• http://iros.github.io/patternfills/ is a cool site for ye-olde style black-n-white hatches as were used before colour printing in manuals etc.