Creating a SVG Element

**matsko** · Feb 22, 2010 22:58

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?

**paul_wilkins** · Feb 23, 2010 00:11

You're not trying to do this on Internet Explorer are you?

**matsko** · Feb 23, 2010 00:25

No, I am aware that IE doesn't support SVG.

**paul_wilkins** · Feb 23, 2010 00:31

Originally Posted by matsko

I have googled this and found that you need to have a valid XHTML+XML document in order for this to work.

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.

**AutisticCuckoo** · Feb 23, 2010 03:33

Doesn't this work?

Code JavaScript:

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// apply attributes, add child elements, etc.
theParent.appendChild(svg);

**AutisticCuckoo** · Feb 23, 2010 03:42

This works fine for me in Opera, Chrome and Firefox:

Code XML:

<?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>

**matsko** · Feb 23, 2010 10:09

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?

**matsko** · Feb 23, 2010 10:17

Update...

Everything works (the HTML5) doctype too. Thanks alot guys!

**AutisticCuckoo** · Feb 23, 2010 11:00

I'm still hoping I'll reach retirement age before the abomination known as HTML5 becomes a W3C recommendation.

**zcorpan** · Feb 23, 2010 16:20

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.

**AlexDawson** · Feb 24, 2010 05:14

Originally Posted by matsko

No, I am aware that IE doesn't 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.

**paul_wilkins** · Feb 24, 2010 05:18

Originally Posted by AlexDawson

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.

**matsko** · Feb 24, 2010 17:36

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.

**grantwparks** · Mar 8, 2010 09:23

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!

**AlexDawson** · Mar 8, 2010 14:42

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.

**grantwparks** · Mar 8, 2010 14:59

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).

**AlexDawson** · Mar 8, 2010 15:44

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.

**grantwparks** · Mar 8, 2010 17:04

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.

User Tag List

Thread: Creating a SVG Element

Thread Tools

Display

Creating a SVG Element

Bookmarks

Bookmarks

Posting Permissions