Snap Presentation

Zeichnen in HTML – Snap SVG Walter C. Kammergruber, 14.3.2014

Was gibt es heute? I. Canvas vs SVG II. Snap
III. Beispiele

I. Canvas vs SVG

Unterschied Canvas - SVG Canvas • Bitmap-basiert • Vergleichbar mit
jpg, gif, bmp SVG • Vector-basiert • Vergleichbar mit psd, cdr, pdf oder eben svg (Inkscape)

SVG Browser-Unterstützung? http://caniuse.com/#feat=svg-html5

Canvas Browser-Unterstützung? http://caniuse.com/#feat=canvas

Canvas Beispiel <html> <head> <title>Canvas Rectangle Demo</title> </head> <body> <canvas
width="300" height="225" id="a"></canvas> <script> var canvas = document.getElementById("a"); var context = canvas.getContext("2d"); context.fillRect(50, 25, 150, 100); </script> </body> </html>

Einfaches SVG Beispiel <body> <svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"> <rect fill="#ed2939"
width="900" height="600" /> <rect fill="#fff" y="200" width="900" height="200" /> </svg> </body>

Nicht ganz einfaches SVG Beispiel Siehe source code in sublime...
Nichts für Menschen...

SVG Kreis-Animation Beispiel <body> <svg version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <defs>
<radialGradient id="circleGrad"> <stop offset="0%" stop-color="rgb(255, 255, 0)" /> <stop offset="100%" stop-color="rgb(0, 255, 0)" /> </radialGradient> </defs> <ellipse fill="url(#circleGrad)" stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%"> <animate attributeName="rx" values="0%;50%;0%" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="0%;50%;0%" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> </body> http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

SVG Koordinatensystem 0 0 50 100 350 400 350 350
350 350 50 100 150 200 250 <rect x=”50” y="50" width="150" height="100" fill="#fff" /> x y

II. Snap

Über Snap • Vom Entwickler (Dmitry Baranovskiy) von Raphaël (_die_
library für SVG) • Unterstützt von Adobe, release am 23.10.2013 • Für moderne Browser (IE9+, Safari, Chrome, Firefox und Opera) entwickelt • Unterstützt: Masking, clipping, patterns, full gradients, groups, etc. • Man kann normale SVG-Dateien verwenden (z.B. aus Inkscape, InDesign) • Einfache Animationen mittels JavaScript • Lizenz: Apache 2 • Zu finden unter: http://snapsvg.io/

III. Beispiele Siehe https://bitbucket.org/woidda/snap-svg-demos/src

Wichtige Paper Formen/ Funktionen • circle() • ellipse() • line()
• path() • poloygon(), polyline() • rect() • text() • image() • g() oder group() • animate() • transform()

Wichtige Snap Funktionen • Snap() -> vergleichbar Konstruktor, eher Factory-Methode
• load() • select() • selectAll() http://snapsvg.io/docs/

Links • Svg vs canvas: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ • Canvas tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
• SVG 1.1 Spec: http://www.w3.org/TR/SVG11/ • Snap: http://snapsvg.io/ • Raphaël Reference: http://raphaeljs.com/reference.html z.B für Element.transform() • Ein paar weiter Beispiele zu Snap: http://svg.dabbles.info/ • Schauen welcher Browser was unterstützt: http://caniuse.com/ • Adobe release Snap: http://www.adobe.com/aboutadobe/pressroom/pressreleases/201310/1023 13AdobeReleasesSnapsvg.html

Vielen Dank für die Aufmerksamkeit

Snap Presentation

Snap Presentation

Woidda

More Decks by Woidda

Other Decks in Programming

Featured

Transcript

Zeichnen in HTML – Snap SVG Walter C. Kammergruber, 14.3.2014

Was gibt es heute? I. Canvas vs SVG II. Snap

I. Canvas vs SVG

Unterschied Canvas - SVG Canvas • Bitmap-basiert • Vergleichbar mit

SVG Browser-Unterstützung? http://caniuse.com/#feat=svg-html5

Canvas Browser-Unterstützung? http://caniuse.com/#feat=canvas

Canvas Beispiel <html> <head> <title>Canvas Rectangle Demo</title> </head> <body> <canvas

Canvas Beispiel <html> <head> <title>Canvas Rectangle Demo</title> </head> <body> <canvas

Einfaches SVG Beispiel <body> <svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"> <rect fill="#ed2939"

Einfaches SVG Beispiel <body> <svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"> <rect fill="#ed2939"

Nicht ganz einfaches SVG Beispiel Siehe source code in sublime...

SVG Kreis-Animation Beispiel <body> <svg version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <defs>

SVG Koordinatensystem 0 0 50 100 350 400 350 350

II. Snap

Über Snap • Vom Entwickler (Dmitry Baranovskiy) von Raphaël (_die_

III. Beispiele Siehe https://bitbucket.org/woidda/snap-svg-demos/src

Wichtige Paper Formen/ Funktionen • circle() • ellipse() • line()

Wichtige Snap Funktionen • Snap() -> vergleichbar Konstruktor, eher Factory-Methode

Links • Svg vs canvas: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ • Canvas tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

Vielen Dank für die Aufmerksamkeit