Earn income with your HTML skills

Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.

HTML SVG

HTML Canvas

HTML Media

SVG stands for Scalable Vector Graphics.

It is a graphic format that represents images as vectors.

The advantage of vector graphics is that it is small and scalable.

Example

#

An <svg> element with several svg line elements.

<svg width="400" height="220">
  <line x1="10" y1="10"  x2="10"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="30"  x2="30"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="50"  x2="50"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="70"  x2="70"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="90"  x2="90"  y2="200" style="stroke:purple;stroke-width:1" />
  <line x1="10" y1="110" x2="110" y2="200" style="stroke:red;stroke-width:1" />
  <line x1="10" y1="130" x2="130" y2="200" style="stroke:red;stroke-width:1" />
  <line x1="10" y1="150" x2="150" y2="200" style="stroke:red;stroke-width:1" />
  <line x1="10" y1="170" x2="170" y2="200" style="stroke:red;stroke-width:1" />
  <line x1="10" y1="190" x2="190" y2="200" style="stroke:red;stroke-width:1" />
</svg>

SVG is scalable. What does that mean?

#

When an image is scalable, it means it can be resized without pixelation or loss of detail

An SVG image can be enlarged without loss of quality.

You can zoom in as much as you want and the SVG image remains crisp and clear.

After scaling the PNG image is pixelated, whereas SVG is crisp.

Using SVG

#

The <svg> tag creates an SVG container with a specified width and height.

Inside the <svg> tag add special SVG tags for drawing shapes, texts, and graphics.

SVG images are much smaller than other image file formats like PNG, JPG, and GIF..

Drawing a circle in SVG

#

Using a <circle> SVG tag to draw and style a circle.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#333" 
          stroke-width="2" fill="lightblue" />
</svg>

Drawing a rectangle in SVG

#

Using a <rect> SVG tag to draw and style a rectangle.

<svg width="100" height="100">
  <rect width="100" height="100" 
        style="fill:lightblue;stroke:#333;stroke-width:4;" />
</svg>

Drawing a polygon in SVG

#

Using a <polygon> SVG tag to draw and style an arbitrary shape.

<svg width="100" height="100">
  <polygon points="5,37 50,5 95,37 20,99 80,99" 
           style="fill:lightblue;stroke:#333;stroke-width:2;fill-rule:evenodd;" />
</svg>

SVG versus Canvas

#

SVG

SVG is natively used for scalable 2D graphics.
SVG is XML based, which means each element is created using SVG DOM.
Each drawn shape is remembered as an object. Once an object changes, the browser re-renders the shape.

Canvas

Canvas uses Javascript to draw 2D graphics.
Once it's drawn, the browser will forget about it afterwards.
If something in the image changes, then JavaScript needs to redraw the entire scene.

Did you know?

#

You can create animations using SVG

With the help of CSS, you can create animations in SVG.
SVG even allows embedded stylesheets inside the <sgv> tag.

Animation of an svg circle sliding into view.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#333" 
          stroke-width="2" fill="lightblue" class="circle" />
  <style>
   .circle {
      animation-name: circleOrigin;
      animation-duration: 2s;
      animation-iteration-count: infinite;
   }
   @keyframes circleOrigin {
      from { transform: rotate(270deg); }
      to   { transform: rotate(360deg); }
   }
  </style>
</svg>

Browser Support

#

This table lists when <svg> support started for each browser:

Chrome	4.0	Jan 2010
Firefox	2.0	Oct 2006
IE/Edge	9.0	Mar 2011
Opera	10.0	Aug 2009
Safari	3.1	Mar 2008

#