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

http://www.slideshare.net	19
http://hi.chibaole.com	2
http://rapidrabb.it	1
http://webcache.googleusercontent.com	1

Interactive Vector-Graphics in the Browser

by tec

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 23

Statistics

Interactive Vector-Graphics in the Browser Presentation Transcript