Hey Guys.
I’ve been trying to create an inline SVG document inside a div using javascript. I cannot seem to figure this out. What I want to do is create a <svg> element and apply some shapes and colors to it via javascript (or ecmascript if I need to).
I have googled this and found that you need to have a valid XHTML+XML document in order for this to work.
Any ideas?
You’re not trying to do this on Internet Explorer are you?
No, I am aware that IE doesn’t support SVG.
Have you have any success with the SVG tutorials out there?
If so, we’ll need to look at your code that’s not working.
If you haven’t had any success with existing tutorials, we can help there too.
Doesn’t this work?
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// apply attributes, add child elements, etc.
theParent.appendChild(svg);
This works fine for me in Opera, Chrome and Firefox:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>SVG Test</title>
<style type="text/css">
html {font:81.25%/1.5 sans-serif}
</style>
</head>
<body>
<h1>Testing <abbr>SVG</abbr></h1>
<div id="container"/>
<script type="application/javascript"><![CDATA[
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "4cm");
svg.setAttribute("height", "8cm");
svg.setAttribute("version", "1.1");
var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
ellipse.setAttribute("cx", "2cm");
ellipse.setAttribute("cy", "4cm");
ellipse.setAttribute("rx", "2cm");
ellipse.setAttribute("ry", "1cm");
svg.appendChild(ellipse);
document.getElementById("container").appendChild(svg);
]]></script>
</body>
</html>
What about if I was to use a HTML5 doctype and not an XHTML doctype? Therefore I wouldn’t use the <?xml ?> document version declaration at the top of the page. Would this render the SVG content unusable?
Update…
Everything works (the HTML5) doctype too. Thanks alot guys!
I’m still hoping I’ll reach retirement age before the abomination known as HTML5 becomes a W3C recommendation. :-/
As matsko found, there’s no need to use application/xhtml+xml for script-created SVG to work. It works fine in text/html as well (regardless of doctype) in browsers that support SVG.
Had you investigated using VML? Only IE supports it and it’s effectively Microsoft’s proprietary counterpart to SVG, if you wanted your effect to work in Internet Explorer you could render using both SVG and VML having something that works browser-wide and have the best of both worlds. 
That’s a nice idea, and I am inspired to search out an API that can do both for you at once.
Hey look, Raphaël uses both SVG and VML as a base for creating graphics.
Now that’s nice.
Yes, I am also aware of VML.
The Raphael framework that was mentioned above really does an awesome job of managing cross-browser graphical drawing.
My only problem with Raphael – and I may be incorrect about my assumption and even if I’m not it’s not a knock on Raphael – is that my graphics “source” is Javascript instead of actual SVG markup. I am big on XSLing data into SVG and did a lot of that back in 2002 - 2005, using Adobe’s viewer plugin on IE. I feel like if I’m using Javascript to add SVG (where the browser supports it) to a page, is not really using SVG.
More/complete/compliant SVG support in browsers, now! 
grantwparks, why on earth would you waste your time using JavaScript tools for SVG when the only browser that doesn’t support SVG has a perfectly good alternative… VML. You’re trying to use solutions for problems which don’t exist (and frankly aren’t even an issue), in fact, it’s just making things worse.
I don’t use them. Maybe this question (“why on earth…”) should be posed to the many thousands of developers using Raphael and SVGWeb, I guess. And since there are so many people using and writing about these libraries, it implies the problem still exists.
I haven’t whipped out all of my old SVG files to try out on Chrome yet, but the last time I checked, even Firefox didn’t support a lot of attributes I was using 8 years ago (when I was using Adobe’s viewer).
Well take Google Maps for example, that uses SVG and VML (with no required scripting libraries) and it works on every major browser platform in use, so I can’t see why anyone would use a proprietary reader (Adobe’s now abandoned viewer) or JavaScript rails when it can be achieved, just with a clever mix of two languages.
Interestingly, all I’m seeing coming back from a map request in Firefox is PNG images (using Firebug) – also I note the VML namespace has been declared in the document’s root (that’s in both Firefox and Chrome – kind of pointless).
Also, inspecting a map’s content in Chrome shows nothing but img tags.
ANYWAY, I think maybe we’re talking about slightly different things here. I believe, though I haven’t confirmed yet, that sites like Google Maps – thought they may “use SVG” – are not actually sending SVG payloads from the server to the client. I believe they are using javascript to createElement their SVG tags. That’s what everyone who is touting “SVG/VML where available” seems to be doing.
The only other way to do it would be to write a server side implementation that interrogated the user agent and used different methods to generate SVG or VML documents on the server. Since I want to use XSL to create my SVG, I’m stuck implementing my own split-personality XSL on the server, I guess.
My point was really agreeing that I don’t like the idea of using javascript to create SVG; I’d rather create my on SVG doc on the server. But everyone else seems to be doing it client side with JS. Your previous comment “using JavaScript tools for SVG when the only browser that doesn’t support SVG…” seems to imply a difference between the two. Those javascript libraries are using SVG – this isn’t even a discussion about browsers that don’t support SVG.