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.
- 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.
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
- 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:
Posted by: Lyla