CODEWITHSUNDEEP
htmlsvg
XoXo
XoXo

Reputation: 1599

How to create an ellipse in svg

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.

Upvotes: 1

Views: 737

Answers (2)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146340

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.

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 123985

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>

Upvotes: 2

Related Questions