Looking to use inline SVG as a background-image for another element? Check out this example that currently only works in Chrome. If you need an alternative method, take a look at the simpler inline SVG from the RaphaelJS demo here.
<svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.90625px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><rect x="0" y="0" width="640" height="480" r="10" rx="10" ry="10" fill="#ffffff" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><circle cx="320" cy="240" r="60" fill="#223fa3" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 0.5;" stroke-width="80" stroke-opacity="0.5"></circle></svg>
Is it possible to convert client-drawn inline SVG (created by RaphaelJS) on the server to a "real" SVG file in a Windows (.NET/c#) environment?
Edit
After some feedback, I've updated the code to include charset= and used the correct function (encodeURIComponent) when encoding the inline SVG. Here's the revised code snippet:
var svgUrl = 'url("data:image/svg+xml;charset=utf8,' + encodeURIComponent($('#raphaelPaper').html()) + '")';
$('#pictureDummy').css('background-image', svgUrl);