SVG is text-based
Resolution Independent
Reducing HTTP Request
Styling and Scripting
Can be animated and Edited
Smaller File Size
SVG is XML and works within other language formats
SVG is easily edited
2. Introduction :
ScalableVector Graphics (SVG) is an XML-based vector
image format for two-dimensional graphics that has support
for interactivity and animation.The SVG specification is an
open standard developed by the WorldWideWeb
Consortium (W3C) since 1999. SVG allows three types of
graphic objects: vector graphics, raster graphics, and
text.
3/25/20142
3. About SVG :
3/25/20143
Filename extension : .svg, .svgz
Internet media type : image/svg+xml
Type code : "svg ", "svgz"
UniformType Identifier : public.svg-image
UTI conforms to : public.image and public.xml
Developed by : W3C
Initial release : 4 September 2001; 12 years ago
Latest release : 1.1 (Second Edition) / 16August 2011; 2 years ago
Type of format : Vector image format
Extended from : XML
4. Why use SVG?
SVG is text-based
Resolution Independent
Reducing HTTP Request
Styling and Scripting
Can be animated and Edited
Smaller File Size
SVG is XML and works within other language
formats
SVG is easily edited
3/25/20144
5. Advantages of SRG over SVG:
3/25/2014
This image illustrates the difference between Raster(bitmap) and
Vector images.
The Raster image is composed of a fixed set of dots, while the
vector image is composed of a fixed set of shapes.
In the picture, scaling the bitmap reveals the dots while scaling the
vector image preserves the shapes.
5
6. SVG on the web :
3/25/20146
Google announced on 31August 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.
7. SVG(1.1) supported browsers:
3/25/20147
Flock
Firefox
Camino
Konqueror
SeaMonkey
Apple's Safari
Google Chrome
The Omni Group's OmniWeb
Internet Explorer 9,Amaya(partially supports SVG)
8. Example of an ellipse SVG image with code :
3/25/20148
9. Example of an ellipse SVG image with code
and within text :
3/25/20149