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:
- Create a bin on jsbin.com
- Enter your SVG source into the HTML panel
- Create a new bin
- Request the first bin from the second in an
<object>tag, or as a CSS
background-image, but with
.svgappended to the URL.
In trying different combinations of
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.