Using JS Bin as an SVG playground

Some days I love the web more than other days. The other day, I had an idea for a feature request for JS Bin. A quick Twitter exchange with Remy and a filed issue on Github, and boom; the feature exists a day later. Now you can use the HTML panel on JS Bin to act as a source for SVG files! I'll explain below.

Try this on for size:

  1. Create a bin on jsbin.com
  2. Enter your SVG source into the HTML panel
  3. Create a new bin
  4. Request the first bin from the second in an <img>, <iframe> or <object> tag, or as a CSS background-image, but with .svg appended to the URL.
  5. Profit!

JS Bin is my weapon of choice when it comes to creating code snippets in HTML, CSS or JavaScript that are instantly accessible on the open web — making it really fast to test stuff in different browsers. It has a nice clean design and loads of features. Lately I’ve been using it to play around with SVG, trying to get a grip on the various sizing issues and other features of the language and format in general.

In trying different combinations of viewBox, preserveAspectRatio, width, and height attributes etc on the SVG files, I had to save and upload each test file to my own Web host and reference them in the bins I was creating. I wondered if there was something like JS Bin, but for SVG, but couldn’t find anything.

JS Bin implemented this now, so you just request a bin with .svg appended to the URL and get the contents of the HTML panel back, with the Content-type correctly set to image/svg+xml. A simple change, but massively helpful. Huge thanks to Remy & Fabien.

Tiny word of warning: it seems likely that a (regression?) bug currently in Blink messes with the Output panel when using the <object> tag—the generated <object> element doesn’t actually seem to fire off the request to the file specified in the data attribute. It does work when viewed in stand-alone mode though.