Tutorials

HTML SVG

Posted in HTML Tutorial

Updated on Sep 12, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Scalable Vector Graphics (SVG) is an XML-based markup language used for describing two-dimensional vector graphics.

SVG is widely used for creating interactive graphics on the web, including charts, diagrams, and animations. Its scalability ensures that graphics remain sharp and clear at any size or resolution, making it ideal for responsive web design.

🤷 What Is SVG?

SVG is a vector image format that uses XML to describe shapes, lines, curves, and text. Unlike raster images, which are pixel-based and can lose quality when scaled, SVG images are resolution-independent and can be scaled to any size without loss of quality. This makes SVG ideal for high-resolution displays and responsive designs.

💻 Basic SVG Syntax

An SVG image is defined within an <svg> element, which contains various graphic elements. Here’s the basic syntax:

HTML

Copied

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG elements go here -->
</svg>

🖼️ Common SVG Elements

<svg>: The container element for SVG graphics.
<rect>: Draws rectangles.
<circle>: Draws circles.
<ellipse>: Draws ellipses.
<line>: Draws lines.
<polyline>: Draws a series of connected lines.
<polygon>: Draws a closed shape with multiple sides.
<path>: Draws complex shapes using a series of commands.

🛠️ SVG Attributes

width and height: Define the dimensions of the SVG canvas.
x and y: Specify the position of elements.
fill: Sets the color inside shapes.
stroke: Defines the color and width of the outline of shapes.
stroke-width: Specifies the width of the stroke.

✨ Styling SVG

SVG elements can be styled using CSS. You can apply styles directly within the SVG using the style attribute or through external stylesheets. Here’s an example of inline styling:

HTML

Copied

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

Alternatively, you can use external CSS:

HTML

Copied

<style>
  .my-circle {
    fill: green;
    stroke: red;
    stroke-width: 2;
  }
</style>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" class="my-circle"/>
</svg>

🎬 Animating SVG

SVG provides built-in support for animations using the <animate>, <animateTransform>, and <animateMotion> elements. Here’s an example of a simple animation:

HTML

Copied

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="cx" from="50" to="100" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

♿ Accessibility Considerations

To ensure that SVG content is accessible to all users, including those using screen readers, you should:

Use <title> and <desc> elements within the SVG to provide descriptive text.
Ensure that interactive elements are focusable and provide keyboard navigation.

HTML

Copied

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <title>Blue Circle</title>
  <desc>A circle with a blue fill and black outline.</desc>
  <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="3"/>
</svg>

🏆 Best Practices

Optimize SVG Files: Remove unnecessary metadata and reduce file size for better performance.
Use SVG Sprites: Combine multiple SVG icons into a single file to reduce HTTP requests.
Ensure Responsiveness: Use viewBox and preserveAspectRatio attributes to make SVGs responsive.

📝 Example

Here’s a complete example of an SVG with various elements and styles:

HTML

Copied

<!DOCTYPE html>
<html>
<head>
  <title>SVG Example</title>
  <style>
    .rect-style {
      fill: lightblue;
      stroke: black;
      stroke-width: 2;
    }
    .circle-style {
      fill: red;
      stroke: black;
      stroke-width: 2;
    }
  </style>
</head>
<body>
  <h1>SVG Example</h1>
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100" class="rect-style"/>
    <circle cx="150" cy="50" r="40" class="circle-style"/>
    <path d="M10 150 Q 50 120, 90 150 T 170 150" fill="none" stroke="green" stroke-width="4"/>
  </svg>
</body>
</html>

🎉 Conclusion

SVG is a versatile and powerful tool for creating scalable and interactive graphics on the web. By leveraging its features and best practices, you can create visually appealing and responsive graphics that enhance the user experience.