MEGA TRICK: SVG in Coda (one step away from generated charts and mind maps!)

Showcase Tips and Hacks
19

To put shortly, I’m simply leveraging standard browser functionality.

  • Coda translates function Image(url) directly into <img src="url" … />. Well, it removes whitespaces, but nothing beyond that.

  • Browsers support Data URI — i.e. capability where instead of resource link (URL) you’re providing the data encoded right there. You may have encountered this with Base64 mostly.

  • So the task was ultimately to compose data URI to feed to the Image tag that would be rendered as a valid image. SVG is a text format (i.e. easy to compose by simply concatenating strings and filling in parameters with Format(), so it was an obvious first choice.

  • Since Coda strips out spaces from the data URI and SVG needs them, I went with URI encoded format. Since Coda’s own EncodeForUrl() was far too eager and encoded more than it should have (and the output wasn’t rendering at all), I kinda implemented my own.

  • In the very end, I’m composing SVG elements out of data rows, concatenating them together, URI encoding, prepending with data:image/svg+xml;, and feeding to Image()

1 Like