SVG in HTML

What is SVG?

• SVG stands for Scalable Vector Graphics. Unlike raster images like PNGs or JPGs, SVGs are not pixel-based. 
• They're composed of vectors—mathematical formulas that describe shapes, paths, and fills. This means SVGs can be resized without losing quality.

Why Use SVG?

Scalability

• SVG images can be scaled indefinitely without losing quality, which is ideal for responsive web design.

File Size

• SVG files are often smaller than their raster counterparts, especially for simple shapes and icons.

Flexibility

• SVGs can be styled, animated, and manipulated using CSS and JavaScript.

How to Embed SVG in HTML

1. Inline SVG: Directly writing the SVG XML code within HTML.
2. Using a <img> tag: Point the src attribute to an SVG file.
3. Using CSS: Setting SVG as a background image in a CSS file.

Inline SVG Example

<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<img> Tag Example

<img src="image.svg" alt="Sample SVG">

CSS Background Example

.background {
          background-image: url('image.svg');
        }

SVG Attributes

• width and height: To set the dimensions.
• viewBox: To set the coordinate system.
• fill and stroke: To set the colors.

Examples

<svg height="30" width="30">
    <rect width="30" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>