WILT: SVG for pie charts


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

    2    ...
    3    <title>tooltip</title>
  • 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.