SVG - Basic Shapes

The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).

In addition to the more complex shapes, SVG has built-in support for some of the common basic shapes: polygons, rectangles, circles, ellipses, lines, and polylines. Polygons are always closed paths that can be filled using either the evenodd rule or the nonzero rule; the evenodd rule fills only the regions that the path winds around an odd number of times, and the nonzero rule fills every region that the path winds around. Rectangles can be specified, optionally, with radius for the rounded corners with different radii in both the x and y directions. Polylines are like polygons, except that they are not closed paths.

Note that the outermost g tag specifies a translation transform that applies to all of the elements that are inside of it.

SvgBasicShapes.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's HTML</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="520" height="760">
  	<g transform="translate(10,10)">
  	  <polygon points="100 0   41.2215 180.9017   195.1057 69.1983
  	    4.8943 69.1983   158.7785 180.9017" fill-rule="evenodd"
  	    fill="#AAAAFF" stroke="lightblue" stroke-width="3"/>
  	  <polygon points="400 0   341.2215 180.9017   495.1057 69.1983
  	    304.8943 69.1983   458.7785 180.9017" fill-rule="nonzero"
  	    fill="#AAAAFF" stroke="lightblue" stroke-width="3"/>
  	  <rect x="20" y="220" width="160" height="100" fill="#AAAAFF"
  	    stroke="lightblue" stroke-width="3"/>
  	  <rect x="320" y="220" width="160" height="120" rx="25" ry="25"
  	    fill="#AAAAFF" stroke="lightblue" stroke-width="3"/>
  	  <circle cx="100" cy="475" r="75" fill="#AAAAFF"
  	    stroke="lightblue" stroke-width="3"/>
  	  <ellipse cx="400" cy="475" rx="95" ry="75" fill="#AAAAFF"
  	    stroke="lightblue" stroke-width="3"/>
  	  <line x1="30" y1="630" x2="170" y2="690" stroke="lightblue" stroke-width="3"/>
  	  <polyline points="320 690  380 690  380 620  420 620  420 690  480 690"
  	    fill="#AAAAFF" stroke="lightblue" stroke-width="3"/>

  	  <text x="40" y="200" fill="#AAAAFF">Polygon - evenodd</text>
  	  <text x="340" y="200" fill="#AAAAFF">Polygon - nonzero</text>
  	  <text x="20" y="360" fill="#AAAAFF">Rectangle - square corners</text>
  	  <text x="320" y="360" fill="#AAAAFF">Rectangle - round corners</text>
  	  <text x="80" y="580" fill="#AAAAFF">Circle</text>
  	  <text x="375" y="580" fill="#AAAAFF">Ellipse</text>
  	  <text x="85" y="720" fill="#AAAAFF">Line</text>
  	  <text x="375" y="720" fill="#AAAAFF">Polyline</text>
  	</g>
  </svg>
</body>
</html>

Core HTML

SVG - Basic Shapes

SvgBasicShapes.html

Output