Svg To Png Not Working, Suspect Svg Element Differences

Im having trouble figuring out why two different svg's would cause my javascript to work in one instance, but not in the other. I have only swapped out the svg elements in both exa

Solution 1:

It comes from your namespace declaration :

Change xmlns:NS1="" NS1:xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:NS2="" NS2:xmlns:cc="http://creativecommons.org/ns#" xmlns:NS3="" NS3:xmlns:dc="http://purl.org/dc/elements/1.1/"

to xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> and it should work.

Also note that since you are using XMLSerializer().serializeToString(), you don't need to create a blob and an objectURL, you can only pass data:image/svg+xml; charset=utf8, " and the encodeURIComponent(svgString) as the url of your image. (fiddle).

ps: You can read about namespace declaration here.