At IndieWebCamp Nürnberg this weekend, Jeremy added sparklines for his site's posting frequency. To do this he used Stuart's SVG sparkline generator (improving on previous efforts). Here's an example: A 100-point sparkline. I'm enough of an SVG fan to have made svgur.com to share them, so I was intrigued by this. I like the clarity of the data points being in the URL, but looking at the generated SVG, that clarity had gone. The point sequence `59,80,80,100` becomes instead > ` <line x1="0.49504950495049505%" x2="0.49504950495049505%" y1="39.1578947368421%" y2="39.1578947368421%" stroke="rgba(0,0,0,0.5)" stroke-width="1"/> <line x1="0.49504950495049505%" x2="1.4455445544554455%" y1="39.1578947368421%" y2="17.05263157894737%" stroke="rgba(0,0,0,0.5)" stroke-width="1"/> <line x1="1.4455445544554455%" x2="2.396039603960396%" y1="17.05263157894737%" y2="17.05263157894737%" stroke="rgba(0,0,0,0.5)" stroke-width="1"/> <line x1="2.396039603960396%" x2="3.3465346534653464%" y1="17.05263157894737%" y2="-4%" stroke="rgba(0,0,0,0.5)" stroke-width="1"/> ` You can see that the original data has been transformed with high precision into percentages, and that each datapoint occurs twice as the start and end of a line. This made me wonder if the SVG could use the datapoints directly, as it is after all a sequence of co-ordinates. So I adapted the code to generate a `polyline` directly, giving: The same 100 points in a sparkline. Now the points `59,80,80,100` becomes a clearer > ` <polyline points="0,59 1,80 2,80 3,100" stroke="rgba(0,0,0,1)" stroke-width=".5%" fill="none" transform="matrix(1 0 0 -1 0 105)" />` Indeed, the whole line now looks like this: > `<polyline points="0,59 1,80 2,80 3,100 4,68 5,62 6,87 7,72 8,42 9,49 10,58 11,53 12,57 13,51 14,42 15,32 16,37 17,30 18,24 19,38 20,57 21,29 22,18 23,32 24,38 25,24 26,24 27,24 28,20 29,21 30,29 31,32 32,26 33,18 34,32 35,36 36,30 37,36 38,29 39,32 40,29 41,28 42,41 43,20 44,28 45,58 46,18 47,24 48,16 49,17 50,22 51,17 52,22 53,21 54,12 55,22 56,14 57,13 58,11 59,20 60,16 61,16 62,18 63,12 64,28 65,28 66,32 67,16 68,16 69,24 70,16 71,20 72,14 73,18 74,12 75,26 76,17 77,11 78,30 79,16 80,9 81,20 82,42 83,13 84,13 85,24 86,17 87,13 88,20 89,12 90,14 91,13 92,14 93,71 94,82 95,20 96,16 97,20 98,22 99,17 100,5" stroke="rgba(0,0,0,1)" stroke-width=".5%" fill="none" transform="matrix(1 0 0 -1 0 105)" />` With the datapoints directly readable, and not changed to arbitrary precision. To make this work, I had to do a little bit of mathematical trickery. I set the `viewBox` of the SVG to the bounding box of the co-ordinates (in this case `viewBox="0 5 100 95"` where 0 is the lowest x value, 5 the lowest y value, 100 the width and 95 the height) and set the `stroke-width` as a percentage of the viewport, so it isn't dependent on the scale of the datapoints. So far so good, except that SVG co-ordinates go down the page, not up, so the sparkline is upside down. I need to invert the y axis. But if I do that, the line is outside the bounding box. So we need to move the line back into the frame by adding the height plus twice the lowest y value. Here's the javascript that does that: ` var height = mx-mn; var width = x-1; var offset = height+mn*2; // flip co-ordinates and move back into frame ln.setAttribute("transform","matrix(1 0 0 -1 0 " + offset +")"); svgRoot.appendChild(ln); svgRoot.setAttribute("viewBox","0 " + mn +" "+ width + " " + height); svgRoot.setAttribute("preserveAspectRatio","none"); ` Now, I could just set the y value of the viewBox to `-(height+mn*2)` but I think that this is clearer. Like Stuart's original, to use these dynamically you need to use `<embed>:` rather than `<img>:` eg > `<embed src="http://kevinmarks.com/sparkline.svg?2,0,1,1,4,6,9,6,5,0,1,2,5,2,2,3,4,5,2,2,2,3,6,3,5,3,7,6,5,2,3,2," width="200" height="15">` See IndieNews