SVG - Scalable Vector Graphic

SVG (Scalable Vector Graphics )
AKILA IROSHAN

Outline
What is SVG
Why use SVG ?
Images vs SVG
Tools to create SVG
How to add SVG to web page
Graphical components of SVG
Demo
Canvas vs SVG
Use Cases

What is SVG?
SVG stands for Scalable Vector Graphics

SVG…
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG is a open standard developed by W3C recommendation
SVG graphics do NOT lose any quality if they are zoomed or resized
Access to the SVG elements trough the DOM
Retained mode : object tree is kept in memory
Elements and attributes in SVG files can be animated

SVG…
Filename extension : .svg, .svgz
Internet media type : image/svg+xml
Type code : "svg ", "svgz"
Uniform Type Identifier : public.svg-image
UTI conforms to : public.image and public.xml
Developed by : W3C
Initial release : 4 September 2001
Type of format : Vector image format
Extended from : XML

SVG on the web
Google announced on 31 August 2010 that it had started to index SVG
content on the web, whether it is in standalone files or embedded in
HTML, and that users would begin to see such content listed among
their search results. It was announced on 8 December 2010 that Google
Image Search would also begin indexing SVG files .On 28 January 2011,
it was discovered that Google was allowing Image Search results to be
restricted exclusively to SVG files.

Images vs SVG
In the picture, scaling the bitmap reveals the dots while scaling the vector
image preserves the shapes.
The Raster image is composed of a fixed set of dots, while the vector image is
composed of a fixed set of shapes.

Images vs SVG
Advantages of using SVG over other image formats (like JPEG and GIF)
are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoom able (and the image can be zoomed without
degradation)

Why use SVG ?
SVG is text-based
Resolution Independent
Smaller File Size
Reducing HTTP Request
Styling and Scripting
Can be animated and Edited
SVG is XML and works within other language formats

Tools to create SVG
Microsoft Visio
Export as SVG
Adobe Illustrator
Save as SVG
Inkscape
Free Open source software

 Using an <object> Tag
<object type="image/svg+xml" data="image.svg">Your browser does not
support SVG</object>
 Using an <embed> Tag
<embed type="image/svg+xml" src="image.svg" />
 Within an <iframe>
<iframe src="image.svg">Your browser does not support iframes</iframe>
 Using an <img> Tag
<img src="image.svg" />

 Inline SVG XML Embedded into Html 5 page
<html><body>
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" font-size="30">My SVG</text>
</svg>
</body></html>
 Using a CSS background image
#myelement { background-image: url(image.svg);}

Graphical components of SVG
Shapes
◦ Rectangle <rect>
◦ Circle <circle>
◦ Ellipse <ellipse>
◦ Line <line>
◦ Polyline <polyline>
◦ Polygon <polygon>
◦ Path <path>
Images <image>
Text <text>

SVG Rectangle - <rect>
The <rect> element is used to create a rectangle and variations of a
rectangle shape:
<svg width="400" height="110">
<rect width="300" height="100"
style="fill:rgb(0,255,256);stroke-width:3;
stroke:rgb(0,0,0)">
Sorry, your browser does not support inline SVG.
</svg>

Code explanation:
The width and height attributes of the <rect> element define the height
and the width of the rectangle
The style attribute is used to define CSS properties for the rectangle
The CSS fill property defines the fill color of the rectangle
The CSS stroke-width property defines the width of the border of the
rectangle
The CSS stroke property defines the color of the border of the rectangle

SVG <circle>
The <circle> element is used to create a circle:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="blue" />
</svg>

SVG <circle>
Code explanation:
The cx and cy attributes define the x and y coordinates of the center of
the circle. If cx and cy are omitted, the circle's center is set to (0,0)
The r attribute defines the radius of the circle

SVG Ellipse - <ellipse>
The <ellipse> element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an ellipse
has an x and a y radius that differs from each other, while a circle has
equal x and y radius:

SVG Ellipse - <ellipse>
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;
stroke-width:2" />
</svg>
The cx attribute defines the x coordinate of the center of the ellipse
The cy attribute defines the y coordinate of the center of the ellipse
The rx attribute defines the horizontal radius
The ry attribute defines the vertical radius

SVG <line>
The <line> element is used to create a line:
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

Code explanation:
The x1 attribute defines the start of the line on the x-axis
The y1 attribute defines the start of the line on the y-axis
The x2 attribute defines the end of the line on the x-axis
The y2 attribute defines the end of the line on the y-axis

SVG <polygon>
Polygon comes from Greek. "Poly" means "many" and "gon" means
"angle".
The <polygon> element is used to create a graphic that contains at least
three sides.
Polygons are made of straight lines, and the shape is "closed" (all the
lines connect up).

SVG <polygon>
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

SVG <polygon> Example 2
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;
stroke:purple;
stroke-width:1" />
</svg>

Change the fill-rule property to "evenodd":
<polygon points="100,10 40,180 190,60 10,60
160,180“ style="fill:lime; stroke:purple;
stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG <polyline>
The <polyline> element is used to create any shape that consists of only
straight lines:
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180“
style="fill:none;
stroke:black; stroke-width:3" />
</svg>

SVG <polyline> Example 2
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120
120,160“ style="fill:white;
stroke:red;stroke-width:4" />
</svg>

Canvas vs SVG
Canvas SVG
Abstraction
Pixel based (dynamic
bitmap)
Shape based
Elements
Single HTML element Multiple graphical
elements which become
part of the Document
Object Model (DOM)
Driver
Modified through Script
only
Modified through Script
and CSS
Event Model
User Interaction is
granular (x,y)
User Interaction is
abstracted (rect, path)
Performance
Performance is better
with smaller surface
and/or larger number of
objects
Performance is better
with smaller number of
objects and/or larger
surface.

Use Cases
Graph
◦ Styling and Transitions
Road Map
Complex Geometric UI elements
Logos
◦ scaling on the fly
Simple games
◦ Less animation and more information display

References
http://www.w3schools.com/svg/default.asp
http://www.sitepoint.com/add-svg-to-web-page/
https://css-tricks.com/svg-shape-morphing-works/
https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/

SVG - Scalable Vector Graphic

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to SVG - Scalable Vector Graphic

Similar to SVG - Scalable Vector Graphic (20)

Recently uploaded

Recently uploaded (20)

SVG - Scalable Vector Graphic