HTML SVG

This chapter provides a detailed, beginner-friendly guide to <svg> in HTML, which stands for Scalable Vector Graphics. You'll learn what SVG is, how to create basic shapes, add text, and style graphics, with simple explanations, code examples, and interactive previews to help you get started easily.

What is SVG?

SVG, or Scalable Vector Graphics, is a way to create images and graphics directly in HTML using code. Unlike regular images (like PNG or JPG, which are made of pixels), SVG graphics are vector-based. This means they use mathematical descriptions (like lines and curves) instead of pixels, so they look sharp at any size—perfect for responsive websites. SVG is written in an XML-like format inside the <svg> tag and can be edited with CSS or JavaScript.

Basic SVG Setup

To start with SVG, add the <svg> tag to your HTML and set its width and height attributes. Inside it, you can add shape tags like <rect>. Let's draw a simple rectangle.

<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" fill="lightblue" />
</svg>
  

Preview:

Explanation: The <rect> tag creates a rectangle. The x and y attributes set its position, width and height define its size, and fill sets the color.

---

Drawing Basic Shapes with SVG

SVG has built-in tags for common shapes like rectangles, circles, ellipses, lines, and polygons. Each shape has attributes to control its position, size, and style. Let's draw a few shapes.

<svg width="300" height="200">
  <rect x="10" y="10" width="100" height="50" fill="green" stroke="black" stroke-width="2" />
  <circle cx="200" cy="60" r="40" fill="red" />
  <line x1="10" y1="100" x2="280" y2="100" stroke="blue" stroke-width="3" />
  <polygon points="10,120 100,150 10,180" fill="purple" />
  <ellipse cx="200" cy="150" rx="60" ry="30" fill="orange" />
</svg>
  

Preview:

Explanation: - <rect>: Draws a rectangle with fill color and border (stroke). - <circle>: Draws a circle; cx and cy are center coordinates, r is radius. - <line>: Draws a line from (x1, y1) to (x2, y2). - <polygon>: Draws a polygon with points for vertices. - <ellipse>: Draws an oval; rx and ry are radii for x and y axes.

Drawing Paths with SVG

A <path> is a versatile tag for creating custom shapes using commands like M (move to), L (line to), and Z (close path). It's like drawing with a pen on paper.

<svg width="200" height="200">
  <path d="M50 50 L150 50 L100 150 Z" fill="yellow" stroke="black" stroke-width="2" />
</svg>
  

Preview:

Explanation: The d attribute defines the path: Start at (50,50), line to (150,50), line to (100,150), and close the shape with Z. This creates a triangle.

Adding Text to SVG

Use the <text> tag to add text. You can position it with x and y, and style it with attributes like font-family and fill.

<svg width="300" height="100">
  <text x="50" y="60" font-family="Arial" font-size="24" fill="blue">Hello SVG!</text>
</svg>
  

Preview:

Styling SVG with CSS

You can style SVG elements using inline attributes or CSS classes for better organization. This makes it easy to change colors, sizes, or add effects like hover.

<svg width="200" height="100">
  <rect class="styled-rect" x="10" y="10" width="180" height="80" />
</svg>

<style>
  .styled-rect {
    fill: pink;
    stroke: purple;
    stroke-width: 4;
  }
</style>
  

Preview:

Animating SVG with JavaScript or CSS

SVG can be animated using CSS transitions or JavaScript. For example, change attributes on hover or use libraries like Snap.svg for complex animations.

<svg width="200" height="200">
  <circle id="animatedCircle" cx="100" cy="100" r="40" fill="orange" />
</svg>

<script>
  const circle = document.getElementById('animatedCircle');
  circle.addEventListener('click', () => {
    circle.setAttribute('r', 60);
  });
</script>
  

Preview (Click the circle to animate):

Embedding Images in SVG

Use the <image> tag to embed external images or other SVGs inside your graphic.

<svg width="200" height="200">
  <image href="https://via.placeholder.com/150" x="25" y="25" width="150" height="150" />
</svg>
  

Preview:

Best Practices for SVG

• Set viewBox attribute for responsive scaling (e.g., viewBox="0 0 100 100").
• Use CSS classes for reusable styles.
• Optimize SVG code by removing unnecessary attributes for smaller file sizes.
• Add title or desc elements for accessibility.
• Test on different devices to ensure scaling works.

Common Mistakes to Avoid

• Forgetting to close tags properly, as SVG is strict XML.
• Not setting width and height, causing the SVG to not display.
• Using pixel-based thinking; remember SVG is vector and scalable.

---

Try It Yourself

Create an SVG with a circle, rectangle, and text. Experiment by changing colors and positions.

<svg width="300" height="200">
  <rect x="20" y="20" width="100" height="60" fill="lightgreen" stroke="darkgreen" stroke-width="2" />
  <circle cx="200" cy="100" r="50" fill="lightblue" />
  <text x="80" y="120" font-family="Arial" font-size="20" fill="red">My SVG!</text>
</svg>
  

Preview:

SVG is a powerful tool for creating scalable graphics in HTML. Practice these basics, and you'll be able to build icons, charts, and more. Experiment with tools like Inkscape for designing SVGs visually!