View Full Version : No closing tag adding <image> to SVG with Javascript

07-09-2007, 03:10 PM
I'm trying to create a SVG-image using javascript. This works fine except when I want to add an image to the SVG. I've written tehe following code to add an image:

var svgNamespace = 'http://www.w3.org/2000/svg';
var svgXlink = 'http://www.w3.org/1999/xlink';
var xmlNamespace = 'http://www.w3.org/XML/1998/namespace';

// get the canvas div
var container = document.getElementById(elem);

// create the SVG
var svg = container.ownerDocument.createElementNS(svgNamespace, "svg");
svg.setAttributeNS(null, 'width', '700px');
svg.setAttributeNS(null, 'height', '500px');
svg.setAttributeNS(null, 'id', 'svg');

// create the image-element
var img = svg.ownerDocument.createElementNS(svgNamespace, 'image');
img.setAttributeNS(svgXlink, 'xlink:href', "http://www.site.com/image.jpg");



The problem is that javascript won't add the closing tag </image> or make it selfclosing like <image />. This makes it unviewable by an SVG-viewer. I've tried many things with different namespaces etc., all without any success.

Does someone have a solution for this?

07-10-2007, 03:19 AM
You are using the innerHTML property... it does not necessarily reflect the actual DOM representation (as it is an HTML-serialization of the DOM). The DOM methods you are using would work fine if the viewer supported the image element.

07-10-2007, 09:30 AM
So if I get this right this is a browser problem, because according to W3C the image-element is supported for SVG. But I need to save the SVG made by the javascript-drawer in a database.
Is there an other way to get the (correct) data from the container-object?

07-11-2007, 11:24 PM
Could anyone please tell me what I'm doing wrong here, cause I don't get it. When I create anything but an image or img tag, all works fine, just only with these elements I dont get a closing tag in the innerHTML.

I've been searching the internet for several hours now and I can't find anything useful on the subject. So assuming this isn't too difficult I'm doing here, it must be something really stupid I'm missing.

All help would be appreciated :thumbsup: