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

0 comments

Notes on slide 1

Favorites, Groups & Events

Interactive Vector-Graphics in the Browser - Presentation Transcript

More by user

More Info

Categories

Tags

Interactive Vector-Graphics in the Browser

0 comments

Notes on slide 1

Favorites, Groups & Events

Interactive Vector-Graphics in the Browser - Presentation Transcript

Related Presentations

More by user

More Info

Categories

Tags