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>

Related Posts:

  • Definition Lists A Definition List in HTML is used to represent a list of terms along with their corresponding descriptions or definitions. The Definition List i… Read More
  • HTML TablesThe <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of ce… Read More
  • block level element What are Block-level Elements?Block-level elements are those that start on a new line and take up the entire width of their container by default… Read More
  • INLINE ELEMENTS Inline Elements don't start on a new line. It only takes the width required to cover the content.HTML elements are generally divided into two ca… Read More
  • More on Tables Adding a CaptionTo add a title to your table, you can use the <caption> element. This element helps both in terms of SEO and acc… Read More

0 Comments:

Post a Comment

Do leave your comments