Scalable Vector Graphic

  • Defines the graphics in XML format
  •  Graphics do NOT lose any quality if they are zoomed or resized
  • Every element and every attribute in SVG files can be animated
  • Is a W3C recommendation
  • Integrates with other W3C standards such as the DOM and XSL.

Why SVG?

  • Advantages of using SVG over other image formats (like JPEG and GIF) are:
  •  images can be created and edited with any text editor
  •  images can be searched, indexed, scripted, and compressed
  • images are scalable, can be rendered in any size and resolution without reduction of quality “Worry free” resizing,  you might think of it as.
  • SVG quality images helps vision impairments. a tick for accessibility.
  • Controlled with CSS and JavaScript

How do I create an SVG?

Graphic made in Adobe Illustrator

The Scandinavian symbol for something worth seeing.

SVG In Html5 using code

In HTML5 you can embed SVG elements directly into your HTML pages

For example: Circle

Code explained:

  • An SVG image begins with an <svg> element
  • The width and height attributes of the <svg> element define the width and height of the SVG image
  • The<circle>element is used to draw a circle.
  • The cx and cy attributes define the x and y coordinates of the centre of the circle. If cx and cy are omitted, the circle’s centre is set to (0, 0)
  • The r attribute defines the radius of the circle
  • The stroke and stroke-width attributes control how the outline of a shape appears. I set the outline of the circle to a 4px green “border”
  • The fill attribute refers to the colour inside the circle. I set the fill colour to aqua
  • The closing</svg> tag closes the SVG image.

Other shapes Rectangle, Ellipse & Line.    


Code for each shape: