SVG in HTML

Scalable Vector Graphics (SVG) has become an indispensable part of modern web development. SVG enables developers to create high-quality, scalable graphics that look crisp at any size or resolution. In this blog post, we'll explore the basics of using SVG in HTML, its benefits, and some practical examples.

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

SVG can be embedded in HTML in several ways:

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

Inline SVG Example

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

img Tag Example

<img src="image.svg" alt="Sample Svg" width="100" height="100" />

CSS Background Example

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

SVG Attributes

SVG comes with a set of attributes to control its behavior:

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

Practical Examples

Creating a Simple Icon

<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>

Creating Complex Shapes

SVG can also be used to create more complex shapes like polygons, lines, and text.

<svg width="100" height="100" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="blue" />
  <circle cx="50" cy="50" r="30" fill="red" />
  <polygon points="50,10 90,90 10,90" fill="green" />
</svg>

Conclusion

SVG offers a powerful way to add scalable and interactive graphics to your HTML documents. Its compatibility with CSS and JavaScript makes it a versatile choice for modern web development. Whether you're creating simple icons or intricate illustrations, SVG has got you covered.

CoderrShyam