Your SlideShare is downloading. ×
Web Vector Graphics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Vector Graphics

2,071
views

Published on

A Journey Through Web Vector Graphics

A Journey Through Web Vector Graphics

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,071
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. © SitePen, Inc. All Rights Reserved A Journey Through Web Vector Graphics Dylan Schiemann (@dylans) SitePen, Inc. London Ajax, October 12, 2010 Saturday, October 16, 2010
  • 2. © SitePen, Inc. All Rights Reserved ajax bsd ceo comet cometdaily conferences cynic dojodylan@dylans hiring javascript open source schiemann sitepentoolkit travel web www dylan Saturday, October 16, 2010
  • 3. © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  • 4. © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  • 5. © SitePen, Inc. All Rights Reserved Topology and Rheology of Quasi Two-Dimensional Foam 1996 http://arxiv.org/pdf/cond-mat/9904101 Saturday, October 16, 2010
  • 6. © SitePen, Inc. All Rights Reserved Netscape 2-4: JavaScript, but no drawing I didn't like Java or Flash 1996-1999 Saturday, October 16, 2010
  • 7. © SitePen, Inc. All Rights Reserved Adobe SVGViewer 2000-2001 Saturday, October 16, 2010
  • 8. © SitePen, Inc. All Rights Reserved SFW Accendo (NetWindows, SVGViewer, custom JS code) 2003 Saturday, October 16, 2010
  • 9. © SitePen, Inc. All Rights Reserved 2004 SVG Viewer dead, except in Adobe Acrobat Adobe acquired an obscure vector graphics format Preventing the death of SVG http://dylanschiemann.com/2004/09/12/preventing-the-death- of-svg/ Dojo Toolkit development started Saturday, October 16, 2010
  • 10. © SitePen, Inc. All Rights Reserved 2005 Dojo 0.1 and 0.2 SVG Viewer Not ideal Mozilla SVG through special builds "One of the very first design decisions of which I was a proponent was that the Dojo Toolkit not be HTML-centric. After working on several SVG-based intranet applications, I was highly motivated to see Dojo work well with SVG and other namespaces that could become relevant in the future." Saturday, October 16, 2010
  • 11. © SitePen, Inc. All Rights Reserved 2006 "Before this project is launched, dojo’s developers have made significant progress to explore how to integrate SVG support. Another candidate for the back-end render engine is VML. There are two projects in dojo SoC 2006, dojo-svg & dojo-vml, a universal interface is developed to glue the Gfx API and various back-end rendering engine. I prefer dojo- svg, since VML is only rendered within Microsoft Internet Explorer, while SVG is supported natively by Mozilla Firefox 1.5+, or any browsers with Adobe SVG plugin." - Kun Xi Saturday, October 16, 2010
  • 12. © SitePen, Inc. All Rights Reserved dojox.gfx (Thanks in part to Mozilla!) Bubbles, 10 years later! (Thanks Gavin Doughtie) SVG andVML support http://thinkvitamin.com/code/create-cross-browser-vector-graphics/ 2006 Saturday, October 16, 2010
  • 13. © SitePen, Inc. All Rights Reserved 2007-2010 Add support for <canvas>, Silverlight, SVGWeb Base vector graphics APIs Charting & real-time capabilities Data store bindings Drawing APIs Saturday, October 16, 2010
  • 14. © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  • 15. © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  • 16. © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  • 17. © SitePen, Inc. All Rights Reserved What is DojoX GFX? JavaScript cross-browser graphics package Support for SVG, Canvas, VML, Silverlight, and SVGWeb Loosely based on SVG vocabulary Geometry, shapes, transformation matrices Stroke, fill, fonts, other visuals Surfaces and groups Interactive (events) Optional SVG to JSON converter Send user-created drawings to the server Saturday, October 16, 2010
  • 18. © SitePen, Inc. All Rights Reserved dojox.gfx DojoX Drawing Normalized API VMLSVG Canvas Silverlight DojoX Charting SVGWeb Render Saturday, October 16, 2010
  • 19. © SitePen, Inc. All Rights Reserved Create dojox.gfx.createSurface(node, width, height) All drawing operations done through the surface object Multiple surfaces in a document supported Saturday, October 16, 2010
  • 20. © SitePen, Inc. All Rights Reserved Draw Several shape primitives to choose from Path, Polyline, Rect, Ellipse, Circle, Line surface.create<shape>(params); Saturday, October 16, 2010
  • 21. © SitePen, Inc. All Rights Reserved Style <shape>.setFill to fill the object <shape>.setStroke to outline the object (think CSS border) fill with gradients Saturday, October 16, 2010
  • 22. © SitePen, Inc. All Rights Reserved Transform Common transformations available through dojox.gfx.matrix flipX, flipY, flipXY, translate, scale, rotate/rotateg skewX, skewY, reflect, project shape.setTransform(dojox.gfx.matrix.flipX); shape.applyTransform(dojox.gfx.matrix.translate(10,10)); Saturday, October 16, 2010
  • 23. © SitePen, Inc. All Rights Reserved Group dojox.gfx.VirtualGroup used to group shapes together can be treated as a single unit var g= surface.createGroup(); g.add(shape); Saturday, October 16, 2010
  • 24. © SitePen, Inc. All Rights Reserved Event Using <shape>.getEventSource() to get a direct handle to underlying nodes "Old school" event handling functions expect a normalized event object Connect handlers to event sources: dojo.connect(shape.getEventSource(),“onmousedown”, onMouseDown); Saturday, October 16, 2010
  • 25. © SitePen, Inc. All Rights Reserved Example Fun with the London Ajax logo Saturday, October 16, 2010
  • 26. © SitePen, Inc. All Rights Reserved DojoX Charting Library Dojo’s primary charting library is within DojoX Can use DojoX’s gfx library to create animated effects Dozens of themes included, supports custom theming and gradation themes Zooming, panning, and scrolling capabilities Supports chart events Support for SVG, VML, Canvas, Silverlight, and other technologies Support for 2D and 3D charts Integration with Dojo data stores Turns boring, static data into something readable and visually appealing. Saturday, October 16, 2010
  • 27. © SitePen, Inc. All Rights Reserved Chart Types Line Charts Stacked Line Charts Bar Charts Column Charts Pie Charts Scatter Charts Grids Charts can be created declaratively or programmatically. Saturday, October 16, 2010
  • 28. © SitePen, Inc. All Rights Reserved Chart Pieces “Chart”- the object which will house the other pieces of the chart Theme - the series of colors and/or gradation information for the chart’s pieces, lines, and markers Plots - describe how data is to be visualized Axes - the dimensions of data that are being visualized and includes things like specifying labels Series - describes the Data itself that the chart will visualize Markers - shapes placed at key points within data Extras - additional“plugin”functionalities for the chart Saturday, October 16, 2010
  • 29. © SitePen, Inc. All Rights Reserved Chart Plugins and Effects Tooltip - Shows a tooltip when a chart piece is hovered over Highlight - A hover color effect when hovering over a chart piece Magnify - Magnifies a marker when hovered over MoveSlice - Animates a pie slice when hovered over Shake - Shakes a given chart piece when hovered over Saturday, October 16, 2010
  • 30. © SitePen, Inc. All Rights Reserved <script> //require appropriate charting classes dojo.require(“dojox.charting.widget.Chart2D”); dojo.require(“dojox.charting.themes.PlotKit.green”); //sample data pieData = [{ x:0, y:9420 }, { x:1, y:10126 }, { x:2, y:10000 }]; </script> //create a pie chart declaratively <div dojoType="dojox.charting.widget.Chart2D" id="viewsChart" theme="dojox.charting.themes.PlotKit.green" style="width: 550px; height: 550px;"> ! <div class="plot" name="default" type="Pie" radius="200" fontColor="black" labelOffset="-20"></div> ! <div class="series" name="January" array="pieData"></div> ! <div class="action" type="Tooltip"></div> ! <div class="action" type="MoveSlice" shift="2"></div> </div> Create a Basic Pie Chart - Declaratively Saturday, October 16, 2010
  • 31. © SitePen, Inc. All Rights Reserved Create a Basic Pie Chart - Declaratively Saturday, October 16, 2010
  • 32. © SitePen, Inc. All Rights Reserved Basic Chart Theme Creation (cont.) Saturday, October 16, 2010
  • 33. © SitePen, Inc. All Rights Reserved <script type="text/javascript"> //require appropriate charting classes dojo.require(“dojox.charting.widget.Chart2D”); dojo.require(“dojox.charting.themes.Tom”); //sample data pieData = [{ x:0,y:9420 },{ x:1,y:10126 },{ x:2,y:10000 }]; dojo.ready(function() { ! var BarChart = new dojox.charting.Chart2D("BarChart"); ! BarChart.setTheme(dojox.charting.themes.Tom); ! BarChart.addAxis("x",{fixUpper: "major",includeZero: false,max:10}); ! BarChart.addAxis("y",{vertical: true,fixLower: "major",fixUpper: "major"}); ! BarChart.addPlot("default",{type: "Columns",gap:5}); ! //add a series of data to the chart ! BarChart.addSeries("My Chart Info",pieData,{}); ! BarChart.render(); }); </script> <div id="BarChart" style="width:500px;height:300px;"></div> Create a Basic Column Chart - Programatically Saturday, October 16, 2010
  • 34. © SitePen, Inc. All Rights Reserved Create a Basic Column Chart - Programatically Saturday, October 16, 2010

×