HTML SVG

SVG stands for Scalable Vector Graphics. Unlike traditional image formats (like JPEG or PNG) that are made up of thousands of painted square pixels, SVGs are drawn using pure mathematical formulas and geometry (XML).

Because SVGs are drawn via math, they are entirely resolution-independent. You can take an SVG logo that is 10 pixels wide and stretch it to be the size of a billboard, and it will remain infinitely sharp without a single blurry pixel.

Using the <svg> Tag

HTML5 allows you to embed SVG illustrations directly into your code using the <svg> container tag. Inside this container, you use specific vector shapes to build your image.

1. Drawing a Circle

To draw a circle, you use the <circle> element. You must define a central X coordinate (cx), a central Y coordinate (cy), and a radius (r).

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" 
      stroke="green" stroke-width="4" fill="yellow" />
</svg>

2. Drawing a Rectangle

To draw a rectangle, use the <rect> tag. You provide the width, height, and (optionally) inline CSS styling.

<svg width="400" height="100">
  <rect width="300" height="80" 
      style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

3. Drawing Polygons (Stars)

The <polygon> element is used to create a graphic with at least three sides. You provide a list of X/Y coordinate pairs separated by spaces.

<svg height="210" width="300">
  <polygon points="100,10 40,198 190,78 10,78 160,198" 
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Why are SVGs so Popular?

• Tiny File Size: Because they are just XML text, SVG files take up practically zero memory, making your website load incredibly fast.
• Stylable with CSS: Unlike a PNG image, you can change the color (fill) of an SVG icon dynamically using standard CSS hover effects.
• DOM Accessible: Every shape inside an SVG is a real DOM element. This means you can attach JavaScript onclick listeners directly to the specific pieces of your graphic!