SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a SVG Element

    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?
    I can't believe I ate the whole thing

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You're not trying to do this on Internet Explorer are you?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I am aware that IE doesn't support SVG.
    I can't believe I ate the whole thing

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by matsko View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Birnam wood is come to Dunsinane

  7. #7
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    I can't believe I ate the whole thing

  8. #8
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update...

    Everything works (the HTML5) doctype too. Thanks alot guys!
    I can't believe I ate the whole thing

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still hoping I'll reach retirement age before the abomination known as HTML5 becomes a W3C recommendation.
    Birnam wood is come to Dunsinane

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Simon Pieters

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by matsko View Post
    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.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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&#235;l uses both SVG and VML as a base for creating graphics.

    Now that's nice.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    I can't believe I ate the whole thing

  14. #14
    SitePoint Member
    Join Date
    May 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  15. #15
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  16. #16
    SitePoint Member
    Join Date
    May 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  17. #17
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  18. #18
    SitePoint Member
    Join Date
    May 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •