HTML SVG-Basics

❮ Previous Next ❯

SVG defines vector-based graphics in XML format.

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is a way to create pictures for the Internet.

The HTML <svg> Element

The <svg> element in HTML is like a box that holds SVG graphics.

SVG offers various techniques to create drawings, including paths, shapes like boxes and circles, text, and images.

SVG Circle

SVG Rectangle

SVG Rounded Rectangle

SVG Star

Differences Between SVG and Canvas

SVG is a way to use XML to explain 2D drawings and pictures.

Canvas creates 2D visuals instantly using JavaScript.

SVG operates on XML technology, ensuring each element is accessible in the SVG DOM. This enables you to associate JavaScript event handlers with an element.

In SVG, every shape you draw is like a separate thing. If you modify how a shape looks in SVG, the browser can redraw it automatically.

In simple terms, a canvas is like a grid where each tiny square (pixel) is painted one by one. When we draw something on a canvas, the browser doesn't remember it. So, if we want to move it, we have to redraw everything, even what was hidden behind it.

Comparison of Canvas and SVG

Check out the table below for key distinctions between Canvas and SVG:

Canvas	SVG
Resolution dependent Event handlers are not supported. Limited ability to display text effectively You can choose to save the image you get as either a .png or .jpg file. Ideal for graphics-intensive gaming.	Resolution independent Backing for event handlers Particularly useful for applications that require extensive display areas (like Google Maps). If something uses a lot of the webpage's structure (DOM), it might make the webpage load slowly. Not recommended for gaming.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <svg width="400" height="100">
      <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
    </svg>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <svg width="400" height="180">
      <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    </svg>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <svg width="300" height="200">
      <polygon points="100,10 40,198 190,78 10,78 160,198"
        style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
  </body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML