Platonic Shapes
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100">
<rect x="10" y="5" fill="white" stroke="black" width="90" height="90"/>
<circle fill="white" stroke="black" cx="170" cy="50" r="45"/>
<polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94
279,79 248,94 254,62 230,39 263,35 "/>
<line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/>
<line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/>
</svg>>
in html5
you're not required to add the xmlns="http://www.w3.org/2000/svg"
attribute.width
and height
is not that important either. for colors we're using
fill
and stroke
. And in drawing in a x/y coordinate system. the star is
Note: you can pull out the polygon
, an array of points.width
and height
and then control the dimensions through CSS. She suggests to always do it with css. The coordinates map stays the same.
ViewBox
you can use it to crop your canvas. and also to do animation