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?

106 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