Understanding SVGs

Scalable Vector Graphics (SVG) are an XML-based vector image format for two-dimensional graphics, with support for interactivity and animation. Let's break down this definition a little bit for better understanding.

1. XML-based: XML stands for extensible Markup Language. It is similar to HTML, but it's designed to store and transport data, not display it. So, SVGs are written in a language similar to HTML.
2. Vector image format: Unlike raster graphics (like JPEGs or PNGs) that are made up of a grid of pixels, vector graphics are made up of paths and shapes. This allows them to be scalable, meaning they can be resized without losing quality.
3. Two-dimensional graphics: SVGs support only 2D graphics. They can't create 3D effects.
4. Interactivity and animation: SVGs can be manipulated with CSS and JavaScript, making them interactive and animatable.

Why use SVGs in HTML?

Before we dive into how to use SVGs in HTML, let's understand why we might want to use them. SVGs can be scaled without losing quality, which makes them great for responsive design. They can be styled and animated with CSS and JavaScript, offering more interactive possibilities than regular images. SVGs can also be more accessible - you can add alternative text just like with regular images.

How to include SVGs in HTML

There are two main ways to include SVGs in your HTML code: inline SVGs and SVG as an image source.

Inline SVGs

Inline SVGs are SVGs that are written directly in your HTML code. Here's an example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

In this code, we've created a yellow circle with a green outline. The circle is 100 pixels in diameter, centered in the SVG.

SVG as an Image Source

You can also use SVGs as an image source. This is similar to using a JPEG or PNG as an image source. Here's how you do it:

<img src="image.svg" alt="Description of image">

In this code, 'image.svg' is the SVG file you want to display, and 'Description of image' is the alternative text for the image.

Manipulating SVGs with CSS

Just like HTML elements, SVG elements can be styled with CSS. Here's an example:

<svg width="100" height="100">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<style>
  #myCircle {
    fill: blue;
  }
</style>

In this example, we've used CSS to change the fill color of the circle to blue.

Animating SVGs with CSS

SVGs also support animations with CSS. Here's an example:

<svg width="100" height="100">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<style>
  #myCircle {
    animation: grow 2s infinite;
  }

  @keyframes grow {
    from {
      r: 40;
    }

    to {
      r: 50;
    }
  }
</style>

In this example, we've created an animation that makes the circle grow from 40 pixels in radius to 50 pixels in radius over 2 seconds. The animation repeats indefinitely.

Conclusion

SVGs offer a lot of flexibility and power when used in HTML. They are scalable, stylable, animatable, and accessible. They can be used inline in your HTML or as an image source. With the right CSS and JavaScript, you can create some really interesting and interactive graphics with SVGs.