SlideShare ist ein Scribd-Unternehmen logo
1 von 21
SVG
The return
by David Corbacho
@dcorbacho
SVG : Drawing vector graphics
with XML code
<line>
VML, by Microsoft
and others
PGML by Adobe
1998. 6 competing proposals
W3C starts to work on SVG. 1998
SVG
W3C starts to work on SVG. 1998
SVG =
XML + DOM +
CSS + Animations (SMIL) +
Filters + Text + XLinks +
Transforms + SVG Fonts + etc
“… it was easier to say yes than no”
—Jon Ferraiolo
2001
SVG 1.0 is released
Adobe releases
“SVG Viewer 3”
2005. Adobe
adopts Flash
https://en.wikipedia.org/wiki/Browser_wars
2008
Apple blocks
Flash in iPhone
& iPad
<svg> inline tag
2010
IE 9 release.
Implements 60% of
SVG spec
2011
Apple Retina
display
We need crisp graphics for HD
screens, supported in all modern
browsers
It’s the SVG
Renaissance!
SVG Support
96.22% of browsers (Jan.2016)
Firefox 26+
Chrome 31+
IE10+
Safari 7+
Opera 19+
iOS Safari 3.2+
IE 9 (limited feature set)
Android 3.x (no SVG filters)
http://caniuse.com/#search=svg
USE SVG!
It’s ready for prime time.
But it is 15 years old!
SVG needs a bit updating,
SVG 2 is coming soon. Getting CSS-ified
SVG Experts
SVG
SVG community
@sarah_edo @anatudor@AmeliasBrain @rachelnabors@SaraSoueidan
Sharing best practices and code
@chriscoyier
"If you don't know SVG you can't call yourself
a Web Developer.
Call yourself a Web Enthusiast” — Dmitry
@DmitryBaranovsk
W3C SVG Working Group
@svgeesus @shepazu@erikdahlstromTavmjong Bah @dirkschulze
Pushing forward SVG
Thanks for
the timeline, Doug!
Thank you!
Grab a SVG Sticker
David Corbacho
Twitter @dcorbacho

Weitere ähnliche Inhalte

Ähnlich wie A Brief History and Evolution of SVG Graphics from 1998 to Present

Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5Doris Chen
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDoris Chen
 
Lessons Learned from working with HTML5, GlassFish and NetBeans
Lessons Learned from working with HTML5, GlassFish and NetBeansLessons Learned from working with HTML5, GlassFish and NetBeans
Lessons Learned from working with HTML5, GlassFish and NetBeansidrsolutions
 
An Introduction to HTML5 Canvas
An Introduction to HTML5 CanvasAn Introduction to HTML5 Canvas
An Introduction to HTML5 CanvasJohn Bristowe
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesPatric Lanhed
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationDavid Goemans
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performanceDevGAMM Conference
 
Modern Browser Support
Modern Browser SupportModern Browser Support
Modern Browser SupportMark Meeker
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
Web browsers manuel amador
Web browsers manuel amadorWeb browsers manuel amador
Web browsers manuel amadormaneamador7
 
Abusing JavaScript for fun and profit
Abusing JavaScript for fun and profitAbusing JavaScript for fun and profit
Abusing JavaScript for fun and profitMyles Eftos
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
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 DevelopmentTilak Joshi
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Seung Joon Choi
 

Ähnlich wie A Brief History and Evolution of SVG Graphics from 1998 to Present (20)

Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
 
Svg
SvgSvg
Svg
 
Lessons Learned from working with HTML5, GlassFish and NetBeans
Lessons Learned from working with HTML5, GlassFish and NetBeansLessons Learned from working with HTML5, GlassFish and NetBeans
Lessons Learned from working with HTML5, GlassFish and NetBeans
 
An Introduction to HTML5 Canvas
An Introduction to HTML5 CanvasAn Introduction to HTML5 Canvas
An Introduction to HTML5 Canvas
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holes
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimization
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 
SVG 101
SVG 101SVG 101
SVG 101
 
Modern Browser Support
Modern Browser SupportModern Browser Support
Modern Browser Support
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
Web browsers manuel amador
Web browsers manuel amadorWeb browsers manuel amador
Web browsers manuel amador
 
Abusing JavaScript for fun and profit
Abusing JavaScript for fun and profitAbusing JavaScript for fun and profit
Abusing JavaScript for fun and profit
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
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
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8
 
Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
 

Kürzlich hochgeladen

Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionSolGuruz
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about usDynamic Netsoft
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Modelsaagamshah0812
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsAndolasoft Inc
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...harshavardhanraghave
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...OnePlan Solutions
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsArshad QA
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...soniya singh
 
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxA Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxComplianceQuest1
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataBradBedford3
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationkaushalgiri8080
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsJhone kinadey
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfkalichargn70th171
 

Kürzlich hochgeladen (20)

Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about us
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
 
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxA Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docx
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanation
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
 

A Brief History and Evolution of SVG Graphics from 1998 to Present

Hinweis der Redaktion

  1. SVG is simple. It’s just tags and attributes. Very similar to HTML. It’s human readable text… and at the same time.. it’s a graphic. CLICK It’s exactly this double personality that makes SVG special. This talk will be about the origins of SVG. There is a nice story to tell here.
  2. W3C said.. let’s make a standard on vector graphics. Send me your proposals! And it had 6 competing proposals on the table W3C just needed to pick one. Really,… just choose one.
  3. Exactly. Why to choose one when you can write a new one from scratch? SVG was born, CLICK taking the best parts from each one … specially inspired on VML from Microsoft.
  4. SVG specification it’s big. Really. It’s huge, it’s bigger than HTML specification. It has SO ma-ny fea-tu-res For example, Transforms: when you are using cool new CSS3 rotations today… think that this feature was inspired by SVG, and they had it for more than 15 years already. Why SVG is so big? Companies involved were pressuring to include features in SVG.. and it was easier to say yes that no. I think we all have been there
  5. SVG 1 was released in 2001 In that moment, let’s say that SVG got a bit frozen because in all this time, SVG hasn’t changed that much. The main supporter of SVG in the time, was Adobe. They made a plugin to view SVGs that worked in all browsers. That plugin was the first implementation of SVG. It was the prove that SVG works!   In that time, SVG future looked really promising
  6. But… One big set back, for SVG was that Flash, it got popular and Adobe bought Macromedia Sadly Adobe turned their back on SVG. They stopped support for their SVG Viewer plugin   SVG popularity went down. Let’s call it the SVG dark age. Why?
  7. Let’s remember for a second, Internet Explorer had 90% of browser market during those years. It didn’t matter that Firefox, Opera or Safari started already to implement some parts of SVG… because at the end of the day… Internet Explorer was the king, and they had their own vector graphics language, VML
  8. 2008. HTML 5 was born. SVG tag is introduced, so now we can inline svg inside of an HTML document
  9. Microsoft finally leaves their VML language behind.. and offers at least basic SVG support in Internet Explorer 9. Now, all browsers have at least some SVG basic support. Things are starting to change…
  10. Apple has made a big impact on SVG return, indirectly by: • Blocking Flash on iPhone • Releasing High density screens Apple set the trend for the rest of companies. Flash started to die in that moment.
  11. In this new situation,  Web developers need something to show crisp sharp graphics in smartphones. What technology do we have to achieve this? CLICK 
  12. It’s SVG Time
  13. SVG support is excellent today. So, my message today is:
  14. My message today is: Use SVG, understand SVG. SVG has been waiting for this moment for 15 years!
  15. 15 years in the web, it feels like a century I know..
  16. but don’t worry SVG 2 is coming soon Some parts, like Transforms, are developed as separate CSS modules, so it can be applied to both HTML and SVG
  17. In the meanwhile, to know best practices, and how to use SVG, you can learn from a small group of SVG experts