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.
| <!DOCTYPE html> | |
| <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="http://www.w3.org/2000/svg" xmlns:xlink="http://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(); | |
| // http://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> |
+1
This produces SVG that can not be rendered properly. (even Firefox renders it wrong if you feed him with the serialization produced by webkit).
Where is the webkit bug to complain-more/follow it? Does it exist? We can create it otherwise.
Cheers!