Kinds of Graphics and Composition Vector Graphics Vs Bitmapped Graphics.
Web Vector Graphics
-
Upload
dmitry-baranovskiy -
Category
Technology
-
view
8.024 -
download
0
description
Transcript of Web Vector Graphics
![Page 1: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/1.jpg)
Web Vector Graphics
Web Directions South ’08Dmitry Baranovskiy
![Page 2: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/2.jpg)
Web Myths:
![Page 3: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/3.jpg)
Web is text!only
![Page 4: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/4.jpg)
Web pages are static
![Page 5: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/5.jpg)
Web is synchronous
![Page 6: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/6.jpg)
Web is rectangular
![Page 7: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/7.jpg)
![Page 8: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/8.jpg)
Canvas SVG
![Page 9: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/9.jpg)
Canvas SVG
!
![Page 10: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/10.jpg)
Canvas SVG
!
![Page 11: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/11.jpg)
Canvas SVG
![Page 12: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/12.jpg)
SVG
![Page 13: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/13.jpg)
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="#333" width="426" height="260.667"/> <ellipse cx="213" cy="130" rx="205" ry="117"> <animate attributeName="fill" attributeType="CSS" begin="0s" dur="6s" fill="freeze" from="#000" to="#f00"/> <animate attributeName="rx" begin="0s" dur="6s" fill="freeze" from="205" to="117"/> </ellipse> <path fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" d="M24.397,99.601c0,0,12.537,0,16.805,0s10.137, 5.869,10.137,5.869s16.273,43.75,18.94,49.885 ... s-1.601,63.224,12.805,63.224h28.01"/></svg>
![Page 14: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/14.jpg)
![Page 15: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/15.jpg)
Canvas
![Page 16: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/16.jpg)
window.onload = function () { var elem = document.createElement("canvas"); elem.width = 500; elem.height = 500; document.body.appendChild( elem );
var context = elem.getContext("2d");
context.fillRect(0, 0, elem.width, elem.height);
var pos = 0, dir = 1;
setInterval(function () { context.rotate( 15 );
context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0, 0, elem.width, elem.height);
context.fillStyle = "rgba(255, 0, 0, 1)"; context.fillRect(pos, pos, 20, 20);
pos += dir;
if ( pos > elem.width ) { dir = -1; } else if ( pos + 20 < 0 ) { dir = 1; } }, 10);};
![Page 17: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/17.jpg)
![Page 18: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/18.jpg)
![Page 19: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/19.jpg)
![Page 20: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/20.jpg)
Canvas
![Page 21: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/21.jpg)
Canvas
SVG
![Page 22: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/22.jpg)
![Page 23: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/23.jpg)
Support
![Page 24: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/24.jpg)
Does browser support Canvas?
![Page 25: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/25.jpg)
Does browser support Canvas?
if (window.CanvasRenderingContext2D) { …}
![Page 26: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/26.jpg)
Does browser support SVG?
![Page 27: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/27.jpg)
Does browser support SVG?
if (window.SVGAngle) { …}
![Page 28: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/28.jpg)
178
![Page 29: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/29.jpg)
6SVGAngleSVGLengthSVGPathSegSVGPreserveAspectRatioSVGTransformSVGUnitTypes
![Page 30: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/30.jpg)
Tests:
SVG !178": http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full#index.html
Canvas !672": http://philip.html5.org/tests/canvas/suite/tests/
![Page 31: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/31.jpg)
64%Canvas
203
469
SVG
118
160
![Page 32: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/32.jpg)
76%Canvas
182
490
SVG
60
218
![Page 33: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/33.jpg)
![Page 34: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/34.jpg)
81%Canvas
184
488
SVG
30
248
![Page 35: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/35.jpg)
What does it mean?
![Page 36: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/36.jpg)
$ere is support
![Page 37: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/37.jpg)
…with oneImportant Exception
![Page 38: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/38.jpg)
0%
![Page 39: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/39.jpg)
VML
![Page 40: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/40.jpg)
VML
![Page 41: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/41.jpg)
VML
![Page 42: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/42.jpg)
VML
![Page 43: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/43.jpg)
So, what can you do with Canvas ! SVG?
![Page 44: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/44.jpg)
Shapes
![Page 45: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/45.jpg)
![Page 46: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/46.jpg)
![Page 47: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/47.jpg)
Images
![Page 48: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/48.jpg)
![Page 49: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/49.jpg)
Text
![Page 50: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/50.jpg)
![Page 51: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/51.jpg)
Canvas SVG VMLJavaScript o! ☆☆ ★★ ★★CSS ☆☆ ★★ ★☆Result pixels DOM DOMAnimation ☆☆ ★★ ☆☆Filters ☆☆ ★★ ★☆Image Data ★★ ☆☆ ☆☆Text ★☆ ★★ ★☆Stand"alone ☆☆ ★★ ★☆Easy to use ★★ ★☆ ☆☆
![Page 52: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/52.jpg)
SVG
VMLCanvas
![Page 53: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/53.jpg)
![Page 54: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/54.jpg)
![Page 55: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/55.jpg)
What stops you from using this now?
![Page 56: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/56.jpg)
How to do this across all the browsers?
![Page 57: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/57.jpg)
![Page 58: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/58.jpg)
DojoX
http://dojotoolkit.org/projects/dojox/
![Page 59: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/59.jpg)
ExCanvas.js!
mooCanvas.js
http://excanvas.sourceforge.net/http://ibolmo.com/projects/moocanvas/
![Page 62: Web Vector Graphics](https://reader038.fdocuments.us/reader038/viewer/2022103114/55561b2bd8b42a3f168b547c/html5/thumbnails/62.jpg)
Just go and do it!