Circles and Ellipses

Tag description:

The image below demonstrates the <circle/> and <ellipse/> tags.

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.

Source code:

Source of circle-ellipse.svg:Hide line numbers 
1: <svg version="1.1" baseProfile="full"
2:      xmlns="http://www.w3.org/2000/svg" 
3:      width="300px" height="200px" viewBox="0 0 300 200">
4:      
5: <circle cx="100" cy="100" r="95" fill="orange" stroke="blue" stroke-width="5px"/>
6: <ellipse cx="200" cy="50" rx="95" ry="45" fill="green" stroke="black" stroke-width="3px"/>
7: 
8: </svg>

Overlapping shapes:

This example shows what happens when two shapes intersect. The shapes are drawn in the order in which they appear in the file. So, shapes which appear later in the file appear on top.

Geometric Attributes of the <circle/> and <ellipse/> tags:

Equation of a circle:

An equation for a circle in the (x,y)-plane is given by:

(x-cx)2+(y-cy)2=r2.

The geometric attributes of the <circle/> tag are highlighted in bold in the equation above.

Equation of an ellipse:

The equation of an ellipse in the (x,y)-plane is given by:

(x-cx)2/rx2+(y-cy)2/rx2 =1.

Again, bolded letters represent the geometric attributes of the <ellipse/> tag.

References:

This presentation is part of a SVG Tutorial for Mathematics Students.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Creative Commons License Valid XHTML 1.0 Strict Valid CSS!