HTML5 SVG

HTML5 SVG (<svg>) - Scalable Vector Graphics

Scalable Vector Graphics, or SVG, is a powerful way to create crisp, clear graphics directly in your HTML code. Unlike traditional image formats like JPEG or PNG, SVG graphics are based on mathematical formulas rather than pixels, meaning they can scale up or down without losing quality. This makes them perfect for responsive designs, logos, icons, and even complex illustrations.

What is SVG?

SVG stands for Scalable Vector Graphics. It is an XML-based format for describing two-dimensional graphics. Because SVG images are vectors, you can enlarge or shrink them to any size without worrying about blurry edges or pixelation. This quality makes SVGs very useful in modern web design, where your images need to look great on any device, from mobile phones to large desktop monitors.

Basic Structure of an SVG

The <svg> element is the container that holds your SVG code. You can write it directly in your HTML document. Here’s a simple example that draws a circle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple SVG Example</title>
</head>
<body>
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- Draw a circle with center (100,100) and radius 50 -->
    <circle cx="100" cy="100" r="50" fill="lightblue" stroke="black" stroke-width="2" />
  </svg>
</body>
</html>

In this example:

width and height define the size of the SVG container.
The <circle> element is used to draw a circle with a center at coordinates (100, 100) and a radius of 50.
fill sets the color inside the circle, and stroke sets the color of its border.

Key SVG Elements

SVG provides several elements to create a wide variety of shapes. Here are a few commonly used ones:

<rect>: Draws rectangles.
<circle>: Creates circles.
<ellipse>: Similar to a circle, but with two different radii.
<line>: Draws a straight line between two points.
<polyline> and <polygon>: Create shapes with multiple sides.
<path>: Allows drawing complex shapes and curves.

Example: Drawing a Rectangle and a Line

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <!-- Draw a rectangle -->
  <rect x="10" y="10" width="100" height="50" fill="salmon" />
  <!-- Draw a line -->
  <line x1="10" y1="80" x2="110" y2="80" stroke="black" stroke-width="2" />
</svg>

This example shows how to create a rectangle and a line. The rectangle starts at position (10,10) with a width of 100 and a height of 50. The line is drawn from (10,80) to (110,80).

Using Attributes for Responsive Design

One of the best features of SVG is the viewBox attribute. This attribute allows you to define the coordinate system and scale the drawing automatically to fit the container. Here’s how it works:

<svg width="100%" height="auto" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="lightgreen" stroke="darkgreen" stroke-width="2" />
</svg>

In this example:

The width is set to 100% so that the SVG scales with the width of its container.
The viewBox="0 0 200 200" attribute defines the coordinate system, ensuring that the circle scales proportionally no matter the size of the screen.

Styling and Interactivity

You can style SVG elements using CSS, just like you would with HTML elements. This makes it easy to change colors, add animations, or create interactive graphics. For instance, you can hover over an SVG shape to change its color:

<style>
  circle:hover {
    fill: orange;
  }
</style>

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

You can also use JavaScript to add more advanced interactivity, like responding to clicks or dragging elements around.

Real-World Examples

Icons and Logos: Many websites use SVG for logos and icons because they need to look sharp on both retina and non-retina displays.
Infographics and Data Visualizations: SVG is perfect for creating charts and graphs that can dynamically update with data.
Interactive Maps: Developers often use SVG to create interactive maps, where users can click on different regions to get more information.

For example, if you’re designing a website for a restaurant, you might use SVG to display a clickable floor plan. Visitors could click on different areas to see available tables or get information about the seating arrangements.

Conclusion

SVG is an essential tool for modern web design. Its scalability, flexibility, and ease of integration with CSS and JavaScript make it ideal for creating interactive, responsive graphics. By using the <svg> element, you can ensure that your images look great on every screen and that your website remains fast and lightweight.