How to create an ellipse in svg

Question

I'm trying to add an ellipse in a SVG

(original snippet)

    <svg>
      <rect x="0" y="0" width="100" height="100"></rect>
      <circle cx="200" cy="0" r="100"></circle>
      <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
    </svg>

But adding some attributes works:

(working snippet)

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
      <rect x="0" y="0" width="100" height="100"></rect>
      <circle cx="200" cy="0" r="100"></circle>
      <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
    </svg>

Questions:

1. What are the attributes of xmlns and version for?
2. Why is the ellipse NOT showing up in the original snippet (but the rect and the circle show up properly)?

See here for a jsfiddle.

Answer 1

If you don't provide a canvas size the <svg> element (same as all replaced elements) defaults to 300px x 150px. Your ellipse is at rx="400" so is outside the canvas. Setting a larger canvas size fixes thing so you can see the ellipse.

version is pointless, xmlns is only required for standalone SVG files, if you're embedding things in an html page as we're doing here with snippets you can omit both.

svg {
  width: 100%;
  height: 100%;
}

<svg>
    <rect x="0" y="0" width="100" height="100"></rect>
    <circle cx="200" cy="0" r="100"></circle>
    <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
</svg>

Answer 2

What prevents the ellipse from displaying is the lack of width attribute, as this snippet illustrates:

<svg width="350">
  <rect x="0" y="0" width="100" height="100"></rect>
  <circle cx="200" cy="0" r="100"></circle>
  <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
</svg>

The viewport size defaults to 300x150 thus everything else gets cropped.