JavaScript Generated SVGs Do Not Render Content

I’m teaching myself JavaScript and SVG to create some interactive graphics for a web page, but am encountering a problem with a path not being drawn in programmatically generated SVGs. Here is a test code that exhibits the problem:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<svg width="1em" height="1em" viewBox="0 0 350 350"
     preserveAspectRatio="xMidYMid meet"
     style="border: 1px solid #cc0000;">

    <path d="M 50 50 L300 50 L300 300 L50 300 Z"/>
</svg>
</body>
<script>
"use strict";
var s = document.createElementNS("http://www.w3.org/2000/svg","svg")
s.setAttribute("width","1em")
s.setAttribute("height","1em")
s.setAttribute("viewBox", "0 0 350 350")
s.setAttribute("preserveAspectRatio","xMidYMid meet")
s.setAttribute("style","border: 1px solid #cc0000;")
var g = document.createElement("path")
g.setAttribute("d",'M 50 50 L300 50 L300 300 L50 300 Z')
s.appendChild(g)
document.body.appendChild(s)
</script>
</html>

This displays two SVGs, side-by-side, each with a red border box. However, the first one–generated from the HTML–draws a black rectangle into the SVG. The second–generated by the JavaScript code–just won’t draw the rectangle.

I cannot figure out why. Inspecting both SVGs in the rendered page’s DOM shows them to be completely identical. Yet every browser I’ve tried only draws the first rectangle.

Any advice on this surely elementary error?

153 thoughts on “JavaScript Generated SVGs Do Not Render Content”

  1. Pingback: diet keto
  2. Hey There. I found your weblog the use of msn. That
    is an extremely smartly written article. I’ll be
    sure to bookmark it and return to learn more of your helpful info.
    Thank you for the post. I’ll definitely comeback.

    Reply
  3. I will immediately take hold of your rss feed as I can not in finding your e-mail subscription link or newsletter service.
    Do you’ve any? Please let me understand so that I may
    subscribe. Thanks.

    Reply
  4. What’s Happening i’m new to this, I stumbled upon this I have discovered It absolutely useful and it has aided me out loads.
    I’m hoping to give a contribution & help different users like its aided me.
    Good job.

    Reply
  5. We are a group of volunteers and starting a brand new scheme in our community.
    Your website provided us with useful information to work on. You have done a formidable job and our whole neighborhood can be thankful to you.

    Reply
  6. Its like you read my mind! You seem to know so much about
    this, like you wrote the book in it or something. I think that you can do
    with a few pics to drive the message home a bit,
    but other than that, this is fantastic blog.
    An excellent read. I’ll certainly be back.

    Reply
  7. What i don’t realize is in truth how you are
    now not actually a lot more well-favored than you may be now.
    You are very intelligent. You realize therefore considerably
    when it comes to this subject, made me in my opinion believe it from numerous numerous angles.
    Its like women and men aren’t involved unless it’s something
    to do with Lady gaga! Your individual stuffs great.
    At all times care for it up!

    Reply
  8. Very nice post. I just stumbled upon your weblog and wanted to say that I’ve
    truly enjoyed browsing your blog posts. In any case I’ll be subscribing
    to your feed and I hope you write again soon!

    Reply
  9. You have made some really good points there. I checked on the internet to learn more about the issue
    and found most individuals will go along with your views
    on this site.

    Reply
  10. My brother recommended I might like this blog. He was totally right.
    This post truly made my day. You can not imagine
    simply how much time I had spent for this info! Thanks!

    Reply
  11. Today, I went to the beachfront with my kids. I found a sea shell and
    gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear
    and screamed. There was a hermit crab inside and it
    pinched her ear. She never wants to go back! LoL I know this
    is entirely off topic but I had to tell someone!

    Reply
  12. naturally like your web site but you need to take a look at the spelling on several of your posts.

    A number of them are rife with spelling issues and I find it
    very troublesome to inform the reality however I’ll definitely come again again.

    Reply
  13. Unquestionably believe that that you stated.
    Your favorite reason appeared to be at the net the easiest thing to take into accout of.
    I say to you, I definitely get irked whilst people think about concerns that they just don’t recognise about.

    You controlled to hit the nail upon the highest as well as defined out
    the entire thing with no need side effect , folks could take a signal.
    Will likely be back to get more. Thank you

    Reply
  14. i need a loan now, i need a private loan lender. i need a loan desperately today need loan i need a loan today i need more loan money for college, cash advance loans direct lenders only, cash advances, cash advances, online cash advance loans unemployed. Commerce will spark money, terms of credit.

    Reply
  15. Hello There. I found your blog using msn. This is an extremely well
    written article. I will make sure to bookmark it and come back
    to read more of your useful information. Thanks for the post.

    I will certainly comeback.

    Reply
  16. My spouse and I stumbled over here different page and thought I might as well check things out.
    I like what I see so i am just following you. Look forward to looking
    over your web page again.

    Reply