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.
<!ELEMENT rect (desc?,title?,(animate|animateTransform|animateColor)*) > <!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:
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.
<!ELEMENT circle (desc?,title?,(animate|animateTransform|animateColor)*) > <!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:
<!ELEMENT ellipse (desc?,title?,(animate|animateTransform|animateColor)*) > <!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:
<!ELEMENT line (desc?,title?,(animate|animateTransform|animateColor)*) > <!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:
<!ELEMENT polyline (desc?,title?,(animate|animateTransform|animateColor)*) > <!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:
<!ELEMENT polygon (desc?,title?,(animate|animateTransform|animateColor)*) > <!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:
For example, the following will draw a blue circle with a red outline:
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.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>
This ellipse uses default values for the center.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.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>
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 August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.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>
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.