HTML SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics) is an XML-based vector image format. Unlike standard raster images (like .jpg or .png) which are made of pixels, SVGs are made of mathematical paths. This means they can scale to any size—from a tiny favicon to a massive billboard—without ever losing quality or becoming "pixelated." In modern web development, SVGs are the gold standard for icons, logos, and data visualizations.

Basic Syntax

SVG elements are defined within the <svg> container. This tag acts as a canvas where you draw your shapes.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

Output: A blue circle with a radius of 50 pixels is drawn exactly at the center (100, 100) of a 200x200 canvas.

Common SVG Shapes

1. Rectangle (<rect>)

The <rect> element creates rectangles and squares. It is commonly used for UI elements like buttons or card backgrounds.

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="50" fill="green" rx="10" ry="10" />
</svg>

• x, y: The coordinates for the top-left corner.
• rx, ry: Defines the corner radius, creating a "rounded" look similar to CSS border-radius.

2. Circle (<circle>)

The <circle> element is used to draw perfect circles based on a center point and a radius.

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

• cx, cy: Center coordinates (X and Y).
• r: The radius (half the diameter).

3. Ellipse (<ellipse>)

An ellipse is similar to a circle, but it allows for different horizontal and vertical radii, creating an oval shape.

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="80" ry="40" fill="purple" />
</svg>

• rx, ry: The horizontal and vertical radii, respectively.

4. Line (<line>)

The <line> tag draws a straight segment between two points. It requires a stroke to be visible.

<svg width="200" height="200">
  <line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2" />
</svg>

• x1, y1: Starting point coordinates.
• x2, y2: Ending point coordinates.

5. Polygon (<polygon>)

The <polygon> element creates closed shapes with three or more sides, such as triangles, stars, or hexagons.

<svg width="200" height="200">
  <polygon points="50,10 90,180 10,80 190,80 110,180" fill="orange" />
</svg>

• points: A series of x,y coordinates that define each corner of the shape. The browser automatically connects the last point back to the first.

6. Polyline (<polyline>)

A polyline is similar to a polygon, but it is typically used for open shapes (where the last point is not connected to the first). This is great for drawing "staircase" patterns or trend lines in charts.

<svg width="200" height="200">
  <polyline points="10,10 50,100 90,10" stroke="blue" fill="none" stroke-width="2" />
</svg>

7. Path (<path>)

The <path> element is the most powerful tool in SVG. It can draw anything from simple lines to complex organic curves using a "pen" analogy.

<svg width="200" height="200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="brown" stroke-width="2" />
</svg>

• M: Move to (picks up the pen and puts it down at a point).
• L: Line to (draws a straight line).
• C: Cubic Bezier curve (creates smooth, flowing curves).
• Z: Close path (draws a line back to the start).

Adding Text

Unlike text in a raster image, SVG text is fully accessible, searchable by search engines (SEO friendly), and selectable by the user.

Example: Text in SVG

<svg width="200" height="100">
  <text x="10" y="50" font-size="24" fill="blue">Hello, SVG!</text>
</svg>

• x, y: Defines the anchor point where the text begins.
• font-size: Controls the size, similar to CSS.

Styling SVG

You can style SVGs directly in the HTML tag using attributes, or you can use external CSS classes for a cleaner workflow.

<svg width="200" height="200" class="styled-svg">
  <circle cx="100" cy="100" r="50" class="circle" />
</svg>

<style>
  .styled-svg {
    background-color: #f4f4f4;
    border-radius: 8px;
  }
  .circle {
    fill: #ffcc00;
    stroke: #333;
    stroke-width: 4;
    transition: fill 0.3s ease;
  }
  .circle:hover {
    fill: #ff5500;
  }
</style>

Animations in SVG

SVGs support native animation through the <animate> tag (part of the SMIL specification) or via CSS and JavaScript.

Example: Animated Circle

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red">
    <animate attributeName="r" from="50" to="100" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

• attributeName: The property you want to change (like r, cx, or opacity).
• dur: How long one animation cycle takes.
• repeatCount: Set to indefinite for a continuous loop.

Advantages of SVG

1. Scalability: Perfect for "Retina" and 4K displays. One file works for all resolutions.
2. Interactivity: You can trigger events like onClick or onMouseOver on specific shapes inside the SVG.
3. Accessibility: Screen readers can read SVG <title> and <desc> tags, making graphics accessible to blind users.
4. Lightweight: A simple icon in SVG format is often just a few hundred bytes, much smaller than a PNG equivalent.

Summary

SVG is a powerful tool for modern web design. By mastering basic shapes like <rect> and <circle>, and moving into advanced features like <path> and CSS styling, you can create performant, beautiful, and interactive interfaces. Whether you are building custom icons or complex data dashboards, SVG provides the flexibility and quality that modern users expect.