SVG Tutorial 2: SVG basic shapes

svg basic shapes

Example 1: line in SVG format

The line in Image 1 has the following syntax:

<svg xmlns="http://www.w3.org/2000/svg" 	 width="900px" height="600px" >
<line x2="300" y2="100" stroke="green" stroke-width="10" stroke-linecap="round" />
</svg>
For a list of all the possible attributes which can be used with shapes, see the attribute-value table at the end of this tutorial .
Een lijn SVG format
Image 1. A line in SVG format.

Check this example in your browser

Example 1a: a dashed line in SVG format

The line in Image 1a has the following syntax:

<svg width="400px" height="250px">
<line x1="0px" y1="0px" x2="400px" y2="250px"
 style="stroke:black; stroke-width:5; fill:none; stroke-dasharray:9,9;"/>
<line x1="0px" y1="20px" x2="400px" y2="270px"
 style="stroke:red; stroke-width:1; stroke-dasharray:2,2;"/>
</svg>
For the stroke-dasharray attribute see the attribute-value table at the end of this tutorial.
Een stippellijnlijn in SVG format
Image 1a. A dashed line in SVG format.

Check this example in your browser

Example 2: rectangle (with rounded angles) in SVG format

The rectangle in Image 2 has the following syntax:

<svg xmlns="http://www.w3.org/2000/svg" 	 width="900px" height="600px" >
<rect x="50" y="50" width="300" height="170" rx="60" ry="50"
stroke="red" stroke-width="10"
fill="black" fill-opacity="0.6" />
</svg>

Een rectangle in SVG format
Image 2. Rectangle with rounded corners in SVG format.

Check this example in your browser

Example 3: circle in SVG format

The circle in Image 3 has the following syntax:


<svg xmlns="http://www.w3.org/2000/svg" 	 width="900px" height="600px" >
<circle cx="150" cy="150" r="100"
stroke="red" stroke-width="10" fill="darkgrey" fill-opacity="0.6"/>
</svg>

Een circle in SVG format
Image 3. Circle in SVG format.

Check this example in your browser

Example 4: the ellips in SVG format

The elips in Image 4 has the following syntax:

<svg xmlns="http://www.w3.org/2000/svg" 	 width="900px" height="600px" >
<ellipse cx="100" cy="55" rx="70" ry="35"
stroke="red" stroke-width="0.8"
fill="lightgray" fill-opacity="0.6" />
</svg>

Een circle in SVG format
Image 4. Ellips in SVG format.

Check this example in your browser

Example 5: polylines and polygons in SVG format

The main difference between a polyline and a polygon in SVG is that a polyline is closed by default, meaning that the starting point and ending point are not closed by default, unless indicated otherwise. if you want to close a polyline you'll have to specify an end point which exactly coincides with the starting point. The polygon on the other end will be automatically closed in the last given point.

The polyline in Image 5 has the following syntax:

<svg xmlns="http://www.w3.org/2000/svg" width="900px" height="600px" >
<polyline points="200,60 240,230 310,230 350,60"
fill="lightcyan" fill-opacity="1" stroke="red"
stroke-width="25" stroke-linecap="round" stroke-opacity="1" /></svg>
polylines in SVG format
Image 5. polylines in SVG format.

Check this example in your browser

The 3 polygons in Image 6 have the following syntax:

<svg xmlns="http://www.w3.org/2000/svg" 	 width="900px" height="600px" >

  <polygon points="100,66  108,94 132,78 121,102 145,110 121,118  132,142 109,132 100,156 91,132 68,142 79,118 55,110 79,102 68,78 92,94"
  fill="black" fill-opacity="0.6" stroke="red" stroke-width="5" stroke-opacity="1" stroke-linejoin="miter"/>

  <polygon points="200,66  208,94 232,78 221,102 245,110 221,118  232,142 209,132 200,156 191,132 168,142 179,118 155,110 179,102 168,78 192,94"
  fill="black" fill-opacity="0.6" stroke="red" stroke-width="10" stroke-opacity="0.5" stroke-linejoin="miter"/>
  
  <polygon points="300,66  308,94 332,78 321,102 345,110 321,118  332,142 309,132 300,156 291,132 268,142 279,118 255,110 279,102 268,78 292,94"
  fill="black" fill-opacity="1" stroke="red" stroke-width="5" stroke-opacity="0.5" stroke-linejoin="round"/>

</svg>


polygons in SVG format
Image 6. Polygons in SVG format.

Check this example in your browser

Table 1 SVG presentation attributes en values

AttributeValues
strokeDefines the color of the stroke. Valid colors are identical to those in CSS3 and HTML5: color with names(e.g. "blue"), hexa-decimal (e.g. "#f34a12"), RGB (e.g. "rgb(255,255,255)"), HSL (e.g. "hsl(100%,50%,90%)"),%), etc. More details about colors in SVG at: http://www.w3.org/TR/SVG/color.html.
stroke-width

Defines the width of the stroke of the shape or text using a percentage or lenght value (adviced is to indicate a unit: px, em cm etc) in order to avoid browser issues. More details about strokes in SVG at: http://www.w3.org/TR/SVG/types.html#DataTypeLength. Note that the stroke is centered along the edge of the shape. This means that the stroke will overlap with the shape.

stroke-opacityA number between 1.0 and 0.0. A value of 0 makes the stroke fully transparant, a value of 1 makes it visible in the indicated color value.
stroke-dasharrayA list of user coordinates (px) which determine the lenght of the pattern of the invisible interspace between the segments of a dashed line (or stroke of a text or shape).
stroke-linecapDefines the shape of the endings of a line. Options are: butt (standard), round, and square.
stroke-linejoinDefines the shape of the angles of a shape or path. Options are: miter (standard), round, and bevel.
fillDefines the color of a shape or text.
fill-opacityIdentical to the stroke-opacity. When the opacity has a value between 0 and 1, and the stroke has a differtent color value than the fill, then the inner part of the stroke has a different color than the outer part. This can result in nice effects
fill-ruleDefines which part of the shape will be filled. Options are: nonzero (standard) and evenodd. Especially in the case of complex shapes this can result in pretty deviating shapes

Next tutorial

Leave a comment