Embedding SVG with JavaScript

25 Feb 2016

Some time ago, I wrote about embedding and styling SVG documents in Rails. That humble snippet of Ruby has since become a full-fledged Rails helper gem (inline_svg), which knows about the Asset Pipeline and can be extended with custom SVG transformations.

One thing inline_svg can’t do is embed SVG documents from remote URLs. So I made a little Javascript module (ES6!) to do just that. It’s called RemoteSvg and it got its first real usable release (v0.1.0) recently.

Here’s a really quick demonstration of the library in action.


<!doctype html>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

  <div id='my-svg' data-remote-svg-uri='/my-doc.svg' data-remote-svg-class='little-red'></div>


import './style.css!';
import {RemoteSvg} from 'remote-svg';

new RemoteSvg(document.getElementById('my-svg'))
.then(function() { console.log('SVG loaded...'); })
.catch(function(err) { console.log('Something went wrong: ' + err); });


.little-red {
  width: 5em;
  height: 5em;
  fill: red;

And the resulting, transformed SVG, loaded asynchronously from a remote URL:

<svg id='my-svg' class='little-red'>
  <!-- svg data ... -->

If you need to load SVGs from remote URLs, or just want to embed and style SVGs in the browser, check out RemoteSvg.