13. SVG in HTML

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.

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.

complex fiels

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

How to Embed SVG in HTML

SVG can be embedded in HTML in several ways:

  1. Inline SVG: Directly writing the SVG XML code within HTML.
  2. Using an 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>

Tag Example:

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

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.

Example:

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