Interactive Vector-Graphics in the Browser

Interactive Vector Graphics in the Browser

Without Plugin HTML, VML, SVG, Canvas With Plugin Flash, Java, Silverlight

Without Plugin HTML-“hacking“ <div> with CSS, images Mark-up languages VML and SVG Instruction-oriented Canvas, dojo.gfx, and others

Graphics using HTML <div> , CSS und position:absolute; Walter Zorn http://www.walterzorn.de/jsgraphics/jsgraphics.htm

Graphics using HTML Combinations with server-side graphics http://thinkature.com/

VML Vector Markup Language by Microsoft and Macromedia Internet Explorer embedded in HTML

VML code example <html xmlns:v="urn:schemas-microsoft-com:vml"> <body> <v:oval style="position: absolute; left: 0; top: 0; width: 100px; height: 50px; behavior: url(#default#VML);" fillcolor="blue" stroked="false"> </v:oval> </body> </html>

VML example Google Maps drawings in IE 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

SVG Scalable Vector Graphics specified by W3C (VML- and PGML-Authors involved) Native in FireFox, Opera, Safari, etc. Plugin for IE by Adobe

SVG code example <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"> <ellipse cx="50" cy="25" rx="50" ry="25" style="fill: blue;" /> </svg>

SVG examples Google Maps in all „other“ browsers 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 RapidRabb.it prototype editor http://rapidrabb.it/preview

Canvas Originally by Apple, now in HTML 5 Firefox, Opera, Safari, etc. Plugin for IE by Novell Canvas to VML using JavaScript by Google Canvas drawing instructions, no DOM API

var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); (Sample from mozilla.org)

Canvas Problems, e.g.: Developed for static images Animations through frames Catching events e.g. clicks Strengths Fast Extensions (3D, ...)

Canvas Examples 3D movie http://antisocial.demozoo.org/ Ego shooter http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm Mind mapping http://mindmeister.de Yahoo Pipes http://pipes.yahoo.com/

Cross-browser JavaScript Libs svg2vml http://code.google.com/p/svg2vml/ ExtJS Extension http://code.google.com/p/vector-graphics-ext Dojo GFX http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/drawing-gfx gwt-canvas http://code.google.com/p/gwt-canvas/

With Plugin Flash Standard Flash and others Flex http://www.adobe.com/products/flex/ OpenLazlo http://www.openlaszlo.org/ Java Standard-Java, Java with OpenGL, JavaFX http://javafx.com/ Silverlight

Silverlight Plugin by Microsoft Win and Mac, moonlight for Linux IE, Firefox und Safari, Opera announced XAML for vector graphics and control elements similiar to SVG supports parts of Windows Presentation Foundation IDE for distinct roles in development

Further Sources VML and SVG code examples: http://de.wikipedia.org/wiki/Vector_Markup_Language Canvas code example: http://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes

Interactive Vector-Graphics in the Browser

More Related Content

What's hot

Viewers also liked

Similar to Interactive Vector-Graphics in the Browser

Recently uploaded

Interactive Vector-Graphics in the Browser