SlideShare a Scribd company logo
1 of 63
Download to read offline
Web Vector Graphics



    Web Directions South ’08
     Dmitry Baranovskiy
Web Myths:
Web is text only
Web pages are static
Web is synchronous
Web is rectangular
Canvas   SVG
Canvas   SVG

 !
Canvas   SVG

 !
Canvas   SVG
SVG
<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<!DOCTYPE svg PUBLIC quot;-//W3C//DTD SVG 1.1//ENquot; quot;http://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtdquot;>
<svg version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot;
xmlns:xlink=quot;http://www.w3.org/1999/xlinkquot;>
    <rect fill=quot;#333quot; width=quot;426quot; height=quot;260.667quot;/>
    <ellipse cx=quot;213quot; cy=quot;130quot; rx=quot;205quot; ry=quot;117quot;>
        <animate attributeName=quot;fillquot; attributeType=quot;CSSquot;
                 begin=quot;0squot; dur=quot;6squot; fill=quot;freezequot;
                 from=quot;#000quot; to=quot;#f00quot;/>
        <animate attributeName=quot;rxquot; begin=quot;0squot; dur=quot;6squot;
                 fill=quot;freezequot; from=quot;205quot; to=quot;117quot;/>
    </ellipse>
    <path fill=quot;nonequot; stroke=quot;#fffquot; stroke-width=quot;5quot;
          stroke-linecap=quot;roundquot;
          d=quot;M24.397,99.601c0,0,12.537,0,16.805,0s10.137,
             5.869,10.137,5.869s16.273,43.75,18.94,49.885 ...
             s-1.601,63.224,12.805,63.224h28.01quot;/>
</svg>
Canvas
window.onload = function () {
    var elem = document.createElement(quot;canvasquot;);
    elem.width = 500;
    elem.height = 500;
    document.body.appendChild( elem );

     var context = elem.getContext(quot;2dquot;);

     context.fillRect(0, 0, elem.width, elem.height);

     var pos = 0, dir = 1;

     setInterval(function () {
         context.rotate( 15 );

        context.fillStyle = quot;rgba(0,0,0,0.05)quot;;
        context.fillRect(0, 0, elem.width, elem.height);

        context.fillStyle = quot;rgba(255, 0, 0, 1)quot;;
        context.fillRect(pos, pos, 20, 20);

        pos += dir;

         if ( pos > elem.width ) {
             dir = -1;
         } else if ( pos + 20 < 0 ) {
             dir = 1;
         }
     }, 10);
};
Canvas
Canvas


 SVG
Support
Does browser support
      Canvas?
Does browser support
          Canvas?

if (window.CanvasRenderingContext2D) {
    …
}
Does browser support
       SVG?
Does browser support
           SVG?

if (window.SVGAngle) {
    …
}
178
6
SVGAngle
SVGLength
SVGPathSeg
SVGPreserveAspectRatio
SVGTransform
SVGUnitTypes
Tests:

SVG 178 : http://www.w3.org/Graphics/SVG/Test/20061213/
            htmlObjectHarness/full index.html

Canvas 672 : http://philip.html5.org/tests/canvas/suite/tests/
203
           118



   469
           160


  Canvas   SVG




64%
182     60



   490     218



  Canvas   SVG




76%
30
   184


           248
   488



  Canvas   SVG




81%
What does it mean?
ere is support
…with one
Important Exception
0%
VML
VML
VML
VML
So, what can you do
with Canvas ! SVG?
Shapes
Images
Text
Canvas   SVG   VML
JavaScript off
CSS
Result          pixels   DOM   DOM
Animation
Filters
Image Data
Text
Stand alone
Easy to use
SVG

Canvas VML
What stops you from
 using this now?
How to do this across
  all the browsers?
DojoX

http://dojotoolkit.org/projects/dojox/
ExCanvas.js
           !
       mooCanvas.js

    http://excanvas.sourceforge.net/
http://ibolmo.com/projects/moocanvas/
Raphaël

http://raphaeljs.com/
Cappuccino

http://cappuccino.org/
Just go and do it!
ank You



http://dmitry.baranovskiy.com/
   dmitry@baranovskiy.com

More Related Content

What's hot

Draw stuff at @jsnortheast
Draw stuff at @jsnortheastDraw stuff at @jsnortheast
Draw stuff at @jsnortheast
Richard Powell
 
от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4
rit2011
 
Let's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal
Let's explore AngularJS / [fr]Explorons AngularJS. GDG MontrealLet's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal
Let's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal
Sacha Leprêtre
 

What's hot (13)

Real-time collaborative drawing
Real-time collaborative drawingReal-time collaborative drawing
Real-time collaborative drawing
 
Draw stuff at @jsnortheast
Draw stuff at @jsnortheastDraw stuff at @jsnortheast
Draw stuff at @jsnortheast
 
Portamento js
Portamento jsPortamento js
Portamento js
 
Pokelabo flash 2013/4
Pokelabo flash 2013/4Pokelabo flash 2013/4
Pokelabo flash 2013/4
 
Javascript: A sneak preview
Javascript: A sneak previewJavascript: A sneak preview
Javascript: A sneak preview
 
HTML5 & IE
HTML5 & IEHTML5 & IE
HTML5 & IE
 
от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4
 
AWS Lambda with ClaudiaJS
AWS Lambda with ClaudiaJSAWS Lambda with ClaudiaJS
AWS Lambda with ClaudiaJS
 
Let's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal
Let's explore AngularJS / [fr]Explorons AngularJS. GDG MontrealLet's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal
Let's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal
 
More efficient, usable web
More efficient, usable webMore efficient, usable web
More efficient, usable web
 
How to build a static website in two and a half days with Nuxt and Tailwind CSS
How to build a static website in two and a half days with Nuxt and Tailwind CSSHow to build a static website in two and a half days with Nuxt and Tailwind CSS
How to build a static website in two and a half days with Nuxt and Tailwind CSS
 
Webové aplikace v JavaScriptu
Webové aplikace v JavaScriptuWebové aplikace v JavaScriptu
Webové aplikace v JavaScriptu
 
Webdings and Wingdings
Webdings and WingdingsWebdings and Wingdings
Webdings and Wingdings
 

Similar to Web Vector Graphics

HTML5 and SVG
HTML5 and SVGHTML5 and SVG
HTML5 and SVG
yarcub
 
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
Boris Zapolsky
 
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
 

Similar to Web Vector Graphics (20)

Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
 
HTML5 and SVG
HTML5 and SVGHTML5 and SVG
HTML5 and SVG
 
Svg Overview And Js Libraries
Svg Overview And Js LibrariesSvg Overview And Js Libraries
Svg Overview And Js Libraries
 
Plunge into HTML5 Canvas – Let’s begin
Plunge into HTML5 Canvas – Let’s beginPlunge into HTML5 Canvas – Let’s begin
Plunge into HTML5 Canvas – Let’s begin
 
SVG introduction
SVG   introductionSVG   introduction
SVG introduction
 
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
Working With Canvas
Working With CanvasWorking With Canvas
Working With Canvas
 
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
 
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
 
The State of Web Development
The State of Web DevelopmentThe State of Web Development
The State of Web Development
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
SVG and the web
SVG and the webSVG and the web
SVG and the web
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
JSinSA - JS Visualisation APIs
JSinSA - JS Visualisation APIsJSinSA - JS Visualisation APIs
JSinSA - JS Visualisation APIs
 

More from Dmitry Baranovskiy (15)

JavaScript: enter the dragon
JavaScript: enter the dragonJavaScript: enter the dragon
JavaScript: enter the dragon
 
The Origins of Magic
The Origins of MagicThe Origins of Magic
The Origins of Magic
 
Demystifying Prototypes
Demystifying PrototypesDemystifying Prototypes
Demystifying Prototypes
 
Raphaël
RaphaëlRaphaël
Raphaël
 
Type Recognition
Type RecognitionType Recognition
Type Recognition
 
Raphaël JS Conf
Raphaël JS ConfRaphaël JS Conf
Raphaël JS Conf
 
Obvious Secrets of JavaScript
Obvious Secrets of JavaScriptObvious Secrets of JavaScript
Obvious Secrets of JavaScript
 
Your JavaScript Library
Your JavaScript LibraryYour JavaScript Library
Your JavaScript Library
 
Canvas
CanvasCanvas
Canvas
 
SVG
SVGSVG
SVG
 
Java Script Workshop
Java Script WorkshopJava Script Workshop
Java Script Workshop
 
Raphael
RaphaelRaphael
Raphael
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 
Microformats—the hidden treasure
Microformats—the hidden treasureMicroformats—the hidden treasure
Microformats—the hidden treasure
 
Advanced JavaScript Techniques
Advanced JavaScript TechniquesAdvanced JavaScript Techniques
Advanced JavaScript Techniques
 

Recently uploaded

“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 

Recently uploaded (20)

Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 

Web Vector Graphics