11 Basic Shapes


Contents


 

11.1 Introduction

SVG contains the following set of basic shapes:

Mathematically, these shape elements are equivalent to the path objects that would construct the same shape. They may be stroked, filled and used as clip paths, and all the properties described above for paths apply equally to them.

11.2 The <rect> element


 
<!ELEMENT rect (desc?,title?) >
<!ATTLIST rect
  id ID #IMPLIED
  xml:lang NMTOKEN #IMPLIED
  xml:space (default|preserve) #IMPLIED
  class NMTOKENS #IMPLIED
  style CDATA #IMPLIED
  transform CDATA #IMPLIED
  %graphicsElementEvents;
  system-required CDATA #IMPLIED
  x CDATA #IMPLIED
  y CDATA #IMPLIED
  width CDATA #REQUIRED
  height CDATA #REQUIRED
  rx CDATA #IMPLIED
  ry CDATA #IMPLIED >

Attribute definitions:

x = "x-coordinate"
The x-coordinate of one corner of the rectangular. The default x-coordinate is zero. See Coordinate Systems, Transformations and Units.
y = "y-coordinate"
The x-coordinate of one corner of the rectangular. The default y-coordinate is zero. See Coordinate Systems, Transformations and Units.
width = "width"
The width of the rectangle. See Coordinate Systems, Transformations and Units.
height = "height"
The width of the rectangle. See Coordinate Systems, Transformations and Units.
rx = "length"
For rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle.
ry = "length"
For rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle.

If a value is not provided for rx but a value is provided for ry, then rx is set to the same value as ry. If a value is not provided for ry but a value is provided for rx, then ry is set to the same value as rx. If values are not provided for rx or ry, no rounding occurs.


Attributes defined elsewhere:
id, xml:lang, xml:space, class, style, transform, %graphicsElementEvents;, system-required.

11.3 The <circle> element


 
<!ELEMENT circle (desc?,title?) >
<!ATTLIST circle
  id ID #IMPLIED
  xml:lang NMTOKEN #IMPLIED
  xml:space (default|preserve) #IMPLIED
  class NMTOKENS #IMPLIED
  style CDATA #IMPLIED
  transform CDATA #IMPLIED
  %graphicsElementEvents;
  system-required CDATA #IMPLIED
  cx CDATA "0"
  cy CDATA "0"
  r CDATA #REQUIRED >

Attribute definitions:

cx = "x-coordinate"
The x-coordinate of the center of the circle.
cy = "y-coordinate"
The y-coordinate of the center of the circle.
r = "length"
The radius of the circle.

Attributes defined elsewhere:
id, xml:lang, xml:space, class, style, transform, %graphicsElementEvents;, system-required.

11.4 The <ellipse> element


 
<!ELEMENT ellipse (desc?,title?) >
<!ATTLIST ellipse
  id ID #IMPLIED
  xml:lang NMTOKEN #IMPLIED
  xml:space (default|preserve) #IMPLIED
  class NMTOKENS #IMPLIED
  style CDATA #IMPLIED
  transform CDATA #IMPLIED
  %graphicsElementEvents;
  system-required CDATA #IMPLIED
  cx CDATA "0"
  cy CDATA "0"
  rx CDATA #REQUIRED
  ry CDATA #REQUIRED >

Attribute definitions:

cx = "x-coordinate"
The x-coordinate of the center of the ellipse.
cy = "y-coordinate"
The y-coordinate of the center of the ellipse.
rx = "length"
The x-axis radius of the ellipse.
ry = "length"
The y-axis radius of the ellipse.

Attributes defined elsewhere:
id, xml:lang, xml:space, class, style, transform, %graphicsElementEvents;, system-required.

11.5 The <line> element


 
<!ELEMENT line (desc?,title?) >
<!ATTLIST line
  id ID #IMPLIED
  xml:lang NMTOKEN #IMPLIED
  xml:space (default|preserve) #IMPLIED
  class NMTOKENS #IMPLIED
  style CDATA #IMPLIED
  transform CDATA #IMPLIED
  %graphicsElementEvents;
  system-required CDATA #IMPLIED
  x1 CDATA "0"
  y1 CDATA "0"
  x2 CDATA "0"
  y2 CDATA "0" >

Attribute definitions:

x1 = "x-coordinate"
The x-coordinate of the start of the line.
y = "y-coordinate"
The x-coordinate of the start of the line.
x2 = "x-coordinate"
The x-coordinate of the end of the line.
y2 = "x-coordinate"
The y-coordinate of the end of the line.

Attributes defined elsewhere:
id, xml:lang, xml:space, class, style, transform, %graphicsElementEvents;, system-required.

11.6 The <polyline> element


 
<!ELEMENT polyline (desc?,title?) >
<!ATTLIST polyline
  id ID #IMPLIED
  xml:lang NMTOKEN #IMPLIED
  xml:space (default|preserve) #IMPLIED
  class NMTOKENS #IMPLIED
  style CDATA #IMPLIED
  transform CDATA #IMPLIED
  %graphicsElementEvents;
  system-required CDATA #IMPLIED
  points CDATA #REQUIRED >

Attribute definitions:

points = "x-y-coordinate-pairs"
The points that make up the polyline. Space- or comma-separated.(??? Need to provide a BNF)

Attributes defined elsewhere:
id, xml:lang, xml:space, class, style, transform, %graphicsElementEvents;, system-required.

11.7 The <polygon> element


 
<!ELEMENT polygon (desc?,title?) >
<!ATTLIST polygon
  id ID #IMPLIED
  xml:lang NMTOKEN #IMPLIED
  xml:space (default|preserve) #IMPLIED
  class NMTOKENS #IMPLIED
  style CDATA #IMPLIED
  transform CDATA #IMPLIED
  %graphicsElementEvents;
  system-required CDATA #IMPLIED
  points CDATA #REQUIRED >

Attribute definitions:

points = "x-y-coordinate-pairs"
The points that make up the polygon. Space- or comma-separated.(??? Need to provide a BNF)

Attributes defined elsewhere:
id, xml:lang, xml:space, class, style, transform, %graphicsElementEvents;, system-required.

For example, the following will draw a blue circle with a red outline:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<svg width="4in" height="3in">
  <desc>This is a blue circle with a red outline
  </desc>
  <g>
    <circle style="fill: blue; stroke: red" 
      cx="200" cy="200" r="100"/>
  </g>
</svg>

Download this example

This ellipse uses default values for the center.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<svg width="4in" height="3in">
  <desc>This is an ellipse, axis aligned and centered on the origin
  </desc>
  <g>
    <ellipse rx="85" ry="45"/>
  </g>
</svg>

Download this example

Here is a polyline; for comparison, the equivalent path element is also given.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<svg width="4in" height="3in">
  <desc>A sample polyline, and equivalent path
  </desc>
  <polyline points="20,20 50,100 200,80 70,300"/>
  <path d="M20,20 L50,100 L200,80 L70,300"/>
</svg>

Download this example

A polygon is exactly the same as a polyline, except that the figure is automatically closed.

The points attribute for polylines and polygons (i.e., the list of vertices) can contain newline characters and thus can be broken up into multiple lines to improve readability. Because of line length limitations with certain related tools, it is recommended that SVG generators split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are only allowed at certain places within a points value.