Embedding SVG with Javascript
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.
Our HTML:
<!doctype html>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('lib/main');
</script>
<body>
<div id='my-svg' data-remote-svg-uri='/my-doc.svg' data-remote-svg-class='little-red'></div>
</body>lib/main.js:
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); });lib/style.css:
.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 ... -->
</svg>If you need to load SVGs from remote URLs, or just want to embed and style SVGs in the browser, check out RemoteSvg.
Written by James Martin
Related protips
Have a fresh tip? Share with Coderwall community!
