This code takes an existing svg element and rasterizes it with canvas.
The problem is that in webkit the namespaces for href's are not captured in the serialization, they should be "xlink:href=..." but instead are just "href=" The same problem happens with the xmnls:xlink= losing its "xmnls".
To get around this I run a regular expression on the svg if it's in webkit. This isn't necessary in firefox.
xxxxxxxxxx<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style> #svg { position: absolute; top: 10px; left: 10px; } #svg_desc { position: absolute; top: 210px; left: 10px; } #canv { position: absolute; top: 10px; left: 220px; } #canv_desc { position: absolute; top: 210px; left: 220px; } </style> </head> <body> <svg id="svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="200" height="200"> <!-- man and woman icons from thenounproject.com --> <defs> <g id="man"> <circle cx="18.118" cy="8.159" r="8.159"></circle> <path id="path" d="M8.472,95.426c0,2.524,2.05,4.574,4.574,4.574c2.529,0,4.576-2.05,4.576-4.574l0.004-38.374h2.037L19.65,95.426 c0,2.524,2.048,4.574,4.574,4.574s4.573-2.05,4.573-4.574l0.02-66.158h2.006v24.38c0,4.905,6.398,4.905,6.384,0v-24.9 c0-5.418-3.184-10.728-9.523-10.728L9.396,18.012C3.619,18.012,0,22.722,0,28.599v25.05c0,4.869,6.433,4.869,6.433,0v-24.38h2.048 L8.472,95.426z"></path> </g> <g id="woman"> <circle cx="22.925" cy="8.164" r="8.164"/> <path d="M29.775,18.047c5.697,0,8.008,4.695,8.871,7.283l6.999,23.008c1.396,4.949-4.899,6.998-6.4,2.175l-6.298-21.125h-1.833 L42.03,66.966H31.973v29.296c0,4.996-7.514,4.971-7.514,0V66.774h-3.063l0.005,29.447c0,5.037-7.545,5.037-7.545,0l-0.002-29.255 H3.765l10.831-37.578h-1.694l-6.299,21.2c-1.5,4.621-7.85,2.724-6.396-2.228L7.2,25.33c0.749-2.625,3.045-7.283,8.795-7.283H29.775z "/> </g> </defs> <rect width="100%" height="100%" fill="#e3e3e3"></rect> <use xlink:href="#man"></use> <g id="woman" fill="#ff0000" transform="translate(100,0)"> <circle cx="22.925" cy="8.164" r="8.164"/> <path d="M29.775,18.047c5.697,0,8.008,4.695,8.871,7.283l6.999,23.008c1.396,4.949-4.899,6.998-6.4,2.175l-6.298-21.125h-1.833 L42.03,66.966H31.973v29.296c0,4.996-7.514,4.971-7.514,0V66.774h-3.063l0.005,29.447c0,5.037-7.545,5.037-7.545,0l-0.002-29.255 H3.765l10.831-37.578h-1.694l-6.299,21.2c-1.5,4.621-7.85,2.724-6.396-2.228L7.2,25.33c0.749-2.625,3.045-7.283,8.795-7.283H29.775z "/> </g> </svg> <p id="svg_desc">SVG</p> <canvas id="canv" width="200px" height="200px"></canvas> <p id="canv_desc">Canvas</p> <script type="text/javascript"> function importSVG(sourceSVG, targetCanvas) { // https://developer.mozilla.org/en/XMLSerializer var svg_xml = (new XMLSerializer()).serializeToString(sourceSVG); //The serialized SVG console.log(svg_xml) //Need to deal with weird serializations problem in webkit if($.browser.webkit) { //WebKit svg_xml = svg_xml.replace(/ xlink/g, ' xmlns:xlink') svg_xml = svg_xml.replace(/ href/g, ' xlink:href') } //The cleaned SVG //console.log(svg_xml) var ctx = targetCanvas.getContext('2d'); // this is just a JavaScript (HTML) image var img = new Image(); // https://en.wikipedia.org/wiki/SVG#Native_support // https://developer.mozilla.org/en/DOM/window.btoa img.src = "data:image/svg+xml;base64," + btoa(svg_xml); img.onload = function() { // after this, Canvas’ origin-clean is DIRTY //console.log("loaded", img.src) ctx.drawImage(img, 0, 0); } } //canvg(); //var canv = d3.select("#canv").node() var canv = document.getElementById("canv") //var svg = d3.select("svg").node() var svg = document.getElementById("svg") importSVG(svg, canv) </script> </body></html> https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js