SlideShare une entreprise Scribd logo
1  sur  11
Presented by –
Pradip Kumar Mudi
Scalable Vector Graphics(SVG)
3/25/20141
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
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
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
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
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.
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)
Example of an ellipse SVG image with code :
3/25/20148
Example of an ellipse SVG image with code
and within text :
3/25/20149
Example of a SVG image :
3/25/201410
3/25/201411

Contenu connexe

En vedette (13)

Tema 4 ланцюгові дроби
Tema 4 ланцюгові дробиTema 4 ланцюгові дроби
Tema 4 ланцюгові дроби
 
Ple nuricita
Ple nuricitaPle nuricita
Ple nuricita
 
Каталог Esteban
Каталог EstebanКаталог Esteban
Каталог Esteban
 
デジタルガジェット選抜総選挙2015
デジタルガジェット選抜総選挙2015デジタルガジェット選抜総選挙2015
デジタルガジェット選抜総選挙2015
 
Institutions delivery1
Institutions delivery1Institutions delivery1
Institutions delivery1
 
Cuidar do futuro
Cuidar do futuroCuidar do futuro
Cuidar do futuro
 
ПРИКЛАДНА МАТЕМАТИКА
ПРИКЛАДНА МАТЕМАТИКАПРИКЛАДНА МАТЕМАТИКА
ПРИКЛАДНА МАТЕМАТИКА
 
Media presention
Media presentionMedia presention
Media presention
 
服貿黑箱「之前」發生的事 我們真的被煽動了嗎 (1)
服貿黑箱「之前」發生的事 我們真的被煽動了嗎  (1)服貿黑箱「之前」發生的事 我們真的被煽動了嗎  (1)
服貿黑箱「之前」發生的事 我們真的被煽動了嗎 (1)
 
Tema 3 2007
Tema 3 2007Tema 3 2007
Tema 3 2007
 
Tema 4 2007_ланцюгові дроби_interesno_znat
Tema 4 2007_ланцюгові дроби_interesno_znatTema 4 2007_ланцюгові дроби_interesno_znat
Tema 4 2007_ланцюгові дроби_interesno_znat
 
Ark dc the world2102140745
Ark dc the world2102140745Ark dc the world2102140745
Ark dc the world2102140745
 
Tema 1 2007
Tema 1 2007Tema 1 2007
Tema 1 2007
 

Similaire à Scalable vector graphics(svg)

Easy charting with
Easy charting withEasy charting with
Easy charting with
Major Ye
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
Mario Heiderich
 
Canvas Based Presentation tool - First Review
Canvas Based Presentation tool - First ReviewCanvas Based Presentation tool - First Review
Canvas Based Presentation tool - First Review
Arvind Krishnaa
 

Similaire à Scalable vector graphics(svg) (20)

Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
 
SVG Strikes Back
SVG Strikes BackSVG Strikes Back
SVG Strikes Back
 
Flash Web Development.pdf
Flash Web Development.pdfFlash Web Development.pdf
Flash Web Development.pdf
 
SVG 101
SVG 101SVG 101
SVG 101
 
Svg
SvgSvg
Svg
 
svg Scalable Vector Graphics (SVG)
 svg Scalable Vector Graphics  (SVG) svg Scalable Vector Graphics  (SVG)
svg Scalable Vector Graphics (SVG)
 
SVG
SVG SVG
SVG
 
Streaming of SVG animations on the Web
Streaming of SVG animations on the WebStreaming of SVG animations on the Web
Streaming of SVG animations on the Web
 
Easy charting with
Easy charting withEasy charting with
Easy charting with
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
 
Silverlight
SilverlightSilverlight
Silverlight
 
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
 
What is an SVG and How Should it be Used in Web Design?
What is an SVG and How Should it be Used in Web Design?What is an SVG and How Should it be Used in Web Design?
What is an SVG and How Should it be Used in Web Design?
 
Canvas Based Presentation tool - First Review
Canvas Based Presentation tool - First ReviewCanvas Based Presentation tool - First Review
Canvas Based Presentation tool - First Review
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Html5
Html5Html5
Html5
 
Responsive Web Design and SharePoint
Responsive Web Design and SharePointResponsive Web Design and SharePoint
Responsive Web Design and SharePoint
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 

Dernier

Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
Chris Hunter
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Dernier (20)

Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Role Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptxRole Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptx
 
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural ResourcesEnergy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 

Scalable vector graphics(svg)

  • 1. Presented by – Pradip Kumar Mudi Scalable Vector Graphics(SVG) 3/25/20141
  • 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
  • 10. Example of a SVG image : 3/25/201410