HTML 25 💻 svg, circle, polygon and rect

Draw with SVG

<img src = "1.svg"/>
<svg width="200" height="100"  viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"
      fill="lime" stroke="purple" stroke-width="5" />
</svg>
<svg width="200" height="200">
  <style>
    .star { fill: purple; stroke: green; stroke-width: 2; }
    .star:hover { fill: orange; }
  </style>
  <polygon class="star" points="100,10 40,180 190,60 10,60 160,180" />
</svg>
<svg width="200" height="100">
  <rect width="150" height="75" x="25" y="12.5" />
</svg>

svg element is used to create vector graphics
you can also add an svg file with img element
width and height specify the dimension
viewBox specify the coordinate system and the aspect ratio
svg element can take inside the following elements
rect, circle, ellipse, line, polyline, polygon, path
you can use styling with CSS
common attributes are fill, stroke, stroke-width

SVGs are scalable without quality loss
smaller size for simple graphics
can be animated and interactive, support onclick event
can be manipulated with JavaScript
circle is an SVG element, used inside svg element
creates circular shapes
cx, cy attributes are the x,y coordinates of the circle
r attribute is the radius

polygon is an SVG element too
creates shapes with multiple sides, three or more
points attribute is a list of x,y coordinate pairs that specify the polygon’s vertices
style elements specifies the style for the polygon with class star
rect is an SVG element
creates rectangles and squares
width and height attributes specify the height and the width
x,y attributes define the top-left corner of the shape