Shape Review

Objective: Check your SVG Shapes progress

You have completed all the basic shape lessons and should now be comfortable hand-typing SVG for the following SVG shapes and styles:

9.1 SVG Declaration and container

<svg width="400" height="400" viewBox="0, 0, 400, 400">   
<!-- COMMENT. SVG markup goes here -->
</svg>

9.2 The shapes and their construction properties

You can copy and paste these default elements with their properties and edit them as required.

<line x1="0" y1="0" x2="0" y2="0" />
<polyline points="1,1 2,2, 3,3" />   
<circle cx="5" cy="5" r="10" />   
<ellipse cx="10" cy="10" rx="5" ry="10" />   
<rect x="0" y="0" width="100" height="50">
<polygon points="1,1 2,2, 3,3" />   
<image xlink:href="igp.jpg" x="0" y="0" height="50px" width="50px"/>

9.3 The SVG style properties

stroke="rgb(0,0,0)" Can use name colours, RGB, RGBA or hex. Eg: #000000
stroke-width="2" 
fill="rgb(0,0,0)" Can use name colours, RGB, RGBA or hex. Eg: #000000
stroke-linecap="butt | round | square"
stroke-linejoin="miter | round | bevel"
stroke-dasharray="4, 4"  

 SVG Editor

9.4  Exercise

1. Draw each of the basic shapes in multiple positions with different strokes, stroke widths and fill. Remember to practice using the "none" value on the stroke and fill style attributes.
2. Make sure you can remember all of the shapes.
3. Make sure you can type each shape from memory. Don't use cut and paste for this exercise.