HTML — SVG

Friendly intro – what & why

SVG stands for Scalable Vector Graphics. It lets you draw shapes, lines, text and images that stay sharp no matter how big you make them. Unlike a raster image (PNG, JPEG), an SVG is just a set of instructions written in XML. That means you can change its color, size or position with CSS or JavaScript.

1️⃣ Basics of SVG

The simplest SVG element looks like this:

<svg width="100" height="100">
  <!-- content goes here -->
</svg>

Good to know: The width and height can be numbers (pixels) or percentages. When omitted, the SVG scales to the size of its container.

2️⃣ Drawing basic shapes

SVG offers a handful of shape tags: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> and <path>. Each takes attributes that define size and position.

<svg width="120" height="120" viewBox="0 0 120 120">
  <rect x="10" y="10" width="40" height="80" fill="steelblue" />
  <circle cx="80" cy="40" r="30" fill="tomato" />
  <line x1="10" y1="110" x2="110" y2="110" stroke="black" stroke-width="2" />
</svg>

What the browser displays

A blue rectangle on the left, a red circle on the right, and a horizontal black line at the bottom.

3️⃣ Styling SVG with CSS

You can style SVG elements the same way you style HTML. The style attribute or external CSS works.

<svg width="120" height="120" viewBox="0 0 120 120">
  <rect class="box" x="10" y="10" width="40" height="80" />
  <circle class="ball" cx="80" cy="40" r="30" />
</svg>

<style>
  .box { fill: #4CAF50; }
  .ball { fill: #FFC107; stroke: #333; stroke-width: 4; }
</style>

What the browser displays

A green rectangle with a thick dark border around a yellow circle.

4️⃣ Transformations – rotate, scale, translate

The transform attribute lets you move, rotate or resize shapes. The syntax is a list of functions.

<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="10" y="10" width="30" height="30" fill="purple"
        transform="rotate(45 25 25) scale(1.5)" />
  <circle cx="150" cy="50" r="20" fill="orange"
          transform="translate(-20 10)" />
</svg>

What the browser displays

A purple square tilted 45°, enlarged, and a circle shifted to the right and down.

5️⃣ SVG and the DOM – scripting

Because SVG is XML, you can access its nodes with JavaScript just like normal DOM elements. This opens up animations and interactivity.

<svg id="demo" width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50" fill="lightblue" />
</svg>

<script>
  const circle = document.querySelector('#demo circle');
  circle.addEventListener('click', () => {
    circle.setAttribute('fill', 'crimson');
  });
</script>

What the browser displays

A light blue circle that turns crimson when you click it.

6️⃣ Embedding SVG – inline, <img>, and <object>

You can put SVG directly into HTML (inline), or reference it with <img>, <object>, or <embed>. Inline gives the most control.

<!-- Inline -->
<svg width="80" height="80"><circle cx="40" cy="40" r="35" fill="lime"/></svg>

<!-- External file -->
<img src="icon.svg" alt="icon" width="80" height="80">

7️⃣ Gradients & patterns – making graphics pop

Gradients let you blend colors smoothly. Patterns repeat a shape or image.

<svg width="200" height="100" viewBox="0 0 200 100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="red" />
      <stop offset="100%" stop-color="yellow" />
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#grad1)" />
</svg>

What the browser displays

A rectangle that fades from red on the left to yellow on the right.

8️⃣ Comparing SVG with Canvas

Feature	SVG	Canvas
Resolution	Scalable	Pixel‑based
Interactivity	Built‑in DOM	Requires redraw
Animation	CSS/SMIL/JS	Canvas API
File size	Often smaller for simple shapes	Depends on complexity

Common mistake: Trying to use Canvas drawing commands inside an SVG tag will not work. They belong in a <canvas> element.

Common mistakes checklist

• Forgetting to close tags like <rect /> or <circle />.
• Mixing pixel units with percentages without a viewBox.
• Overlooking the viewBox which keeps the SVG responsive.
• Using transform values that exceed the element’s bounds, causing clipping.
• Expecting CSS pseudo‑classes (e.g., :hover) to work on SVG in older browsers.

Mini Practice

1. Create an SVG that draws a 50 px wide, 100 px tall green rectangle with a 5 px black border.
2. Add a red circle inside the rectangle, centered horizontally and positioned 20 px from the top.
3. Write a CSS rule that turns the circle yellow on hover.
4. Use JavaScript to change the rectangle’s fill to blue when it is double‑clicked.
5. Save the SVG as an external file and embed it with <img>.