HTML5 - SVG

HTML5 - SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics) is an XML-based markup language for describing two-dimensional vector graphics. Unlike raster image formats (like PNG, JPG, GIF) which are pixel-based, SVG graphics are defined using mathematical shapes, paths, and text. This allows them to scale infinitely without losing quality or becoming pixelated.

SVG is ideal for logos, icons, illustrations, data visualizations (charts, graphs), interactive maps, and animations where crispness at any size is important.

SVG is a W3C standard and enjoys broad support across all modern web browsers.

Embedding SVG in HTML5

HTML5 allows you to embed SVG code directly within your HTML document using the <svg> element. This is the most common and flexible way to use SVG on the web.

<!DOCTYPE html>
<html>
<head>
    <title>Inline SVG Example</title>
</head>
<body>
    <h1>My SVG Circle</h1>

    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>

</body>
</html>

Key points about the <svg> element:

• width and height: Define the dimensions of the SVG viewport (the visible area).
• xmlns: The XML namespace attribute, typically http://www.w3.org/2000/svg. While often optional in HTML5 context, it’s good practice to include it for compatibility.
• Inside the <svg> tag, you define graphical elements like <circle>, <rect>, <line>, <path>, <text>, etc.

Alternatively, you can save SVG code in a .svg file and embed it using other methods:

• <img> tag: <img src="mygraphic.svg" alt="Description"> (Simple, but limited interactivity/styling via CSS/JS).
• CSS background-image: background-image: url('mygraphic.svg');
• <object> tag: <object data="mygraphic.svg" type="image/svg+xml"></object>
• <iframe> tag: <iframe src="mygraphic.svg"></iframe>

Inline SVG (<svg>...</svg>) generally offers the most power, allowing direct manipulation with CSS and JavaScript.

Basic SVG Shapes

SVG provides predefined elements for common shapes:

Rectangle (<rect>)

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="80"
        fill="blue" stroke="darkblue" stroke-width="5"
        rx="15" ry="15" />
  <!-- rx, ry create rounded corners -->
</svg>

Circle (<circle>)

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" fill="orange" />
  <!-- cx, cy = center coordinates; r = radius -->
</svg>

Ellipse (<ellipse>)

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="90" ry="40" fill="purple" />
  <!-- rx = horizontal radius; ry = vertical radius -->
</svg>

Line (<line>)

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="190" y2="90" stroke="green" stroke-width="4" />
  <!-- x1, y1 = start point; x2, y2 = end point -->
</svg>

Polyline (<polyline>)

Draws a series of connected straight lines.

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <polyline points="10,10 50,90 90,30 130,70 170,10"
            fill="none" stroke="brown" stroke-width="3" />
  <!-- points = list of x,y coordinates -->
</svg>

Polygon (<polygon>)

Similar to polyline, but automatically closes the shape by connecting the last point to the first.

<svg width="110" height="110" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 100,90 10,90" fill="lime" stroke="black" />
</svg>

The <path> Element

The <path> element is the most powerful SVG shape element. It can draw straight lines, curves (Bezier, quadratic), arcs, and combine them to create complex shapes. Its geometry is defined by the d attribute, which contains a series of commands and coordinates.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 10 L 90 10 L 50 90 Z" fill="yellow" stroke="black"/>
  <!-- M = moveto, L = lineto, Z = closepath -->
</svg>

Mastering path data takes practice. Common commands include M (moveto), L (lineto), H (horizontal lineto), V (vertical lineto), C (curveto - cubic Bezier), Q (quadratic Bezier curveto), A (elliptical arc), and Z (closepath). Uppercase commands use absolute coordinates, lowercase use relative coordinates.

Styling SVG

SVG elements can be styled using:

• Presentation Attributes: Directly setting attributes like fill, stroke, stroke-width on the SVG elements themselves.
• CSS: Applying styles using inline style attributes, internal stylesheets (<style> tag within <svg> or HTML), or external CSS files. This is the preferred method for complex styling and maintainability.
• CSS Properties: Common properties include fill (interior color), stroke (outline color), stroke-width, stroke-linecap, stroke-dasharray, opacity, transform, etc.

Example using CSS

<!DOCTYPE html>
<html>
<head>
    <title>Styling SVG with CSS</title>
    <style>
        .my-circle {
            fill: lightcoral;
            stroke: darkred;
            stroke-width: 5px;
            transition: fill 0.3s ease;
        }
        .my-circle:hover {
            fill: crimson;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle class="my-circle" cx="50" cy="50" r="40" />
    </svg>
</body>
</html>

Other SVG Features

SVG includes many other powerful features:

• <text>: For rendering text along straight or curved paths.
• <tspan>: For styling parts of text within a <text> element.
• <g>: For grouping elements together, allowing transformations and styles to be applied to the group.
• <defs> and <use>: Define reusable graphical objects (like symbols or gradients) and then instance them elsewhere.
• Gradients (<linearGradient>, <radialGradient>).
• Patterns (<pattern>).
• Clipping and Masking (<clipPath>, <mask>).
• Filters (<filter> for effects like blur, drop shadows).
• Animation (<animate>, <animateTransform>, etc., though CSS/JavaScript animation is often preferred now).

Interactivity with JavaScript

Since inline SVG elements are part of the DOM, you can manipulate them using JavaScript just like HTML elements. You can add event listeners (click, mouseover), change attributes, modify styles, and dynamically create or remove SVG elements, enabling highly interactive graphics.

For comprehensive learning, MDN Web Docs is an excellent resource for SVG: (https://developer.mozilla.org/en-US/docs/Web/SVG)