A method of rendering SVG to PNG from Elm

Show and Tell
1

We built a little port module to render SVG elements to PNG from within an Elm application. It’s probably not quite generic enough to be turned into a library, but maybe the general approach is useful to someone.

An example is available here: Render SVG to PNG from Elm via ports - bl.ocks.org (Gist: Render SVG to PNG from Elm via ports · GitHub)

Renderings can be requested by sending out the IDs of SVG elements. The actual rendering is done in JavaScript and the generated PNGs are passed back into the port module as base64 strings.

The rendering script takes care of:

  • Determining suitable aspect ratio
  • Rendering SVG to requested pixel size
  • Copying page styles into serialized SVG to preserve external styling

It doesn’t currently take care of any external assets referenced in the SVG or stylesheets, which would fail to load during rendering.

At Dividat we use this to persist charts into a persistable and downloadable format. Most of the implementation work has been done by @etaque.

8 Likes
2

It seems pretty exciting. I will surely try this method to render SVG to PNG and will let you know about the results.

3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.