Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Interactive Vector Graphics in the Browser
<ul><ul><li>Without Plugin </li></ul></ul><ul><ul><li>HTML, VML, SVG, Canvas </li></ul></ul><ul><ul><li>With Plugin  </li>...
Without Plugin <ul><li>HTML-“hacking“ </li></ul><ul><ul><li><div> with CSS, images </li></ul></ul><ul><li>Mark-up language...
Graphics using HTML <ul><li><div> , CSS und  position:absolute; </li></ul><ul><ul><li>Walter Zorn  http://www.walterzorn.d...
Graphics using HTML <ul><li>Combinations with server-side graphics </li></ul><ul><ul><li>http://thinkature.com/   </li></u...
VML <ul><li>Vector Markup Language </li></ul><ul><li>by Microsoft and Macromedia </li></ul><ul><li>Internet Explorer </li>...
VML code example <ul><ul><li><html xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot;> </li></ul></ul><ul><ul><li><body> </...
VML example <ul><li>Google Maps drawings in IE </li></ul><ul><ul><li>http://maps.google.com/maps?f=d&saddr=M%C3%BCnchen&da...
SVG <ul><li>Scalable Vector Graphics </li></ul><ul><li>specified by W3C  (VML- and PGML-Authors involved) </li></ul><ul><l...
SVG code example <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1/...
SVG examples <ul><li>Google Maps in all „other“ browsers </li></ul><ul><ul><li>http://maps.google.com/maps?f=d&saddr=M%C3%...
Canvas <ul><li>Originally by Apple, now in HTML 5 </li></ul><ul><li>Firefox, Opera, Safari, etc. </li></ul><ul><ul><li>Plu...
<ul><li>var canvas = document.getElementById('tutorial'); </li></ul><ul><li>var ctx = canvas.getContext('2d'); </li></ul><...
Canvas <ul><li>Problems, e.g.:  </li></ul><ul><ul><li>Developed for static images  </li></ul></ul><ul><ul><li>Animations t...
Canvas Examples <ul><li>3D movie  </li></ul><ul><ul><li>http://antisocial.demozoo.org/ </li></ul></ul><ul><li>Ego shooter ...
Cross-browser JavaScript Libs <ul><li>svg2vml  http://code.google.com/p/svg2vml/ </li></ul><ul><li>ExtJS Extension http://...
With Plugin <ul><li>Flash </li></ul><ul><ul><li>Standard Flash and others </li></ul></ul><ul><ul><li>Flex  http://www.adob...
Silverlight <ul><li>Plugin by Microsoft </li></ul><ul><ul><li>Win and Mac, moonlight for Linux </li></ul></ul><ul><ul><li>...
Further Sources <ul><li>VML and SVG code examples:  http://de.wikipedia.org/wiki/Vector_Markup_Language </li></ul><ul><li>...
Upcoming SlideShare
Loading in …5
×

Interactive Vector-Graphics in the Browser

6,694 views

Published on

How do google maps' or yahoo pipes' interactive browser graphics work? What can I use to code something similiar without having to use browser plugins?
An overview and link-collection about client side generated vector graphics in the browser.

Presentation was given at Barcamp Berlin 2008.

(cc) by Silvan T. Golega
http://creativecommons.org/licenses/by/3.0/de/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Interactive Vector-Graphics in the Browser

  1. 1. Interactive Vector Graphics in the Browser
  2. 2. <ul><ul><li>Without Plugin </li></ul></ul><ul><ul><li>HTML, VML, SVG, Canvas </li></ul></ul><ul><ul><li>With Plugin </li></ul></ul><ul><ul><li>Flash, Java, Silverlight </li></ul></ul>
  3. 3. Without Plugin <ul><li>HTML-“hacking“ </li></ul><ul><ul><li><div> with CSS, images </li></ul></ul><ul><li>Mark-up languages </li></ul><ul><ul><li>VML and SVG </li></ul></ul><ul><li>Instruction-oriented </li></ul><ul><ul><li>Canvas, dojo.gfx, and others </li></ul></ul>
  4. 4. Graphics using HTML <ul><li><div> , CSS und position:absolute; </li></ul><ul><ul><li>Walter Zorn http://www.walterzorn.de/jsgraphics/jsgraphics.htm </li></ul></ul>
  5. 5. Graphics using HTML <ul><li>Combinations with server-side graphics </li></ul><ul><ul><li>http://thinkature.com/ </li></ul></ul>
  6. 6. VML <ul><li>Vector Markup Language </li></ul><ul><li>by Microsoft and Macromedia </li></ul><ul><li>Internet Explorer </li></ul><ul><li>embedded in HTML </li></ul>
  7. 7. VML code example <ul><ul><li><html xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot;> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><v:oval style=&quot;position: absolute; left: 0; top: 0; </li></ul></ul><ul><ul><li>width: 100px; height: 50px; </li></ul></ul><ul><ul><li>behavior: url(#default#VML);&quot; </li></ul></ul><ul><ul><li>fillcolor=&quot;blue&quot; stroked=&quot;false&quot;> </li></ul></ul><ul><ul><li></v:oval> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  8. 8. VML example <ul><li>Google Maps drawings in IE </li></ul><ul><ul><li>http://maps.google.com/maps?f=d&saddr=M%C3%BCnchen&daddr=Berlin&hl=de&geocode=&mra=ls&sll=50.247205,12.304688&sspn=5.178193,11.206055&ie=UTF8&ll=50.34546,12.304688&spn=5.167523,11.206055&z=7 </li></ul></ul>
  9. 9. SVG <ul><li>Scalable Vector Graphics </li></ul><ul><li>specified by W3C (VML- and PGML-Authors involved) </li></ul><ul><li>Native in FireFox, Opera, Safari, etc. </li></ul><ul><li>Plugin for IE by Adobe </li></ul>
  10. 10. SVG code example <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> </li></ul><ul><li><svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100&quot; height=&quot;50&quot;> </li></ul><ul><li><ellipse cx=&quot;50&quot; cy=&quot;25&quot; rx=&quot;50&quot; ry=&quot;25&quot; style=&quot;fill: blue;&quot; /> </li></ul><ul><li></svg> </li></ul>
  11. 11. SVG examples <ul><li>Google Maps in all „other“ browsers </li></ul><ul><ul><li>http://maps.google.com/maps?f=d&saddr=M%C3%BCnchen&daddr=Berlin&hl=de&geocode=&mra=ls&sll=50.247205,12.304688&sspn=5.178193,11.206055&ie=UTF8&ll=50.34546,12.304688&spn=5.167523,11.206055&z=7 </li></ul></ul><ul><li>RapidRabb.it prototype editor </li></ul><ul><ul><li>http://rapidrabb.it/preview </li></ul></ul>
  12. 12. Canvas <ul><li>Originally by Apple, now in HTML 5 </li></ul><ul><li>Firefox, Opera, Safari, etc. </li></ul><ul><ul><li>Plugin for IE by Novell </li></ul></ul><ul><ul><li>Canvas to VML using JavaScript by Google </li></ul></ul><ul><li>Canvas drawing instructions, no DOM API </li></ul>
  13. 13. <ul><li>var canvas = document.getElementById('tutorial'); </li></ul><ul><li>var ctx = canvas.getContext('2d'); </li></ul><ul><li>ctx.beginPath(); </li></ul><ul><li>ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle </li></ul><ul><li>ctx.moveTo(110,75); </li></ul><ul><li>ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) </li></ul><ul><li>ctx.moveTo(65,65); </li></ul><ul><li>ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye </li></ul><ul><li>ctx.moveTo(95,65); </li></ul><ul><li>ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye </li></ul><ul><li>ctx.stroke(); </li></ul>(Sample from mozilla.org)
  14. 14. Canvas <ul><li>Problems, e.g.: </li></ul><ul><ul><li>Developed for static images </li></ul></ul><ul><ul><li>Animations through frames </li></ul></ul><ul><ul><li>Catching events e.g. clicks </li></ul></ul><ul><li>Strengths </li></ul><ul><ul><li>Fast </li></ul></ul><ul><ul><li>Extensions (3D, ...) </li></ul></ul>
  15. 15. Canvas Examples <ul><li>3D movie </li></ul><ul><ul><li>http://antisocial.demozoo.org/ </li></ul></ul><ul><li>Ego shooter </li></ul><ul><ul><li>http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm </li></ul></ul><ul><li>Mind mapping </li></ul><ul><ul><li>http://mindmeister.de </li></ul></ul><ul><li>Yahoo Pipes </li></ul><ul><ul><li>http://pipes.yahoo.com/ </li></ul></ul>
  16. 16. Cross-browser JavaScript Libs <ul><li>svg2vml http://code.google.com/p/svg2vml/ </li></ul><ul><li>ExtJS Extension http://code.google.com/p/vector-graphics-ext </li></ul><ul><li>Dojo GFX http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/drawing-gfx </li></ul><ul><li>gwt-canvas http://code.google.com/p/gwt-canvas/ </li></ul>
  17. 17. With Plugin <ul><li>Flash </li></ul><ul><ul><li>Standard Flash and others </li></ul></ul><ul><ul><li>Flex http://www.adobe.com/products/flex/ </li></ul></ul><ul><ul><li>OpenLazlo http://www.openlaszlo.org/ </li></ul></ul><ul><li>Java </li></ul><ul><ul><li>Standard-Java, Java with OpenGL, </li></ul></ul><ul><ul><li>JavaFX http://javafx.com/ </li></ul></ul><ul><li>Silverlight </li></ul>
  18. 18. Silverlight <ul><li>Plugin by Microsoft </li></ul><ul><ul><li>Win and Mac, moonlight for Linux </li></ul></ul><ul><ul><li>IE, Firefox und Safari, Opera announced </li></ul></ul><ul><li>XAML for vector graphics and control elements </li></ul><ul><ul><li>similiar to SVG </li></ul></ul><ul><ul><li>supports parts of Windows Presentation Foundation </li></ul></ul><ul><li>IDE for distinct roles in development </li></ul>
  19. 19. Further Sources <ul><li>VML and SVG code examples: http://de.wikipedia.org/wiki/Vector_Markup_Language </li></ul><ul><li>Canvas code example:  http://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes </li></ul>

×