Abstracts, Proceedings and Presentation Files
There are 5 keynotes, 2 panel discussions and 40 regular presentations. Note that the list of presentations is still subject to change.
Accessibility Issues with SVG
- Geometric Accessibility
Who needs SVG?Show Abstract, Paper (Separate Tab)
Geometric Accessibility
Who needs SVG?
Papertopic: Accessibility Issues with SVG
Author(s): Dailey, David (Slippery Rock University) and Deborah Whitfield (SRU)
Recent experiments with certain types of SVG graphics have several implications for accessibility, including, perhaps, a broadening of the concept of accessibility within the graphical environment that is SVG. Two primary use cases are examined in some detail:
• High profile, liberally licensed graphics such as the copyright symbol, the “uncopyright” symbol, the HTML5 logo and various images distributed as “clip art” that have been created using drawing packages
• Textual effects of a visual nature (word art, word puns, calligrams, shape poems)
Among the topics to be discussed are:
• Presentation versus semantics – in SVG what parts are merely presentation?
• What does the spec currently say?
• What do browsers and authoring tools currently do?
• Accessibility to those with visual impairments
• Possible futures: tactile accessibility, accessibility to search engines, script, and development teams.
The author will make the point that the boundary between semantics and presentation is considerably fuzzier when the expressive metaphor for web pages is spatial and graphical (SVG) than when it is textual (HTML). The implications for a) what the spec should say about accessibility b) how authoring tools should assist and c) how authors conceptualize their expressions will all bear careful scrutiny in the upcoming years as the “web” seeks to embrace so many different models of communication. The notion that text and HTML are somehow fundamental in this planning process is strongly questioned.
Hide Abstract
- Geometric Accessibility
Who needs SVG?Show Abstract, Paper (Separate Tab)
Geometric Accessibility
Who needs SVG?
Papertopic: Accessibility Issues with SVG
Author(s): Dailey, David (Slippery Rock University) and Deborah Whitfield (SRU)
Recent experiments with certain types of SVG graphics have several implications for accessibility, including, perhaps, a broadening of the concept of accessibility within the graphical environment that is SVG. Two primary use cases are examined in some detail:
• High profile, liberally licensed graphics such as the copyright symbol, the “uncopyright” symbol, the HTML5 logo and various images distributed as “clip art” that have been created using drawing packages
• Textual effects of a visual nature (word art, word puns, calligrams, shape poems)
Among the topics to be discussed are:
• Presentation versus semantics – in SVG what parts are merely presentation?
• What does the spec currently say?
• What do browsers and authoring tools currently do?
• Accessibility to those with visual impairments
• Possible futures: tactile accessibility, accessibility to search engines, script, and development teams.
The author will make the point that the boundary between semantics and presentation is considerably fuzzier when the expressive metaphor for web pages is spatial and graphical (SVG) than when it is textual (HTML). The implications for a) what the spec should say about accessibility b) how authoring tools should assist and c) how authors conceptualize their expressions will all bear careful scrutiny in the upcoming years as the “web” seeks to embrace so many different models of communication. The notion that text and HTML are somehow fundamental in this planning process is strongly questioned.
Hide Abstract
- Geometric Accessibility
Who needs SVG?Show Abstract, Paper (Separate Tab)
Geometric Accessibility
Who needs SVG?
Papertopic: Accessibility Issues with SVG
Author(s): Dailey, David (Slippery Rock University) and Deborah Whitfield (SRU)
Recent experiments with certain types of SVG graphics have several implications for accessibility, including, perhaps, a broadening of the concept of accessibility within the graphical environment that is SVG. Two primary use cases are examined in some detail:
• High profile, liberally licensed graphics such as the copyright symbol, the “uncopyright” symbol, the HTML5 logo and various images distributed as “clip art” that have been created using drawing packages
• Textual effects of a visual nature (word art, word puns, calligrams, shape poems)
Among the topics to be discussed are:
• Presentation versus semantics – in SVG what parts are merely presentation?
• What does the spec currently say?
• What do browsers and authoring tools currently do?
• Accessibility to those with visual impairments
• Possible futures: tactile accessibility, accessibility to search engines, script, and development teams.
The author will make the point that the boundary between semantics and presentation is considerably fuzzier when the expressive metaphor for web pages is spatial and graphical (SVG) than when it is textual (HTML). The implications for a) what the spec should say about accessibility b) how authoring tools should assist and c) how authors conceptualize their expressions will all bear careful scrutiny in the upcoming years as the “web” seeks to embrace so many different models of communication. The notion that text and HTML are somehow fundamental in this planning process is strongly questioned.
Hide Abstract
Business Cases and Case Studies
- Deliver Asynchronous Event to SVG based Web-SCADA
Polling vs PushingShow Abstract, Paper (Separate Tab)
Deliver Asynchronous Event to SVG based Web-SCADA
Polling vs Pushing
Papertopic: Business Cases and Case Studies
Author(s): Sakurai, Shiro
Background
Multi-tier architecture is known as one of the good solution for scalable, platform and location independent system. Utilizing a web browser and web server is a common approach for those system. In addition, with SVG and WebSocket in HTML5 specification or its extension, applications that require to animate graphics according to asynchronous events, such as SCADA (supervisory control and data acquisition) HMI (Human Machine Interface), might be built on HTML5 capable web browsers and servers. This paper will shows the significance of WebSocket for SVG based SCADA applications.
Experiments Setting
The experiment is conducted with the following components.
Fig.1 Relation between components
- SCADA supervisory server simulator with 8 data variables on shared memory with various update frequency (250 milliseconds to 32 seconds of average update interval)
- Apache Web Server 2.2.12 with mod_websocket and custom module for pushing, and php script for polling. The custom event receiver module connects to SCADA server via UDP socket and pushes variable updates as XML documents to the web browser via mod_websocket. The php script directly accesses variable data on shared memory upon the request and replies as an XML document.
- Firefox 4.0 with a web page containing SVG graphics and Java-script using an XMLHttpRequest object for the polling method and a WebSocket object for the pushing method to receive variable data from the server.
Fig.2 Screencapture of test bench
Experiments Result
The experiment shows no significant visible difference between pushing and polling when the polling interval is set to the average update interval of the data variable with the highest update frequency. However, the polling method records 20% less updates on SVG animation and 280% more data value messages than the pushing method. If the polling interval is set to twice of the average interval of the same variable, SVG animation shows clear visible difference between the two methods. In fact, the polling method gets 35% less updates but 95% more data value messages than the pushing method in this setting.
Conclusion
A web browser is the desirable platform for SCADA HMI due to its availability and familiarity. By standardization of SVG in most web browsers, web based SCADA systems may achieve true hardware and operating system independence since it does not require proprietary plug-ins for graphics. Standardization of web-socket and browser support is also crucial for SCADA systems because of the stateless nature of HTTP protocols; they may not handle a huge number of asynchronous events well as shown in the experiments of this project.
References
[1] Tang Qiaoying, Zhao Chenghui. "The Application of Ajax Asynchronous Refresh in General used Database Maintenance System". Proceedings, Geoscience and Remote Sensing (IITA-GRS), 2010 Second IITA International Conference, volume 1, Aug. 2010, IEEE.
[2] Lee KweeHui, Wong FootYow. "SVG Animations' Constraint in SCADA Applications". Proceedings, SVG Open, 2010, Aug. 2010,SVG Open.
[3] Junman Sun, >Huajing Fang, Ganyi Wang, Zhendong He. "Information Push Technology and Its Application in Network Control System". Proceedings, International Conference on Computer Science and Software Engineering (CSSE), 2008, Dec. 2008, IEEE.
[4] Angela Bonifati, Stefano Ceri, Stefano Paraboschi. "Pushing Reactive Services to XML Repositories using Active Rules". Proceedings, 10th international conference on World Wide Web (WWW), 2001, May. 2001, IEEE.
[5] David Crane, Phil McCarthy. Comet and Reverse Ajax: The Next-Generation Ajax 2.0, 2008, Apress.
[6] Ali Mesbaha, Arie van Deursenb. "A component- and push-based architectural style for AJAX applications" The Journal of Systems and Softwar 81, 2008, Elsevier.
[7] Ian Hickson Ed. "The WebSocket API" Editor's Draft 13 April 2011 W3C Editor's Draft, Apr. 2011, W3C.
Hide Abstract
- Google Docs: Building Full Scale SVG Applications
Show Abstract
Google Docs: Building Full Scale SVG Applications
Papertopic: Business Cases and Case Studies
Author(s): Kopylov, Igor (Google)
Google Docs is one of the leaders in showcasing the capabilities of modern web applications. SVG is already the foundation of the Google Docs drawing editor, and is increasingly becoming a central technology for the entire product suite. Successfully incorporating SVG into an application used by millions of people has pushed the limits of what’s currently possible with the technology.
This talk will focus on how SVG can be used to implement major features in an office productivity suite. In Docs, we use SVG to provide a scalable and consistent text editing experience, a full-featured table implementation, and a complex animation framework. As we added SVG support, the Docs team ran into many hurdles, including the limitations of current browser implementations, the interactions between different web technologies, and ambiguities in the spec itself. The talk will discuss those challenges and how we were able to overcome them.
Hide Abstract
- Integrated Power Analytics Visualizations
Using SVG and Modern Web TechnologiesShow Abstract, Paper (Separate Tab)
Integrated Power Analytics Visualizations
Using SVG and Modern Web Technologies
Papertopic: Business Cases and Case Studies
Author(s): Pearce, Josh (Power Analytics Corporation)
Introduction
Building power analytics visualization and analysis user interfaces within standard power systems monitoring packages is challenging and inefficient. We needed a single web-based system that could be integrated into monitoring packages from multiple venders while preserving the same workflow for our engineers.
Requirements
- WYSIWYG Screen Editor
- Drag and Drop Instruments and Layout Elements
- Cross-Browser, Cross-Platform (mobile) Runtime Support
- Flexible Widget Interface
- Run on IIS using ASP.NET MVC
- A single file SqLite DB containing all project configuration data
- WCF connection to power analytics data provider (ePAG)
- Interact with SVG using JavaScript and jQuery
The application needed to enable non-software developers to create and edit drawings quickly. The system architecture also had to be flexible and extensible to meet the changing needs of the company. To solve this, we created an in-browser, drag-and-drop WYSIWYG designer and runtime engine using modern web technologies.
Architecture
Other web-based visualization products in the power industry use ActiveX components, Flash or Silverlight. When they have targeted SVG, it’s been through the EOL’d Adobe SVG Viewer. We built an application where SVG elements are treated as first class DOM citizens. This has been the most important design decision in the project. It allows us to use standard web development methods, leverage powerful JavaScript libraries, and target mobile devices because our application does not require a plugin to run.
Challenges
- Support for IE7 & IE8
- JavaScript Performance
- Differences in Browser's SVG Implementations
Conclusion
SVG is in many ways the ideal technology for a real time visualization environment in the power world. The rapid changes in and expanding importance of power, energy and in particular the diverse needs of users are all well suited for SVG.
Hide Abstract
Case Studies
- Building Webapp Games with SVG, CSS, and JavaScript: an Experience Report
Show Abstract
Building Webapp Games with SVG, CSS, and JavaScript: an Experience Report
Papertopic: Case Studies
Author(s): Martin, Johnny (San Jose State University)
Abstract
Less popular than native app games, webapp games are out there. One can find webapps that use HMTL5 [1] and Canvas [2]. Although there is much discussion of HTML5's support for SVG, I haven't run across any mobile SVG games in the wild. Some SVG based games can run in a browser, but these don't exploit specific mobile features, such as touch events, chrome-less deployments, nor attempt to approximate what native apps can do for games.
This paper presents my experiences developing a few SVG-based techniques for game development targeted to an webkit-based [3] mobile device. The approach uses only SVG, CSS, and Javascript with some webkit extensions to deploy chrome-less and integrate onto the mobile device's home screen.
There are several challenges to get an SVG game running on a mobile platform:
- Chrome-less deployment, ideally cacheable to the webapp-based mobile device.
- Interactivity through an eventable SVG DOM, ideally supporting touch events instead of or in addition to mouse events.
- Visual attractiveness, i.e., use of graphics effects such as gradient pattern or image fill
- Response time performance
Techniques Highlights
Dashcode Trick
A handful of webkit extensions can be used to register a webapp that behaves like a native app:
- Appears with an icon on the mobile device's home screen.
- Presents a splash screen when launched
- Runs a chrome-less browser
- Has the potential to run off-line (although this capability was discontinued on recent releases of Apple iOS).
SVG DOM Events
Mobile events can be registered on SVG elements. For example these are useful,
- onTouchStart()
- onTouchMove()
- onTouchEnd()
- onOrientationChange()
To allow events to be delivered to the SVG DOM elements, deploy an SVG file, where the root element is SVG, not HTML.
Graphical Rendering and Performance
A simple test was built, where an SVG circle is drawn atop a background. The circle registers for touch events so that the circle may be dragged. Experiments with combinations of filling for both background fill and circle fill were done, as were tests for opacity.
Image, pattern, and gradient filled backgrounds render, but everything turns slow and sluggish. Image fills are best avoided altogether, since on occasion the image disappears and turns black. Gradient fills render and look attractive but have such slow rendering performance that user interaction lags by more than a second. Only when both background and shape are filled without gradient, does interaction speed up.
A poor-man's gradient can be achieved by "spriting" a few primitive SVG shapes under a G element and styling primitive fills to simulate a gradient effect. Although not as visually attractive as an SVG gradient fill, interactive performance improves.
Where interactivity performance is not a concern, e.g., with board games, SVG gradient fills are an attractive option. If interaction in required, use the sprite technique or just primitive SVG shapes with solid fill.
Other Techniques
Other techniques explored include use of shadow DOM, through DEFS-USE tags, coordinate mapping, drag and drop, flick and swipe gestures, etc.
Gamekit - A Simple JavaScript Toolkit
To capture these experiences and share them so to make developing SVG games a bit easier, I've assemble a JavaScript toolkit with accompanying template SVG and CSS files:
- gameskit.js - JavaScript library
- sample SVG template file
- sample CSS template file
- Loading
- Viewport coordinate mapping
- Selectors for SVG node elements (by ID)
- Shape creation
- Managing SVG attributes and "hijacker" attributes
- Spite management
- Positioning and Movement
- Higher level touch events for dragging or flicking
- UI Buttons
- Switching Pages/Screens
Summary
Using only SVG, CSS, and Javascript with a few webkit extensions SVG games for mobile devices are possible. Results of these initial experiments prove SVG is a reasonable choice for interactive graphical webapps.
Perhaps the gameskit.js toolkit will help others in the use of SVG on mobile devices.
References
[1] W3C, "HTML5 A vocabulary and associated APIs for HTML and XHTML", W3C Working Draft 24 May 2011, (online: http://dev.w3.org/html5/spec/) [Last accessed: May 2011]
[2] W3C, The Canvas Element, Section 4.8.11 of the HTML5 W3C working draft (online: http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element) [Last accessed: May 2011]
[3] L. Knoll, et al, KHTML and Webkit, (online: http://webkit.org and/or http://www.konqueror.org/) [Last accessed: May 2011]
[4] K. Wood, "jQuery SVG", jQuery plugin extension, (online: http://keith-wood.name/svg.html) [Last accessed: May 2011]
[5] A. Charland, B. Leroux, "Mobile Application Development: Web vs. Native," Communication of the ACM vol. 45, no. 5, pp.49-53 May 2011.
[6] C. Nuttall "App stores are not the future, says Google," FT, 2009, July 17, (online: http://blogs.ft.com/fttechhub/2009/07/app-stores-are-not-the-future-says-google) [Last accessed: May 2011]
Links:
Hide Abstract
- Crowdsourcing image segmentation using SVG
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)
Crowdsourcing image segmentation using SVG
Papertopic: Case Studies
Author(s): Kim, Edward (Lehigh University) and Xiaolei Huang (Lehigh Univ)
<h1>Crowdsourcing image segmentation using SVG </h1>
In recent years, there is has been an explosion of digital image data. However, when viewed by a computer, this image data is essentially unstructured pixel data. In order to make image data useful to computer algorithms, the objects in the image must be outlined and separated from the background. Although, automatic methods to perform this image segmentation problem have been proposed, these methods have yet to reach human level accuracy.
In our paper, we use SVG and a crowdsourcing tool, Amazon Mechanical Turk, to gather segmentation results from users on the web. We first describe two segmentation methods (a manual method and a semi-automatic method) that we have implemented using SVG. The first method we present is a manual segmentation method. Given the interactive capabilities of SVG with Javascript, we can allow users to manually draw an outline around objects within images. We display a bitmap image under an SVG <rect> using an <image xlink:href> and catch onclick events. As the user clicks around the image, we can create a <path> that follows their clicks. Finally, the user can close the path to create a polygon that surrounds the foreground region. Second, we present a semi-automatic segmentation method, where a computer algorithm assists the user in the segmentation process. We demonstrate the use of SVG to initialize the contour for an active contour segmentation method [1]. Similar to the manual method, the user clicks around an object they wish to segment from the background. After closing the polygon, an AJAX function will send these points to a server-side script that evolves this contour to fit the image boundaries. The server-side script will then send back a <polygon> object so the user can visualize these results.
To effectively and efficiently collect human level segmentations, we can use an online crowdsourcing tool, Amazon Mechanical Turk. This online platform allows a researcher to create Human Intelligence Tasks (HITs), where thousands of workers can participate. Given our SVG representation, we are uniquely positioned to take advantage of the online environment for our segmentation task. We create segmentation HITs where we ask a user to outline a specific object within an image. After the user completes the work, we collect and store the polygon representation in a database and pay the worker a small sum of money. We also collect information regarding usability of our method regarding how easy our method to use was, and how satisfied the user was with the segmentation result.
In conclusion, by using the capabilities of SVG interaction and visualization, we can facilitate the process of image segmentation data collection. Further, the online support of SVG provides a stable environment, even when dealing with complex algorithms. Ultimately, we hope to show that using SVG for complex computer vision tasks is both feasible and effective.
References
[1] M.Kass, A.Witkin, and D. Terzopoulos, “Snakes: Active contour models,” International Journal of Computer Vision, vol. 1, no. 4, pp.321-331, 1988.
Links:
Hide Abstract
- Learn & Practice Interior Design Course Using SVG
Show Abstract
Learn & Practice Interior Design Course Using SVG
Papertopic: Case Studies
Author(s): Patil, Jaie (San Jose State University) and Sarvesh Sharma
Abstract
Interior design is a multi–faceted profession in which creative and technical solutions are applied within a structure to achieve a built in interior environment. The interior design process follows a systematic and coordinated methodology, including research, analysis, and integration of knowledge into the creative process, whereby the needs and resources of the client are satisfied to produce an interior space that fulfills the project goals.
Interior Stylist advises and prepares construction documents consisting of plans, elevations, details and specifications to illustrate various elements of the design concept, including the non-structural and/or non-seismic partition layouts, power and communications locations, acoustic plans, lighting designs, furniture layouts and materials and finishes. The idea here is basically to help the Interior designing students and architectures to visualize the things in 3D where in till now during the lectures the learning is being done through drawings on white sheets manually. This will help students to visualize more clearly the imagination of their designing.
In an Interior Design Diagram, as you zoom in, a room for example may resolve into a more minute-detailed vision of different sections of the room having labels show up only at a certain level of zooming which is basically known as LOD (Level of Detail). And this is the area where SVG can do wonders for Interior Designing. With the increasing support of SVG in a wide variety of browsers, it seems very feasible and beneficial to use SVG for complex diagrams in Interior Designing. The purpose of this paper is to implement "Interior Design Learning Course” with the help of SVG and to show how Interior Designing’s can be made more interactive, accurate and easily available having low maintainability issues.
Features of Interior Design Application
The Interior Design Learning Application will provide students and self-learners an effective overview of implementing SVG Three Dimensional Animations and combining it with authoring tools, GUI by its simple use. It allows ‘user customization’ i.e. interactivity for selecting different objects or tools to drag and drop to be used for the designing of a room. It will also help the students to visualize the 3D insight of the room to get a clearer picture. The clarity of the picture can be adjusted via Zoom feature to point out minute improvements which are very important for the successful Interior Design. Providing the users with different color provisions for different objects will help them in their creativity.
Implementation:
1) Drag and Drop Functionality:
The following code snippets define the Drag and Drop feature of Interior Design application. Raphael has built in drag and drop support through .drag(). One can implement Drag and Drop functionality by using it in the form "element.drag(start, move, up);" where the 3 arguments are 3 function references to the functions dealing with the mousedown, movement, and mouseup events respectively.
In the following code there are three functions such as dragger(), move () and up().
for (var i = 0, ii = shapes.length; i < ii; i++) {
var color = Raphael.getColor();
shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0.25, "stroke-width": 7, cursor: "move", title: i});
texts[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 1, cursor: "move", title: i, "font-size": 15});
shapes[i].drag(move, dragger, up);
texts[i].drag(move, dragger, up);
}
2) Animation using Raphaël:
Raphaël (http://raphaeljs.com/), is a JavaScript library used to create and manipulate SVG across browsers. Creating static SVG is easy but Raphaël focuses on two important behaviors: Animation and Interaction.
3) Rotate Catalog:
The provision for Rotate Catalog is provided to make it user friendly for the users to select their choice of option from the Catalog and drop it onto the main window. It will help users to remove the additional effort of scrolling down or pagination to select from a long list of options present in the Catalog.
User Interaction:
Once an SVG image is rendered to screen, it lets the user interact with this image. In an SVG image, each element has a unique ID (expressed as text) and the idea is to get the ID of the element the user wants to interact with, and then trigger the appropriate action.
Bibliography
[1] . Rohan Vibhandik, MS CS, San Jose State University, Automobile Crash Testing Simulation Using SVG 3D Virtualization and SVG Authoring Tools for Academic Purposes. http://www.svgopen.org/2010/papers/30-Automobile_Crash_Testing_Simulation_Using__SVG_Authoring_Tools_and_SVG_3D_Virtualization__for_Academic_Purposes/index.html
[2] . Jean Le Feuvre, Researcher,Telecom ParisTech Multimedia Lab, SVG Extensions for 3D displays. http://www.svgopen.org/2010/papers/54-SVG_Extensions_for_3D_displays/
[3] . Samuel Clay, Boerum Hill in Brooklyn, interaction between the SVG/VML objects and HTML. http://www.samuelclay.com/raphael/svg_open_paper.pdf
[4] . Johnny Martin, San Jose State University, SVG Drag and Drop. http://cs.sjsu.edu/~martin/2011spring/274/htdocs/dndnolog.svg
[5] . Raphaël—JavaScript Library. http://raphaeljs.com/reference.html
[6] . Klaus Förster, SVG developer, University of Innsbruck Department of Geography, Using Canvas in SVG. http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/
[7] . Bob Hopgood, Professor of Computer Science, Oxford Brookes University School of Technology, SVG Animation in 2D and 3D. http://www.svgopen.org/2009/papers/65-SVG_Animation_in_2D_and_3D/
Hide Abstract
- Simple Flight Planner
Planning flights with HTML5Show Abstract
Simple Flight Planner
Planning flights with HTML5
Papertopic: Case Studies
Author(s): Wong, Cheuk
Abstract
The Simple Flight Planner is a web based flight planning software that will help pilots create and file flight plans. The Simple Flight Planner will gather airports information and flight routes weather conditions and will calculate all the necessary flight information to fill in the flight plan. Flight information includes estimated time of arrival based on wind speed and direction as well as aircraft speed between airports, fuel consumption, etc. The ultimate goal of this software is to eliminate the use of printed material during flight planning. The Simple Flight Planner will be using HTML5 and SVG since they provide a library for drawing 2D vector based graphics and users interactions scripts.
Flight planning
According to the Federal Aviation Administration (FAA), every pilot must submit a flight plan to a Flight Service Station (FSS) prior to each flight. A flight plan includes but not limited to the following information: aircraft call sign, type, equipments, departure time, estimated time of arrival, fuel on board, contact information, flight route, etc. Once a pilot has landed safely at the destination airport, the pilot must contact the FSS to close the flight plan. The purpose of a flight plan to ensure that the flight arrived at the stated destination in a reasonable amount of time. If the pilot did not contact the FSS, a search and rescues operation might begin based on the flight route.
Flight planning is a vital part of any flight. There are several steps to flight planning. The first step is to pick a flight route, and a flight route is the desired path between the departing airpot and the destination airport that the aircraft will fly accordingly. A flight route usually consists of check points in the form of airports. Once a flight route has been selected, the pilot will then have to fill out the flight plan form as shown below.
The next step in completing the flight plan is to collect the weather data along the flight route. This step can be achieved by either looking up the weather data online or calling the Flight Service Station. Once all the weather data has been collected, the pilot can begin calculation all the necessary information such as true heading based on the wind speed, wind direction, and magnetic heading adjustment. Pilot can also calculate the ground speed and the estimated time of arrival for each check point and as well as the destination airport. All of these information will be recorded in the navigation logs on the back of the flight plan.
The goal of the Simple Flight Planner is to eliminate many of these steps. Namely, pilots should be able to just plan a flight route and time, and all the weather data will be retrieved automatically. Moreover, the Simple Flight Planner will calculate the true heading, ground speed, and the estimated time of arrival for all the check point instead of having the pilot do the calculation manually. This automation will greatly reduce the amount of time needed to plan a flight.
Bibliography
[1] R. Kunze, O. Vornberger, R. Mertens, "Dynamic and interactive visualisation of weather data with SVG," SVG Open 2005, August 2005; http://www.svgopen.org/2005/papers/DynamicInteractiveWeatherData/index.html.
[2] S. Epstein, D. Hebert, "WeatherSVG," SVG Open 2005, August 2005; http://www.svgopen.org/2005/papers/WeatherSVG/index.html.
[3] I. Pinheiro, Luiz Marcos, M. Fernandes, V. Gonçalves, M. Gonçalves, "A Geographical Information System Based on the Scalable Vector Graphics Standard.," SVG Open 2005, August 2005; http://www.svgopen.org/2005/papers/AGeographicalInformationSystemBasedontheScalableVectorGraphicsStandard/index.html.
[4] Y. Isakowski, S. Demarmels, "How SVG can learn to take-off: SVG used for Aeronautical Charts," SVG Open 2004, September 2004; http://www.svgopen.org/2004/papers/AeronauticalCharts/.
[5] A. Clark, K. A. Krupnikov, "Open-Source Airport and Instrument Procedure Diagrams in SVG," SVG Open 2004, September 2004; http://www.svgopen.org/2004/papers/SVG_Open_-_Andy_Clark_-_Abstract/.
[6] K. Förster, "Using Canvas in SVG," SVG Open 2009, 2009; http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/.
[7] D. Navarre, P. Palanque, J. Ladry, E. Barboni, "ICOs: A model-based user interface description technique dedicated to interactive systems addressing usability, reliability and scalability," ACM Transactions on Computer-Human Interaction (TOCHI), ACM New York, vol 16, issue 4, November 2009.
[8] L. Emmet, G. Cleland, "Graphical notations, narratives and persuasion: a Pliant Systems approach to Hypertext Tool Design" HYPERTEXT '02, ACM, 2002, doi:10.1145/513338.513354.
[9] S. Nomura, E. Hutchins, B. E. Holder, "The uses of paper in commercial airline flight operations," Computer Supported Cooperative Work 2006, ACM, 2006, doi:10.1145/1180875.1180914.
[10] S. Young, "Real-time 4-D trajectory planning for RNP flight operations," Integrated Communications, Navigation and Surveillance Conference, 2009, IEEE, May 2006, doi10.1109/ICNSURV.2009.5172862 .
[11] P.J. Smith, E. McCoy, J. Orasanu, C. Billings, R. Denning, M. Rodvold, A. Van Horn, T. Gee, "Cooperative problem-solving activities in flight planning and constraints for commercial aircraft," Systems, Man and Cybernetics, 1995, IEEE, Oct. 1995, doi10.1109/ICSMC.1995.538514.
[12] Y. Fan, J. Gong, C. Tan, R. Wang, "Research on Computer-Assisted DEM-Based Flight Plan of Aerial Photography," Intelligent Networks and Intelligent Systems, 2008, IEEE, Nov. 2008, doi10.1109/ICINIS.2008.79.
[13] G.K. Fourlas, J. Lygeros, "Detection of aircraft divergence from its flight plan in the vertical plane," Decision and Control, 2007, IEEE, Dec. 2007, doi10.1109/CDC.2007.4434512.
[14] P. Queinnec, G. Padiou, "Flight plan management in a distributed air traffic control system," Autonomous Decentralized Systems, 1993, IEEE, Apr. 1993, doi10.1109/ISADS.1993.262687 .
[15] A. Rezaee, S. Izadpanah, "An Optimized, Mathematical-Based Flight Performance Planning," Computer Technology and Development, 2009, IEEE, Nov. 2009, doi10.1109/ICCTD.2009.12 .
[16] C.A. Leavitt, "Real-time in-flight planning," Aerospace and Electronics Conference, 1996, IEEE, Aug. 2002, doi10.1109/NAECON.1996.517620 .
Hide Abstract
- Sport Vector Graphics
Hey Dude! What's the score?Show Abstract
Sport Vector Graphics
Hey Dude! What's the score?
Papertopic: Case Studies
Author(s): Singh, Ashutosh (San Jose State University) and Nishant Patel (San Jose State University)
The beautiful grounds on which sports are played provide a lot of statistical information that is useful for analysis. Like in Cricket, an important data is; how many runs were scored in a particular position as long-on.
This paper discusses on rendering score statistics related to sport ground for dynamic data visualization. To start with, it is designed for Cricket whereby ground image, field placing and runs scored in a match are shown in a user friendly manner.
Apart from the ground statistics, other data related to fast and seam ball movement, spin trajectory and wicket taking balls pitching on ground will be projected. For interactivity and dynamic visualization, JavaScript with SVG DOM are used. For data source, XML files are used to provide data for different applications. Perl and Java web crawler programs will be used to fetch dynamic data from the web source.
Hide Abstract
- SVG in Opera's desktop and mobile browsers
Show Abstract
SVG in Opera's desktop and mobile browsers
Papertopic: Case Studies
Author(s): Bovens, Andreas (Opera Software)
For a long time now, Opera has been committed to implementing SVG in its desktop and mobile browser products.
Over the last year, we have been focused on improving the performance of our SVG implementation, while adding new features as well, including support for embedding SVG in HTML5.
Our Opera Dragonfly debugger has matured as well and is now a powerful tool for debugging SVG on desktop as well as on mobile.
In this presentation, I will give a status update of Opera's SVG implementation and introduce some of the latest changes to our Opera Presto engine. I will also show demos and practical examples of how SVG can be mixed with other technologies to create compelling web applications.
Hide Abstract
- SVG in the Real World
Success Stories from Companies using SVGShow Abstract
SVG in the Real World
Success Stories from Companies using SVG
Papertopic: Case Studies
Author(s): Haney, Jean (Visual Integrity)
We'll present the results of an informal industry survey about SVG as well as cases studies from organizations where SVG is used successfully as part of a strategic workflow or within an application or service. Examples will include conversion of both legacy and real-time files. Both batch automation and API tools will be reviewed. The goal is to inspire broader use of SVG by all types of organizations.
Hide Abstract
GUI Frameworks for Web Applications
- A SVG Chart Render Kit Using JSF2
Show Abstract
A SVG Chart Render Kit Using JSF2
Papertopic: GUI Frameworks for Web Applications
Author(s): Li, Hongyan
There are many charting libraries available these days, and in the context of web applications, these libraries are either JavaScript based or image based. The former creates a chart by manipulating the DOM in the client browser, while the later does it by generating an image (often times raster graphics) on the server and returning it back to the browser. Both approaches have advantages and disadvantages.
The JavaScript based charting libraries may be easy to use and give you the ability to interact with your chart most of the time but because you are defining all the aspects of your chart programmatically, including its layout, data binding, and event binding, the layout is tightly coupled with the data model, and the behavior, thus implementation tend to be rigid and hard to extend. Also since the components of a chart do not have a representation on the server, client / server interaction per to the chart can easily get complicated and expensive.
The Image based libraries allow the component developer to take advantage of existing image generating libraries, such as batik but they usually put a lot of strain on the server, are slower, and supporting interactivity may be a challenge and expensive too because each time a change to the chart requires a regeneration of the whole image. And if the image generated is raster, as it is in most cases, zooming is limited by the image resolution.
The above analysis calls for a tag library that generates vector graphics and allows one to define a chart descriptively. Such a tag library should be easily extensible, should allow one to decouple the chart layout from its data model and behavior, should produce an output for vector graphics, should support efficient rendering and client / server interaction, and should give us the much needed flexibility to easily customize our charts. A JSF2 component library and tag library that generates SVG output and takes advantage of the powerful EL language, Ajax, jQuery and JSON seems to be a good answer to this.
This paper presents the design and implementation of such a SVG chart render kit. Key design and implementation decisions will be discussed. A live demo application will be shown to illustrate how to describe chart layout; bind chart data; and customize chart behavior.
Hide Abstract
- SVG as an essential component of a Web application authoring tool
Show Abstract, Paper (Separate Tab)
SVG as an essential component of a Web application authoring tool
Papertopic: GUI Frameworks for Web Applications
Author(s): Quint, Julien (IGEL Co., Ltd.) and Takanari Hayama (IGEL Co., Ltd.)
WAFF (temporary name) is a modern, experimental authoring tool for Web applications, i.e., applications whose front-end is built using currently available Web technologies and rendered through a host application such as a Web browser or an SVG player. WAFF is currently under development and is based upon a so-called "Web Application Foundation Framework" (hence the name) which includes a declarative, XML-based application description format, a GUI designer tool, and a Javascript library providing useful visual controls and abstractions.
WAFF is being developed from scratch with as few dependencies as possible. The reasons behind this choice include: 1) independence from Javascript frameworks that may come in and out of fashion, while leaving the option for developers to use their favorite libraries on top of WAFF; 2) the ability to run outside of mainstream environments: e.g., a set-top box, or the control panel of a home appliance, running only an SVG Tiny player, rather than a full-blown Web browser as can be found on major desktop and mobile operating systems; 3) easy integration with server-side Javascript solutions such as node.js; and 4) tight integration with the layout designer, tailor-made for WAFF and similar to tools that can be found in most IDEs.
WAFF follows the classical Model View Controller paradigm for building graphical user interfaces. Roughly speaking, models are objects that may be shared with the back-end; views are graphical components that are rendered using HTML and/or SVG, such as buttons, labels, blocks, and which are all designed to be manipulated using mouse, keyboard, touch events (and potentially other interaction methods such as speech); and controllers act as mediators between the various components of the application. WAFF provides default GUI controls (views) as well as a library of useful controllers: a command manager (providing undo/redo), a selection manager, a clipboard manager, etc. One of the main goals of the framework is to allow the definition of new views (like a property inspector or a color picker) and controllers that can easily be reused in different applications.
The XML application description format provides a high-level view of the application, tying together the various components of the application. For instance, a WAFF application can implement undo-redo functionality simply by pulling in the default command manager object with a single XML element. Views and controllers can also be simply connected in the same manner. Although the purpose of the WAFF layout designer is to provide a graphical tool to produce such application description files, it remains possible to edit these files by hand. This can be useful for further customization and automated work flows.
By using an intermediary representation (a well-known technique in the world of compilers, for instance), the same application can be exported in different "flavors." A simple case is that the same application can be exported to HTML5 using the XML syntax or not; another example is that an SVG-heavy application can be exported in a HTML context (to be displayed in a browser, while taking advantage of HTML and CSS for the layout) or as a pure SVG Tiny application (to be rendered in a dedicated player) with minimal cost. Another feature of this XML representation is that it can easily be manipulated with well-known tools.
We follow and describe an iterative development process to build WAFF, starting from a minimal Javascript library and the aforementioned XSLT stylesheet for code generation from the application description format. Proof-of-concept applications are being developed alongside the framework itself to validate and test new concepts. In this paper we also describe a simple SVG drawing tool, built using WAFF, that showcases the most interesting features of the WAFF tool in general, and for the SVG community in particular. The presentation will focus on live examples of both the latest version of the authoring tool and actual applications built with it.
Hide Abstract
Improving SVG - Suggestions for Upcoming versions or modules
- Advanced Gradients for SVG
Show Abstract, Paper (Separate Tab)
Advanced Gradients for SVG
Papertopic: Improving SVG - Suggestions for Upcoming versions or modules
Author(s): Bah, Tavmjong (Inkscape)
There is need for more complex shadings in SVG than the current linear and radial gradients offer. I will quickly touch on a number of possible options and then focus on the use of Coons Patch Mesh gradients to fill this need. I'll present the rationale for this choice, a possible syntax, and examples of shadings using this syntax.
Hide Abstract
- Separating gradients from geometry
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)
Separating gradients from geometry
Papertopic: Improving SVG - Suggestions for Upcoming versions or modules
Author(s): van de Gronde, Jasper (Inkscape)
Advanced gradients offer the potential of more complex and subtle images, with reduced effort from the artist and with a more compact representation. Some of the candidates for inclusion in (a future version of) SVG are mesh gradients and diffusion curves. In mesh gradients the user must draw a mesh over the image and specify the colors at all nodes. In contrast, diffusion curves are based on the user specifying the color along curves. Given these wildly different gradient types it becomes interesting to see whether we can generalize them into one scheme. I will show how simple and advanced gradients can all be unified in one framework, and that it has added value to do so.
Currently, SVG has linear and radial gradients. Both require the user to specify a number of stops along an imaginary line and define the resulting gradient by mapping pixels in the image to a position on that line, giving each pixel the color thus found. So essentially we have a color table and a mapping (or transform) from the image to this color table. In the interest of reusing color tables it is useful to separate these two concepts, as is done in applications like the Gimp and Inkscape (and likely many more). However, in the current SVG specification these two concepts are explicitly combined. I propose to separate these two concepts.
In itself the separation of a gradient into a color table and a mapping might not seem like such a big deal. Perhaps not much more than a abstraction that might make for a cleaner specification. This changes, however, when one considers a wider variety of both color tables and mappings. I will show that it helps unify advanced gradients with simple gradients, as well as giving a very powerful set of image deformations.
Starting with the most obvious example, mesh gradients are defined, just like linear and radial gradients, by mapping each pixel to a position in a kind of color table. For example, in the case of Coons patches the color table is a unit square linearly interpolating between the colors at the four corners, while the map is defined using Bézier curves. Tensor-product patches and Gouraud shaded triangles also admit the same kind of definition. Perhaps more surprisingly, even diffusion curves have a similar interpretation. This allows all these different kinds of gradients to be defined in terms of their associated map. All that remains then is some way of easily specifying often used types of color table (which can then be used with all kinds of gradients, as they are not necessarily tied to a certain map).
Defining gradients in terms of maps between pixels makes them equivalent to transforms, introducing new and very useful types of transforms. For example, defining a linear transform in the same way we currently define a linear gradient would lead to a very convenient kind of linear transform. Conversely, the existing linear transforms can be used to implement linear gradients. Going further, mesh gradients would allow mesh deformations, and diffusion curves would allow very flexible deformations whose full potential still has to be evaluated. I will show some examples of potential syntax and provide a glimpse of the effects achievable.
Hide Abstract
- Some new useful primitives
Show Abstract
Some new useful primitives
Papertopic: Improving SVG - Suggestions for Upcoming versions or modules
Author(s): Matseevskiy, Andrey
In this paper two such primitives are discussed- vertices-based gradient fills and a non- Bezier type of curves. Probably the most interesting is not the underlying math, but what can be done with these primitives and how they could be incorporated into SVG. The first primitive is vertices- based gradient fills. Its possible usage for converting of photorealistic images to vector files was described at SVGOpen2010 (Fourier transform in SVG). But, there are lots of areas, where such primitive could be used with a great benefit. In science application, meteorology, cartography and so on the most used method of visualization of two dimensional functions is a set of isolines. It can be visualized air's temperature, humidity, relief of some mountain region and so on etc. Usual situation is when a two dimensional field what is to be represented is known only at as a some unordered set of points. For example, temperature of air is known only at some points where meteorological stations are placed. Thus, one needs to interpolate this info to some regular grid, calculate, where isolines crosses columns and rows of this grid, connect these points and convert obtained chains of points to vector objects- polylines or Bezier curves. When all these ops are complete, one may draw isolines, scale them and so on. A poor user must make all these ops by himself. It would be nice to offer him some tools inside a language (in SVG, I mean), that can do all this dirty job themselves. Assume we have a way to interpolate some values, known at an unordered set of points to the whole region to be painted. To each pixel of it. In that case the only thing that must be done to draw isolines is to find, which pixels belong to them. It is a very simple op. There is no need to convert these pixels to chains nor convert such chains to vector objects. If one needs to scale such image, the whole process is to be repeated. Corresponding records may be something like this:
<region
<border d="M721.0 494.0 C728.0 483.0 723.0 470.0 727.0 459.0 "/>
<isolines color=”0” step=”1.0/>
<vertices
<"V8 4 22.3 V22 254 49.1 V2 232 25.9 V258 2 19.7 V210 2 17.6 V132 790 10.4 V58 816 6.1 V152 800 12.0 V116 810 11.1 "/>
/>
/>
To paint a background is very simple too. The only record is to be added is something like this:
<background
<profile=”p0.0 #b0b0b0 p4.0 #c0c0c0 p8.0 #d0d0d0 p12.0 #e0e0e0 p16.0 #f0f0f0”/>
/>
It means that all point where value is between 0 and 4 will have color #b0b0b0, where value is between 4 and 8 will have color #c0c0c0 and so on.
A non- Bezier curve is probably another useful primitive too. Bezier curves and splines, used for drawing curves, are widely used and of course they are rather efficient tools for drawing curves. But, on the other hand, they have some limitations too. Thin flexible steel ruler is a model of a curve what has some useful properties compared with widely used Bezier curves and splines. Despite of common opinion, shape of such ruler, stressed under influence of set of forces is not a spline. This shape is described by elliptic integrals. The main advantage of such sort of curves is that their behavior is just what one waits- anybody has such experience, playing with such rulers. Moreover, behavior of this sort of curve can be adjusted. It is quite clear, that shape of a flexible ruler depends on its tension. An infinite tension along such ruler converts it into a rope- an object, what resists only when one is trying to change its length, but not its shape. This tension may have any positive finite value, of course. Assume, we have some points, distributed on a flat surface and want to draw smooth and nice-looking curve through these points. This is a typical situation, when ruler- based curve may be better than a spline or Bezier curve. Moreover, by changing tension along such curve one may get the whole set of curves and choose the most appropriate. It does not mean, that same results cannot be obtained with the aid of splines, no- but generally splines would require more control points and their behavior is farther from intuitive expectations. Splines produce sometimes strangely looking loops. In any event, an additional tool for drawing curves may be a useful thing, that will make SVG more flexible and impressive. Corresponding type of record would be very simple, something like this:
<curve width="2" color="#cc00bb"
<d="428 304 431 305 434 306 436 307 439 307 441 308 444 C309 449 310 452 311 458 C312 460 312 463 313 466"/>
/>
Hide Abstract
- The road to SVG 2.0: Current work of the SVG working group
Show Abstract
The road to SVG 2.0: Current work of the SVG working group
Papertopic: Improving SVG - Suggestions for Upcoming versions or modules
Author(s): McCormack, Cameron (Mozilla Corporation)
Modules that are currently in the pipeline: SVG filters, SVG parameters, etc.
Hide Abstract
Interactivity and Scripting
- An Original Approach to Web Game Development Using SVG
Show Abstract, Paper (Separate Tab)
An Original Approach to Web Game Development Using SVG
Papertopic: Interactivity and Scripting
Author(s): Cueilliez, Olivier
Since the raise of the Internet era, many browser-based online games have been created. When these games were developed in respect to Web standards, these have been limited by the inherent stateless and text-base nature of the Internet. Hence, these games are turn by turn based, graphically limited and hardly compatible from one browser to another; these are the reasons why developers usually prefer to implement games using browser plug-ins.
While standards are not ready for real-time browser games yet, it is already possible to provide better graphics for a better gaming experience. Today, SVG is well supported in all major Web browsers, and is a stable standard compared to HTML 5.
This paper describes different ways of leveraging SVG to create browser-based games. I will first describe different approaches to handle SVG resources with Inkscape and PHP at design time:
- Generate map data for the game in a semi-automatic fashion using the different layers of an SVG document to create 3D relief, ground types, rivers, lakes, forests, etc.
- Process graphic elements from SVG files for environment objects such as trees, buildings and characters. This includes using an additional namespace to identify SVG elements that have a special meaning in the game context.
- Store graphic data in binary and json files for better performance and ease of use before these data could be sent to the browser.
I will then propose several strategies that use SVG to render the user interface and game environment in the browser:
- Design a user interface that could easily adapt to any target device, be it a Web browser on a computer, a mobile phone or a tablet; thus demonstrating the great advantage of SVG over HTML5 canvas.
- Use SVG transformations, DOM properties and Javascript to dynamically manipulate the game environment (i.e. translations, rotations, zoom levels and matrix).
In the course of the presentation, I will point out different problems found while dealing with the SVG standard and SVG tools. I will give some recommendations about what I believe is the right approach for designing a browser-based game using SVG. I will also point out inherent performance problems and how, again, SVG provides enough flexibility to solve them.
An SVG game prototype has been already built and can be found in the links. This is not playable and is only provided as a demo.
Keywords: SVG, browser game, Inkscape, JavaScript, json, PHP.
Links:
Hide Abstract
- Drag and Drop functionality for SVG using jQuery
The enhancementShow Abstract
Drag and Drop functionality for SVG using jQuery
The enhancement
Papertopic: Interactivity and Scripting
Author(s): Runwal, Neha and Johnny Martin (San Jose State University)
Abstract
This paper presents a jQuery library jQuery.svg.dnd.js for SVG to support Drag-and-Drop (DnD). The jQuery User Interface (UI) already provides the "ui.draggable" library, but unfortunately this is limited to HTML and does not support SVG.
This proposed DnD jQuery library is modeled after Keith Wood's SVG jQuery extension [3]. The paper outlines our approach, the jQuery methods implemented, and our experiences in developing this general purpose DnD Application Programming Interface (API).
This API is offering additional functionality to adapt vertical or horizontal dragging, constrained movement according to boundary conditions, easing functions for start or finish movements, transparency and other visual effects. (Easing functions are also important features of this functionality which add in more animated visible actions onto an SVG element.)
This DnD jQuery extension for SVG enables a developer to develop games, web applications, and other interactive applications more easily using SVG and jQuery.
Prior Drag And Drop Work
The general idea of DnD functionality is implemented and extended in this library. This library provides features such as easing functions, horizontal or vertical drag, and boundary limitations. This library has convenient API with familiar jQuery syntax. JQuery provides “ui.draggable” library only for HTML DOM elements [2]. We proposed a similar functionality for SVG elements.
This [7] article has simple DnD functionality implemented. Other functionalities like easing functions, cursor at are not implemented.
In the existing "ui.draggable", many boundary problems are handled while dragging a HTML DOM element and dropping it. This project implements solutions to these problems as follows,
1. If the mouse is down and moved out of the current window, making it out of focus, the element should be dropped at the boundary or edge of the window.
2. When the mouse comes into the same window with mouse up, the element should not follow the mouse.
3. Similarly, if the mouse cursor is entering the window with the mouse down event, no element will be selected. Hence in this case no element will be dragged upon mouse down.
4. This DnD takes care of browsers DnD which when an element is dragged and dropped onto the desktop, it creates another file on desktop with respective extension. Here this browser DnD is avoided using "stop_propogation" functionality.
This library implements all these solutions for SVG DOM elements.
Proposed API
DnD has a function "draggableElem" which will be used to activate dragging and dropping on a particular SVG DOM element. These elements can be referred using there id or type. For example,
$(tempArray['firstCircleElem']).draggableElem(params);
$(tempArray['secondRectElem']).draggableElem(); //No parameters
$('#newRectElem').draggableElem(); //With id
Drag And Drop Features
1. Easing functions
Easing functions provide different motions which will be applicable to a SVG element. This easing is a parameter in the animate command. It creates effects using duration and position of an element [1]. The few available easing options include easeInQuad, easeInCubic, easeInSine, easeInExpo etc.
$(tempArray['firstCircleElem']).draggableElem({easing: “easeInQuad”});
$(tempArray['firstCircleElem']).draggableElem({easing: “easeInOutBounce”});
2. Vertical Drag
If axis parameter is set to Y then that element will be dragged vertically.
$(tempArray['firstCircleElem']).draggableElem({axis: "y", cursorAt: { bottom: 0}});
3. Horizontal Drag
If axis parameter is set to X, then that element can be dragged horizontally.
$(tempArray['firstCircleElem']).draggableElem({axis: "x", cursorAt: { top: -5, left: -5 }});
4. Boundary Defined
If boundary is defined for a particular element, then that element can be moved only inside that region.
$(tempArray['firstCircleElem']).draggableElem({containment: “parent”});
$(tempArray['firstCircleElem']).draggableElem({containment: “#idOfAnElement”});
For SVG elements, we have group tag as <g> which can be used to set the boundary for a group of elements like rect, circle, polyline etc.
5. Mouse Events
There are many mouse events like click, mouseup, mousedown, mousemove, mouseout, mouseover etc which are used to handle drag and drop functionality. So in this project, these events are bound to an SVG element so that whenever they occur, some action can be taken. If mousedown event has occurred, then the "_mousedown" function will be called which will actually capture the element and the "_mousemove" function will start dragging the object according to mouse movements. Circle, ellipse and rect elements are easier to drag than line as they only have one x and y coordinate. For lines there is little difference in the functionality. For circle, code would look like,
if (flag == 1 && targetElem.localName == 'circle')
{
targetElem.setAttribute('cx', e.screenX);
targetElem.setAttribute('cy', e.screenY);
}
References
[1] B. Bear, K. Yehuda, "jQuery in Action,"(May, 2008)
[2] The jQuery Project, "UI/API/1.8/Draggable," Retrieved February 12, 2011, from http://docs.jquery.com/UI/API/1.8/Draggable
[3] K. Wood, "jQuery SVG,"(n.d) Retrieved March 4, 2011, from http://keith-wood.name/svg.html
[4] E. DeLabar, "Duck Punching JavaScript - Metaprogramming with Prototype," (May 2, 2008) Retrieved February 28, 2011, from http://www.ericdelabar.com/2008/05/metaprogramming-javascript.html
[5] B. Cherry, "JavaScript Module Pattern: In-Depth," March 12, 2010, Retrieved May 10, 2011, from http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
[6] Quackpit , "HTML Cursor Code," (n.d.), Retrieved March 10, 2011, from http://www.quackit.com/html/codes/html_cursor_code.cfm
[7] J. Schiller , "How to enable dragging in SVG," (Dec 21, 2005), Retrieved March 21, 2011, from http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/
Hide Abstract
- Highcharts - charting with JavaScript and SVG
Show Abstract, Presentation (Separate Tab)
Highcharts - charting with JavaScript and SVG
Papertopic: Interactivity and Scripting
Author(s): Hønsi, Torstein (Highslide Software) and Andreas Neumann (City of Uster)
Highcharts is a web charting tool built in JavaScript on top of SVG for standard compatible browsers and VML for legacy IE.
It includes a high level of interactivity through the JavaScript API, in many cases hooked on to the chart by SVG DOM events.
Highcharts contains a rendering layer built as a JavaScript object abstraction of SVG. The VML rendering layer extends the SVG layer to match it to VML's different syntax.
Hide Abstract
- Interactive Visualization of Planet Movements for Highschool Education
Show Abstract, Paper (Separate Tab)
Interactive Visualization of Planet Movements for Highschool Education
Papertopic: Interactivity and Scripting
Author(s): Wondrak, Stephan (ETH Zurich)
Interactive Visualization of Planet Movements for Highschool Education
Stephan Wondrak
ETH Zürich, Institute of Cartography
Wolfgang-Pauli-Strasse 15
8093 Zürich
SWITZERLAND
wondrak@karto.baug.ethz.ch
The proposed paper will examine the capabilities of SVG in visualization of common known astronomy data. The subject is finally to develop an appropriate illustrative model for the Swiss World Atlas Interactive, the web version of the Swiss World Atlas. The examples which will be shown were derived and edited mainly from data of the Swiss World Atlas.
Today we have very detailed information about the planets in our solar system and the discovery of exoplanets is an important topic in the field of space research. But although we know these exact data we often cannot really comprehend their dimensions. We only have a more or less precise imagination for instance of the distance between a planet and the sun or the planet movements. How can we improve our imagination for better understanding the dimensions and processes in our solar system, the milky way or even in the whole known universe?
One of the most important features of SVG is the capability to enhance vector graphics with animations. With this technique almost every motion in 2-dimensional space can be visualized in an easy observable way. A main reason for such a direct information transfer is probably the reduction of the presented data to the essential information, like it is often done for instance in the process of map editing. In addition to the animation transform function “scale” and the area attribute “gradient” 2.5-dimensional visualizations can also be realized.
In printed atlases we often see 2-dimensional models which show size comparisons of the planets and in relation to the sun. Another well known model type is an overview of the whole solar system, where either the orbits of the planets or the distances between the planets and the sun are shown true to scale. The planets appear always enlarged in comparison to the whole model, otherwise they would not be visible.
What are the specific planet parameters we could visualize with animated 2-dimensional vector graphics? And how can we put together all planet graphics in one composite animation to show the relations between a single planet and its solar system?
A concrete advisement for example could be: What distance covers a planet in space during one turn around his own axis? And how long is this distance in relation to its size? A rather simple calculation but how can we achieve a sustainable impression of this interrelation between volume, spin drift and orbital speed?
In a first step I want to show the characteristic numbers of all planets in a direct comparison. Then I will present an approach how we can integrate the dimension of the solar system in a model, for instance the distances between the planets, without loosing the previously obtained impressions of planet sizes and planet movements in space.
Zurich, 2011-04-18
Links:
Hide Abstract
- iScriptDesign - generating designs
Automate and parameterise your designShow Abstract, Paper (Separate Tab)
iScriptDesign - generating designs
Automate and parameterise your design
Papertopic: Interactivity and Scripting
Author(s): Dijkmeijer, Jeroen (Private)
IScriptDesgin
Add interaction and scripts to your design.
Introduction
HTML was originally about presentation however it is legitimate to say that HTML's popularity is in great part due to the possibility of interaction. Interaction is hardly ever found in graphics, yet graphics and dynamic graphics like movies enjoy a tremendous popularity, imagine what would happen if you allow interaction in graphics..
One application of interaction in graphics is the display of diagrams, by choosing between different formats or range of values. Another yet unknown use case are template models. Do you still remember the days that, as a youngster, you received paper models as birthday gifts from family and friends? Keep those paper models in mind and..
- Imagine the possibility of changing some of your object's dimensions (not plain scaling of your complete object, instead changing only height, and steepness of your roof for example).
- Share it online so the whole world can benefit from it.
- Benefit yourself from a library of tested and well documented components to use in you own template models.
- Do you still think that paper models can only be printed on paper? Instead of printers bring lasercutters, watercutters and cnc routers into action. These toys become more and more available to an increasing audience. Broaden your set of materials with plywood, glass, acrylic, iron to name a few. Go beyond the paper and go beyond the model. Build some Thing. For real!
iScriptDesign has been developed considering all of the above bullets, and is developed using open and license friendly frameworks and formats, leveraging the power of SVG in a not so traditional way. It has proven to be an indispensable tool for me while constructing my own parameterizable furniture out of simple sheets of plywood.
The customizable SVG introduced in iScriptDesign is a yet unseen way of preprocessing SVG. Interactive SVG can traditionally be obtained by embedding ecmascript, inside the SVG file, capable of selecting, transforming and changing DOM elements. However the most sophisticated element for outlining artefacts is the path element, which happens to be unusable for DOM selection as it's content is embedded in a single attribute containing the complete path data in a single string or rather CLOB (in databases known as Character Large Object). Unfortunately there is no possibility of inserting hooks next to the defined commands to allow embedded scripts peeking and poking inside the path data. Nor is it possible to insert chunks of text within the path data, to allow for scripted creation of, for example, repeated objects.
iScriptDesign tackles above mentioned shortcomings by allowing directives inside the SVG which will be processed before the SVG engine starts rendering. The directives do resemble the macro references known from unix's make, and allow for parameter substitution or execution of defined functions. These functions may be defined embedded, in the SVG file, or externally in a javascript library. The latter offering the possibility of reuse of earlier created, documented and tested components, for use within your own design.
Usage
A typical parameterizable path attribute looks like:
- <path id="spline"
- d="M 20 20 c 50 50 #{end_x-delta} 450 #{end_x}"/>
Where end_x-delta and end_x are predefined, calculated, or human entered parameters, get substituted in the preprocessing phase.
Starting with path's like this, it's very tempting, and in fact rewarding, to leverage the available javascript and replace the complete path with a JSON like notation in a separate var definition:
- var r1 = [[{x:6*distance, y:0}]]
- .concat(rotate(mirror(
- pensEdge(distance, depth, 3,
- {bitRadius: bitRadius, overshoot: 7,
- startWithEar: true, spaceFirst: true}),'x'),
- 2*Math.PI/6))
pensEdge, rotate, mirror are user defined function made available by a library. The [] and {} are JSON constructs. Concat, a javascript routine, glues the first array and its argument, the final outcome of rotate, together. The JSON expression is now translated back to path data with:
- <path id="spline"
- d="M 20 20 #{array2String(r1)}"/>
JSON is nothing but an array of associative arrays, also called "objects". As objects are by definition free from format rules, different declared definitions may be used to capture path data. One may think of the format for polar notation, or a format for adding a weight factor for the "smooth curve" (s).
With iScriptDesign and its scripted components I offer alternatives for 2D and 2.5D CNC input. Currently SVG sec is useable as input for some lasercutters. The transformation to DXF (the current workable CNC format) is, to my best knowledge, only flawless possible in commercial available products. However as DXF is only an intermediate format to gcode (the final CNC format), my next challenge is extending iScriptDesign with direct gcode export functionality. In combination with parameterizable templates a powerful and innovative way for designing and producing your artefacts.
Links:
Hide Abstract
- Omni-Opticon: a way of visualizing trend-proximities
Show Abstract
Omni-Opticon: a way of visualizing trend-proximities
Papertopic: Interactivity and Scripting
Author(s): Shirk, George and David Dailey (Slippery Rock University)
Omni-Opticon: a way of visualizing trend-proximities
Keywords: semantic proximity, visualization, trends
Author(s): George Shirk IV (gws9396@sru.edu)
Dr. David Dailey (david.dailey@sru.edu)
The Omni-Opticon is used to graph relationships between trendy topics in various topical sources (such as CNN and Twitter). It builds a dynamic relational network (graph) based on current topics that are trending at the moment. The topics are lexically analyzed in an attempt to recognize summarizing keywords. The diagram of relationships dynamically adjusts as topic change and show relations to other topics.
Multiple ways are used to determine the inter-topic connectivity between other topics. One is to look at their “definitions” to see how closely related they are. Another is to look at words that are commonly co-occur in ordinary usage. The search engine BING is used to test for the proximity of topics through the numbers of matches to queries, using asynchronous calls to server-side queries of live web content.
We believe that diagrams like these may provide interesting and informative views of the world’s rhythms as they unfold.
Hide Abstract
- Visualizing Data with D3.js
Show Abstract
Visualizing Data with D3.js
Papertopic: Interactivity and Scripting
Author(s): Bostock, Michael (Square, Inc.)
Recent improvements in JavaScript performance, along with widespread support for SVG, are changing the landscape for data visualization on the web. Powerful dynamic visualizations of large datasets, complete with animation and interaction, can now be built directly in the browser and take full advantage of web standards such as CSS3 and HTML5.
Data-Driven Documents (D3) is a new JavaScript library for visualizing data in SVG and HTML. Rather than hide the underlying scenegraph within a toolkit-specific abstraction, D3 enables direct inspection and manipulation of the W3C document object model (DOM). With D3, designers selectively bind input data to arbitrary document elements, applying dynamic transforms to both generate and modify content. This enables an expressive range of visualizations to be quickly constructed.
This talk will showcase various data visualizations built with D3. We'll also discuss the principles that went into the library's design, and see how these principles evolved from the author's previous toolkits, Protovis and Polymaps.
Links:
Hide Abstract
Mobile (handheld and in-car) Solutions
- HMI Design using SVG
Automotive AC Control Unit HMIShow Abstract, Paper (Separate Tab)
HMI Design using SVG
Automotive AC Control Unit HMI
Papertopic: Mobile (handheld and in-car) Solutions
Author(s): Rocha, Jesus
Abstract
The scope of applicable uses for automotive human machine interfaces (HMI) has rapidly expanded in the last decade. The advent of portable liquid crystal display (LCD) monitors has evolved to deliver innovative and unprecedented visual feedback experiences to the driver. As we explore further this concept of automotive HMI’s, we focus on a fundamental application with relative simplicity commonly found on all automotive platforms. Our HMI of choice is an AC control unit operated by a driver or passenger to attain climate control inside the automobile cabin. In this paper we model this system digitally through an LCD, as traditional physical HMI components lacks very far behind those technologically infused. The main advantage in the digital world is the ability in which one physical component, the LCD, can model extensive replicas of physical counterparts. In this paper we discuss important characteristics for a replicated HMI and furthermore, express how scalable vector graphics (SVG) can fulfill excellent aesthetics and assist to deliver superior usability.
In this paper we discuss how SVG implements a model of an AC control unit commonly found in the automotive industry. In addition, we elaborate how similar technologies, such as CSS and JavaScript, can enhance our model to make it personal with visual customization features. Finally, our model will be design to have fully interactive capabilities and in turn simulate a real working environment by providing adaptive visual response following user input.
Our Automotive Setup
We installed a portable touch screen LCD on a vehicle to replace the original AC control unit location, the AC controls were relocated to the glove compartment, and the LCD attached to a laptop mounted in the trunk. The laptop has no communication with the vehicle system however our system setup is sufficient to implement and showcase a model for the idea of using SVG to provide a graphical user interface for an AC control unit.
Figure 1. Ideal deployment on top screen which replaced existing AC control unit.
GUI Design
The implemented design of physical HMI’s varies among different vehicles. In order to speed up the implementation of our system we utilize the original design from the physical AC control unit we relocated.
Figure 2. Factory installed AC module relocated to glove compartment.
Figure 3. Inkscape structure design for implementation
Enhancing Usability
To attain good usability is the design goal for HMI designers because an interface must be functionally easy to understand and use without having to read a manual or brochure. Usability from the beginning consists of a well defined overall structure and layout, in order for the pieces to fit together. Furthermore, larger displays with fewer elements evoke faster learning. We emphasized these features in our initial mockup below.
Implementation
With the initial design mockup implemented using Inkscape, we extracted the SVG elements from our file and progressed into restructure code to map visual structure, the apply several visual enhancements.
Structure
The hierarchical order of pieces laid out in our design are as followed:
- Main Layout (Background)
- Main Display Screen
- Main Display Data (Output)
- Input Control Buttons (Input)
Display Data
Inside of our display data group tag we have several additional subgroups that encompass certain regions of the display which map to particular functions identical to the original design.
The following components are subgroups within the display data.
- Internal Temperature
- Fan Mode
- Fan Speed
- Miscellaneous (Vent, Air Circulation, Auto, Defrosters)
- Passenger Temperature
- Outside Temperature
Control Buttons
In our mockup design the buttons are labeled identically, large and easy to perceive the action which will result. These buttons are non-trivial and easily implemented with "rect" tags along with "line" tags do denote directions "up" and "down" for buttons within the same task. Additionally we complemented them with text to provide clear actions they provide.
Adding Gradients and Filters
Gradients
Gradients are popular and the simplest enhancement into visual perception of objects reflecting light.
Filters
Filters extend the appearance where gradients left off. They add further depth and perception to deliver a more realistic visual representation.
Figure 4. Initial Design after adding gradient and filter to buttons, everything else in general color
Figure 5. Added gradient to feedback display, and applied filter to background
Figure 6. Demostration of color scheme for vehicle enthusiast customization
Providing Simulation
Once our implementation was in place, we added scripting behind each button in order to change the display and simulate the actual events change on the screen. Although our system does not interface with the vehicle, it provides clear and concise feedback to the user about the operations the taking place.
Conclusion
The automobile industry is still its its infancy in the similar case compared to the field of computer science. As we progress into the future, the ties between technology and application will grow next to each other and enhance our ability to have greater communication with our vehicles. Communication is vital for human existence, and because we have grown to depened on transportation to get us places, it is clear that there is a need for enhanced communication between man and machine. GUI’s implemented via SVG can provide a new direction for superior interactions.
Bibliography
[1] Alexander Pretschner, Manfred Broy, Ingolf H. Krüger and Thomas Stauner. Copyright © 2007 Future of Software Engineering. 0-7695-2829-5/07 IEEE. Software Engineering for Automotive Systems: A Roadmap.
[2] Dr. Sébastien Boisgérault, Mohamad Othman Abdallah, and Jean-Marc Temmos. Copyright © 2008 SVGOpen 2008. www.svgopen.org/2008. SVG for Automotive User Interfaces.
[3] Manfred Broy. Copyright © 2006 ICSE ’06 May 20-28, Shanghai, China. 2006 ACM Challenges in Automotive Software Engineering.
[4] Alex Danilo. Copyright © 2009 SVGOpen 2009. SVGOpen-2009 www.svgopen.org. Lights, Camera, Action!
[5] Dr. Jun Fujisawa and Mr. Anthony Grasso. Copyright © 2008 SVGOpen 2008. Graphic Design with SVG. www.svgopen.org. Achieving 3D Effects with SVG
[6] How Stuff Works - Automotive Gadgets. http://electronics.howstuffworks.com/gadgets/automotive
[7] Inkscape Vector Graphic Editor. http://www.inkscape.org
[8] W3C SVG Working Group. http://www.w3.org/Graphics/SVG/.
Hide Abstract
Panel Discussions
- Implementors' Panel
Show Abstract
Implementors' Panel
Papertopic: Panel Discussions
Author(s): Schepers, Doug (W3C)
A discussion of current SVG viewer and editor applications. Possibility of the audience to ask questions to implementors.
Hide Abstract
- SVG Working Group Panel
Show Abstract
SVG Working Group Panel
Papertopic: Panel Discussions
Author(s): Dahlström, Erik (Opera Software)
A discussion with the members of the W3C SVG working group. The audience will be involved in the discussion and ask questions.
Hide Abstract
Publishing and Printing with SVG
- Campus-based publishing and SVG
Show Abstract, Paper (Separate Tab)
Campus-based publishing and SVG
Papertopic: Publishing and Printing with SVG
Author(s): Whelan, John (The University of Hull) and Benjamin Kay (The University of Hull)
Web-based, template driven publishing is increasing in use at a rapid rate ([Guardian 2011]). Many proprietary formats and architectures exist, as do many large-scale variable data printing and e-book generation tools and platforms ([Digital Text Platform], [LuLu] [Smashwords]).
This paper reports on an open source project at the University of Hull which aims to deliver a campus-based publishing interface for both eBook and print on demand publishing.
One of the key aspects of the platform is to allow for varying levels of editorial control to be applied to differing imprints of “the press” (both physical and digital). The platform will provide a free-space for students to explore their creative output in front of their peers, but also offer journal production and published outputs that have been reviewed through due editorial process.
Whilst the integration of SVG and publishing is often described in relation to the print workflow ([Jinks 2003]) ([Grasso 2007]) with the SVG Print recommendation ([SVG_Print]) offering specific extensions, electronic publishing solutions have been also described ([Neumann 2008])
The aim of this project is to develop a useable, branded interface that allows for a range of stylistic control for either editors, or, more in the case of self-publishing, the authors themselves. The platform also integrates with the University’s digital repository, which is based upon Fedora Commons [FedCom].
The platform developed investigates the feasibility of an SVG presentation format, which can be customized through a simple web interface. The project also links with a web-to-print service whereby books and journals can be printed on-demand.
This paper reviews the architecture and template editing process utilized in the project and compares it with similar proprietary solutions.
[Guardian 2011], Adams R., 2011, “Amazon's ebook sales eclipse paperbacks for the first time”, available at
http://www.guardian.co.uk/world/richard-adams-blog/2011/jan/28/amazon-kindle-ebook-paperback-sales
[Digital Text Platform] available at https://kdp.amazon.com/self-publishing/signin/183-0389784-4467862
[LuLu], Self Publishing and Book Printing Solutions, available at http://www.lulu.com/
[Smashwords], Smashwords – Ebooks from independent authors and publishers, available at http://www.smashwords.com/
[FedCom] Fedora Repository, available at http://fedora-commons.org/
[Jinks 2003], Jinks R., 2003, “Putting SVG On Paper”, in proceedings of SVG Open 2003, Vancouver, available at
http://www.svgopen.org/2003/papers/PuttingSVGOnPaper/index.html
[Grasso 2007], Grasso A., 2007, “Publishing and printing with SVG”, in proceedings of SVG Open 2007, Tokyo, available at http://www.svgopen.org/2007/papers/PublishingAndPrintingWithSVG/index.html
[SVG_Print], W3C, SVG Print 1.2, available at http://www.w3.org/TR/SVGPrint/
[Neumann 2008], Neumann A., 2008, “Creating High Quality, Database-Driven Reports with Open Source Software” in proceedings of SVG Open 2008, Nuremberg, available at http://www.svgopen.org/2008/papers/65-Reporting_with_XSLFO_SVG_and_Apache_FOP/
Hide Abstract
- Where SVG meets the Web and Documentation
SVGShow Abstract
Where SVG meets the Web and Documentation
SVG
Papertopic: Publishing and Printing with SVG
Author(s): Vermeulen, Michael (Tedopres Documentation)
We have developed several different styles of embedding SVG in our documentation:
1- Parts Catalog
2- Images/figures for in documentation
3- An application to generate images
4- Diagram viewer
5- Assembly based on SVG
6- Embedding SVG in web based documentation including Text2Speech
Hide Abstract
SVG Authoring Techniques
- Even faster web mapping
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)
Even faster web mapping
Papertopic: SVG Authoring Techniques
Author(s): Neutze, Michael
There is no doubt that fast loading web pages get more views, more customers, more sales and even rank higher in some search engines [1]. But while SVG should in theory be very efficient to describe complex geometries with very little data and thus lead to fast loading pages, in practice it often is not and bitmap replacements are used even though SVG support in browsers is prevalent in 2011.
At SVGopen 2009 the CTO of Wikimedia, Brion Vibber, analyzed the use of SVG in Wikipedia [2] and why the png renderings of maps are more efficient to them in terms of file size and rendering speed. Then in his 2010 SVGopen keynote Robert Russel of Google elaborated further on "Efficient SVG" [3]. Both these talks make the importance of the issue obvious, but as they focussed on the optimization of standalone SVG files, the overall load and rendering times of modern HTML websites that have SVG markup mixed in, has yet to be examined.
This talk will have a look at implementing SVG — both static as well as code generated — at the right places and in an efficient manner when it comes to thematic mapping. It will build on the experience of running a thematic mapping website for election results [4]. The basic design of such a map is still following Andreas Neumann's 2002 blueprint of the Vienna Map [5] but with modern browsers' ability to mix HTML and SVG the picture has changed a bit.
Mapping election data has the following specifics: During the counting of the votes the data gets updated in short intervals and traffic is strong during these few hours. However the boundary data doesn't change and neither does the user interface and application logic in general.
Thus all the proven strategies for websites, where small parts of the data get frequently updated, can be applied: Ajax for data delivery, aggressive caching of stable assets and optimization of each individual asset.
The optimization of SVG plays an important role that goes well beyond using SVG tidy [6]. When optimizing bitmap data such as photos, web developers can rely on web export tools that let them preview the optimized results. And even after that, projects like YSlow [7] allow to further evaluate the performance of a page. But SVG is not yet part of these optimization workflows.
Optimizing boundaries in SVG is a lot more demanding as tools are still in their infancy or lacking and generalizing boundary geometries is much harder than choosing a compression factor for bitmap data, especially when boundaries don't join at the right places after optimization.
Since SVG maps are often converted from shape files with real world coordinates, the resulting SVG path data usually has too much precision for onscreen use, even at higher magnification levels. These real world coordinate systems like UTM also result in large viewboxes that again require extraordinarily large text sizes. The performance impact of such coordinate systems on text shadows and fill patterns among other things will be touched.
In a real world example the use of several tools for optimizing mapping data will be explored, ranging from generalization when working with the shape file format, to converting from shape file to SVG and finally exporting SVG from tools such as Adobe Illustrator, Inkscape or SVG edit. Finally manually editing down the SVG should not be underestimated.
Apart from minifying and generalizing path data to the appropriate resolution, compression, caching and far future expire headers for SVG files will be discussed and if browsers respect those.
All in all the talk will be an overview of building an efficient thematic map with the appropriate mix of modern technologies such as HTML, SVG and JavaScript.
The example maps [4] use the SVG Web library [8] to support legacy versions 6,7,8 of Internet Explorer and to also allow mixing SVG with plain HTML in browsers that don't yet support that natively. A quick status update on the SVG Web project with attention to recent versions 9 & 10 of Internet Explorer will be included.
Links:
- 1) Steve Souders: Even Faster Websites
- 2) Brion Vibber: SVG in Wikipedia (SVGopen 2009)
- 3) Robert Russel: Efficient SVG (2010 Keynote)
- 4) Michael Neutze: Election Atlas Germany
- 5) Andreas Neumann: Choroplethe map with interchangeable statistic variables
- 6) Sam Ruby: SVG tidy
- 7) YSlow: Analyze performance of websites
- 8) SVG Web library on Google code
Hide Abstract
- Performance optimisation of SVG-SMIL moving objects animation
Show Abstract, Presentation (Separate Tab)
Performance optimisation of SVG-SMIL moving objects animation
Papertopic: SVG Authoring Techniques
Author(s): Köbben, Barend (University of Twente – Faculty of Geo–Information Science and Earth Observation (ITC))
In this paper we will report on efforts to optimise the performance of SVG-SMIL animation of moving objects. The moving object animations in case are generated by TimeMapper [1], a prototype for an OGC-compliant Web Map Service implementation that serializes spatiotemporal data from a database backend as Scalable Vector Graphics. It builds on the earlier RIMapperWMS [2]. The SVG is used in a web browser to show animated maps with a built-in advanced user interface. This interface allows the user to interact with both the spatial and the temporal dimensions of the data.
We are interested in animation, because interactive animated mapping is the only technique generically applicable to visually analyze the dynamic nature of real world phenomena. We want to facilitate the production of animated maps from spatio-temporal data to a format suitable for internet dissemination, automatically and directly. We looked specifically into the possibilities of the loose coupling of distributed webservices with animated, interactive vector maps. This we achieved with our TimeMapper Web Map Service prototype.
To integrate the TimeMapper prototype functionality in the codebase of RIMapperWMS, we need to overcome some limitations in its functioning, especially in performance of the animation of large amounts of data. In testing the prototype, we have found that there are important responsiveness limitations, making the system too slow to constitute a usable exploratory tool.
In the paper we will report on tests we did to optimise the SVG–SMIL animation output by the system. We discuss which methods are most effective in our particular setup, which methods seem to be most generic and therefore generally usable, and the differences observed between the various User Agents.
<b>Key words</b>: spatio–temporal data, animated maps, webservices, SVG, SMIL, WMS, performance, optimisation
<ul>
<li>[1] - Becker, T., Köbben, B. & Blok, C. (2009), TimeMapper: Visualizing Moving Object Data using WMS Time Dimension and SVG SMIL Animations, in ‘SVG Open 2009 - SVG coming of Age’, Mountain View, URL http://svgopen.org/2009/</li>
<li>[2] - ITC. RIMapper project pages. URL http://kartoweb.itc.nl/rimapper/.</li>
</ul>
Hide Abstract
SVG Authoring Tools
- DIREC: A tool for easier hand-coding
Drop-In Ruler and Editing CompanionShow Abstract
DIREC: A tool for easier hand-coding
Drop-In Ruler and Editing Companion
Papertopic: SVG Authoring Tools
Author(s): Lachance, Brian
DIREC: A tool for easier hand-coding
Drop-In Ruler and Editing Companion
Introduction
Three main tools can be used as a REPL of sorts when hand-coding SVG: a text editor, a modern browser and the F5 key. This approach could use improving in some areas, namely when laying out parts of an image. By borrowing ideas found in most graphical editors (e.g., Inkscape [1] and SVG-edit v2.6 [2]), an interactive JavaScript utility, DIREC, was created to minimize the effort spent in guessing-and-checking the placement of graphic elements. With the click of a button, SVG authors can create reference grids and rulers to help edit their document. Similarly, including the .js file in the document will load the utility.
Sample
Multiple coordinate spaces
A significant feature in DIREC is its being coordinate space aware: the reference grid can be placed in any coordinate space in the document. The examples of coordinate systems in the SVG specification are an easy target for demonstrating this feature of the tool.
In the RotateScale example in section 7.4 of the SVG 1.1 specification [3], the effects of two coordinate spaces are shown on similar-looking elements. A reference grid is shown in each of the two coordinate spaces, with major lines every 10 user units and minor lines every 5 user units (rotatescale-space2.png, rotatescale-space3.png).
Further work
Firebug [4] allow users to “Inspect HTML and modify style and layout in real-time.” A Firebug extension to include more SVG-appropriate layout metrics would enhance the widely-accepted browser tool for SVG authors.
References
- [1] Inkscape, http://inkscape.org, accessed May 14, 2011
- [2] SVG-edit, http://code.google.com/p/svg-edit/, accessed May 14, 2011
- [3] RotateScale example, http://www.w3.org/TR/SVG/coords.html#ExampleRotateScale, accessed May 14, 2011
- [4] Firebug, http://getfirebug.com, accessed May 14, 2011
Hide Abstract
- Inkscape Update
Show Abstract
Inkscape Update
Papertopic: SVG Authoring Tools
Author(s): Bah, Tavmjong (Inkscape)
The latest on Inkscape development will be presented including results from the 2011 GSOC. I will start with a brief introduction to Inkscape development followed by what one can expect in the next version. I will demonstrate some of the highlights include significantly faster rendering based on the Cairo 2D rendering library, power strokes for variable width paths, and a new measure tool. I will also demonstrate the start of a Mesh Gradient implementation. I'll conclude with a list of "Wants" from the Inkscape community.
Hide Abstract
- SVGo: a Go Library for SVG generation
Design and Use for applications and interactive sketchingShow Abstract, Paper (Separate Tab), Presentation (Separate Tab)
SVGo: a Go Library for SVG generation
Design and Use for applications and interactive sketching
Papertopic: SVG Authoring Tools
Author(s): Starks, Anthony
This paper presents SVGo, a pure Go language library that generates code as defined by the Scalable Vector Graphics 1.1 Recommendation.
Supported elements include circle, ellipse, polygon, polyline, rect (including roundrects), paths (general, arc, cubic and quadratic bezier paths), line, image, text, linearGradient, radialGradient. The elements desc, defs, g (style, transform, id), title, (a)ddress, link, use are also supported.
The paper will discuss the design of the library, its use in both standalone applications and authoring tools, as well as within web servers.
The library is built to closely follow the semantics of the standard, where that the programmer/designer works directly with SVG objects (rectangles, curves, lines, circles, etc) applying standard CSS styles to the objects using Go functions as the logical unit of work. The library is designed to produce standard, clean, and readable code.
The Go programming language facilitates the generation of code to a variety of destinations through the use of the io.Writer interface.
A simple example of the library generating to the standard output file:
import (
"os"
"github.com/ajstarks/svgo"
)
var (
g = svg.New(os.Stdout)
width = 500
height = 500
)
func main() {
g.Start(width, height)
g.Rect(0, 0, width, height, "fill:black")
g.Ellipse(width/2, height, width/2, height/3, "fill:rgb(44,77,232)")
g.Text(width/2, height/2, "Hello, World",
"fill:white;font-size:48pt;text-anchor:middle")
g.End()
}
Drawing within a web server:
package main
import (
"log"
"github.com/ajstaks/svgo"
"http"
)
func main() {
http.Handle("/circle", http.HandlerFunc(circle))
err := http.ListenAndServe(":2003", nil)
if err != nil {
log.Exit("ListenAndServe:", err)
}
}
func circle(w http.ResponseWriter, req *http.Request) {
w.Header().Set("Content-Type", "image/svg+xml")
s := svg.New(w)
s.Start(500, 500)
s.Circle(250, 250, 125, "fill:none;stroke:black")
s.End()
}
SVGo has been used to create a set of visualization tools for use in IT architecture and related disciplines. The tools generate SVG and operate from the principle that precise and consistent graphical views are generated from standard data representations in XML. Further, separation of data and view allows for independent analysis of data and the generation of alternative and combined/composite views with little extra effort. In all cases the user is not concerned with the details of layout, style, etc – the tools automatically handle these aspects.
The tools enable workflows that integrate with common tools such as Microsoft Visio, PowerPoint and Word.
In addition to a general-purpose grid-based layout diagramming tool, SVGo has been used to develop tools to visualize timelines, server configurations, porportional maps, technology stacks, portfolio views, and technology roadmaps.
Other uses for SVGo include visualizing twitter posting activity, searching Flickr and twitter, font samples, SVG scorecards, and creating posters for Layer Tennis.
Borrowing from Processing, SVGo is also the basis of a web-based interactive tool that allows the programmer/designer to generate programmed pictures using a sketching model that gives immediate feedback that encourages experimentation---a useful method for learning and exploring SVG and general 2-D graphics concepts.
Links:
- Github Repository
- Gallery of SVGo Examples
- Demonstration Video
- Proportional Maps: an alternative to pie charts
- Sketching in SVG
- SVG Scorecard
- Layer Tennis Remix
- Reference Poster (SVG)
- SVGo Reference Poster
Hide Abstract
- SVG support in Adobe tools
Show Abstract
SVG support in Adobe tools
Papertopic: SVG Authoring Tools
Author(s): Jain, Gaurav (Adobe Systems)
This session will show existing SVG features in Adobe tools and hint at
the future as well. In particular, the session will discuss and
demonstrate SVG support in Project Wallaby, Adobe Illustrator, Adobe Edge
and Adobe InDesign. The session will also demonstrate how SVG can be used
in a workflow to produce an advanced HTML5 application.
Hide Abstract
SVG for Webmapping and Online GIS/GML
- 3D representation with SVG for online GIS
Show Abstract
3D representation with SVG for online GIS
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Li, Yan (School of Computer, South China Normal University), Dailey, David (Slippery Rock University), WeiYong, Lin and Xing ZhiQiang
From a spatial exploratory point of view, 3D surface analyses and animations are important functions for understanding terrain surfaces. A number of important geospatial problems involving 3-dimensions, we find, can be solved using 2-plus dimensional effects within SVG. Some of these follow from Dailey’s (2010.8) proposal to the W3C SVG WG for a <replicate> tag (doing for space much of what <animate> does for time) is recommended . From further study and experiences, it can be used to present much needed 2.5D and 3D spatial representations. We suggest the following solutions to certain problems:
• Using <replicate> in Digital Elevation Model (DEM) representation
• Using <replicate> for underground pipe line management
• A transportation model with SVG representation based on elements of knot theory
<replicate> gives a hint that we could use it to create a DEM in SVG but our initial code base only dealt with continuous closed segments, having equal nodes and proportional spacing. In practice, it is impossible to have a data set of contour lines without discontinuous segment, various numbers of nodes and asymmetrical spacing on neighbor segment or even sparse elevation points. This means that <replicate> tag had to be improved to support the DEM creation. The improvement addressed the following issues:
1) Replicate with the segment (unclosed line);
2) Replicate with unequal number of nodes and asymmetrical spacing on neighbor segment or even sparse elevation points in the map;
3) Replicate with a large data set in SVG document.
We divide the whole procedure into three steps: a) preprocessing data set with trigonometrical interpolation; b) creating DEM with <replicate>; and c) animating the SVG DEM model. For the animation, suppose, instead of changing a single object over time, we "keep" each of the stages of its evolution and lay them down in the document atop one another with each replicated object inheriting the animation of the prototype. It works with <replicate> after preprocessing the original dataset and animated with <animateMotion> which allows objects in SVG/SMIL to move and evolve along any path.
We also use <replicate > to help with the management of underground pipe systems including sewage, water supply, gas, rainwater and drainage pipes etc. This is done by using <replicate> to vary the stroke width of paths to simulate tubes. We also hope to simulate flow analyses using this technique.
And another example of “almost-3D” representation is from David Dailey’s solution of weaving, knotting and knitting in SVG (2010.10) [8]. But conceptually, involves representing the concept of an underpass or overpass as something that is more easily represented as part of the path geometry than as part of its stroke-dash array. Based on this approach, we made a 2.5D cloverleaf interchange which consists of multi-layered path of the roads but employing only a 2D image and SVG masks.
All these approximate solutions share a frustration with SVG’s current offerings and with the difficulty of extending those (even via script) to richer classes. Improved support in SVG for online 3D online spatial analysis is desirable.
Keywords: Spatial functionality, 3D representation, Online GIS, DEM, Transportation model
Hide Abstract
- A proposal for extending SVG’s capabilities for online mapping and GIS
Show Abstract
A proposal for extending SVG’s capabilities for online mapping and GIS
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Li, Yan (School of Computer, South China Normal University) and David Dailey (Slippery Rock University)
A glance at the proceedings of the SVG Open conferences in recent years will show that Scalable Vector Graphics, (SVG) has been used for many applications both within and outside of the geographic and mapping disciplines. Some presentations have attested to difficulties encountered within the geographic community in using SVG to perform functions which are fairly common and well-developed practices within those disciplines. We concur with their conclusions and wish to share our recommendations to address those shortcomings. This paper is concerned with illustrating and addressing some limitations of SVG as it is used for Web Mapping and the related area of online GIS. In order to make SVG more accessible to non-programming members of the geographic community its native functionality must be extended in several ways. As we see it, the primarily limitations can be grouped in these major categories:
• General or common functions
• Cartographic functions (decoration, proximity and scaling)
• Analytic functions
• 2.5D and 3D representation
In the first part, we advocate for providing natively, the functions of zoom, pan and layer organization, as well as operators for measurement and orientation. Next, we recommend enhanced methods for pattern filling, irregular dot density, line symbol decoration, and multiple lines with line offset. Issues of proximity and scaling, non scaling stroke, fitting labels to regions or area and map projections and coordinates for online mapping are all considered as important cartographic functions. We will discuss how and why to enhance the functionality of spatial analysis. This involves recommendations concerning operators for spatial and logical relations to support such GIS functions as spatial statistics, buffering, overlaying and networking.; Finally, we demonstrate how a relatively simple but powerful extension of the specification can enable 2.5D and 3D representations useful for online mapping and GIS. We’ll demonstrate examples using DEM (Digital Elevation Model) with contour lines, 3D representation of transportation models and underground pipe management with SVG.
Many share a frustration with some of SVG’s current limitations and with the difficulty of extending its functionality (even via script) to richer applications. Much of the current proposal is based on analogy to how SVG allows the declarative definition of vector objects for mapping. Let us enable declarative solutions to all the spatial functionalities mentioned above, and natively support not only online mapping but also online spatial statistics and spatial analysis with SVG.
Keywords: Spatial functionality, Online mapping, Online GIS, SVG
Hide Abstract
- Providing meteorological maps and graphs in SVG
Enhancing the user experice through SVGShow Abstract
Providing meteorological maps and graphs in SVG
Enhancing the user experice through SVG
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Siemen, Stephan (European Centre for Medium-Range Weather Forecasts (ECMWF))
The European Centre for Medium-Range Weather Forecasts (ECMWF) is an international organisation providing its member organisations with forecasts in the medium time range of 3 to 15 days. As part of its mission, ECMWF also provides software to access, manipulate and visualise its data. The Magics graphics library, freely available under the Apache licence, is developed by ECMWF to display numerical weather forecast fields and observational data on geographical maps and statistical plots. For more than five years now it has supported SVG as one of its many output formats.
This talk will present examples of complex meteorological maps and graphs which show new possibilities users have gained by using SVG as an output format. Compared to the traditional output formats of PostScript and PNG, SVG enables users to edit, publish and interact with their visualisation. These possibilities are now also available directly to users of Metview, the meteorological workstation developed by ECMWF which uses Magics.
Recent work is presented to improve the SVG output further to support more editors and browsers. Meta data is added to SVG documents for various tools, such as Inkscape and SVG-edit. JavaScript code has been developed to navigate the resulting SVG, through pan and zoom, and offer magnification for users to study details. Tests have been developed where menus in SVG are added to enhance the user experience.
With advances in web browsers in the last year we were also able to successfully implement an OpenLayer client requesting SVG tiles from a WMS server.
The talk will also highlight some areas in which we found the support of SVG could be improved. One of these areas is Office packages, such as word processors and spreadsheets. Another area of interest is the support of SVG maps within GIS systems, such as through OGC standards. This requires Meta data for geographical map projections.
The talk will conclude with a comparison of SVG with other output formats of the Magics visualization package.
Links:
Hide Abstract
- Real-Time Cartography in Operational Hydrology
Show Abstract, Presentation (Separate Tab)
Real-Time Cartography in Operational Hydrology
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Lienert, Chris and Andreas Neumann (City of Uster)
In our fast-paced society, time has become a critical factor in numerous fields of human activity. In the field of natural hazard management, time has always played an important role, particularly in those phases shortly before, during and after the occurrence of hazardous events. Combined with relevant spatial information, time is one of the most important factors in preparation for these events. The extent of caused damage is closely connected to time: the more lead time available prior to the event, the more time is available for any stakeholder to take damage-minimizing measures.
This presentation presents the results of a PhD work carried out at the Institute of Cartography, ETH Zurich. In this work, the investigated natural hazards are flood hazards. The stakeholders primarily addressed are operational hydrologists who are members of crisis management during floods. These experts need the most actual information in very flexible, dynamic and geo-referenced form to better advise peers or external parties. The targeted increase of lead time may be achieved by improving the methodology in the domain of meteorological and hydrological forecasting. In the presented thesis, another complementary approach is pursued. It is based on the idea of providing interactive, visual methods in an optimized, cartographic monitoring infrastructure, allowing hydrologists to retrieve and bundle their desired flood information in a time-saving way.
Three Web-based data access modes had been developed in which maps play a central role: monitoring, comparing, and retracing of real-time data. Automatically generated real-time hydrological visualizations include a wide range of point, line and area symbolizations. Further value is added by interactive methods that allow to query both vector- and raster-based visualization, as well as to further explore spatiotemporal dynamics of hydrological data. Examples include flow maps representing real-time discharge by line width, maps showing river discharge and 24-hours precipitation sums with point symbols, charts of realtime and past precipitation and discharge situations, maps combining the real-time precipitation radar with the zero degree isotherms and maps illustrating historical extreme flooding events.
SVG was used to display the maps and charts, but also for the user interface, the interactivity and the inclusion of multimedia elements, such as photos.
Links:
Hide Abstract
- Server side SVG with OpenLayers
Show Abstract
Server side SVG with OpenLayers
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Hudson, Harris
OpenLayers is an Open Source javascript GIS client that supports many different data sources. OpenLayers has primarily made use of client side SVG for rendering vector data where SVG is supported by the user agent. As support for SVG functionality continues to expand in all modern web browsers there are direct implications for the possibilities of using server side SVG as layer tiles in OpenLayers applications. This presentation will discuss the different options available for including server side SVG layers into OpenLayers applications by use of both some OpenLayers core layer classes and along with some OpenLayers Addin layer classes. The possibilities, limitations, and general support for each of the different layer classes (along with the context each class is based upon) for using server side SVG layers will be presented.
Links:
Hide Abstract
- Web-based Vector Terrain Exploration
Show Abstract, Paper (Separate Tab)
Web-based Vector Terrain Exploration
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Whelan, John (The University of Hull)
The interactive exploration of geographical terrain over the Internet has been predominately based around the streaming of 3D textured geometry ([CartoBof], [Google Earth]) or tiled serving of 2D raster images ([Open Layers], [Google Maps] [OpenSpace]), however, there has been little variation in the depiction of terrain or the use of vector images as a means of exploration. Meanwhile, the cartographic community continues to develop new automated approaches to manual relief depiction methods ([ICA], [IOC]) and with previously license-bound datasets ([OpenData]) being made open, numerous web applications are coming to market ([UKMapApp]).
Alongside cartographers, the computer graphics community has pursued a variety of alternative terrain visualization techniques ([Saito & Takahashi 1990], [Visvalingam & Dowson 1998], [Whelan & Visvalingam 2003], [Buchin et. al. 2004]).
The SVG community have addressed web–mapping platforms from a number of perspectives, such as the augmentation of raster tile servers and vector data ([Antoniou & Morley 2008]), calling for a higher quality design to web mapping ([Dahinden & Raeber 2002]) and the adding interactive layers to topographic maps ([Isakowski & Neumann 2002]). However, if a terrain layer is included it is often a 2D slope shaded layer or a scanned topographical map as a backdrop.
Building on previous work presented at SVG Open ([Whelan 2005]) this paper presents an overview digital terrain visualization techniques (not exclusively web-based) and, with the approaching cross browser support for SVG, investigates what options high-quality, vector-based solutions can bring.
A prototype is presented whereby an interactive raster mapping service ([OpenSpace]) is linked to a pyramid-structured elevation database to deliver a variety of visualization styles for browser-based rendering. The proposed interaction model is a hybrid between the 2D interaction of the plan map to position the viewport on the data and then a projected, static view, based upon a user selected viewing direction. The linkage of such a system to a web-to-print platform illustrates the potential for reviving the medium of print for high-quality, customized views of landscapes.
The paper concludes by reflecting on the demand for alternive styles to interactive remote sensed image drapes in web-based terrain exploration and what possibilities SVG can provide in achieving this.
[CartoBof], Rhyne, T., 2007, available at http://www.siggraph.org/~rhyne/carto/
[Google Earth], Google, 2011, Google Earth, available at
http://www.google.co.uk/intl/en_uk/earth/index.html
[Open Layers], OSGeo, 2011, OpenLayers: Free Maps for the Web, available at http://openlayers.org/
[Google Maps], Google, 2011, Google Maps, available at http://maps.google.co.uk/
[OpenSpace], Ordnance Survey UK, 2011, OS Open Space, available at http://maps.google.co.uk/
[ICA], International Cartographic Association, available at
http://icaci.org/
[IOC], Institute of Cartography, ETH, Zurich, available at http://www.karto.ethz.ch/about/index_EN
[OpenData], Ordnance Survey UK, OS Open Data, available at http://www.ordnancesurvey.co.uk/oswebsite/products/os-opendata.html
[UKMapApp], Endecott, P., 2011, available at http://ukmapapp.com/index.html
[Saito & Takahashi, 1990], Saito T., Takahashi T., 1990, “Comprehensible Rendering of 3-D Shapes”, Computer Graphics, 24(4), pp. 197 - 206
[Visvalingam & Dowson 1998] Visvalingam M., Dowson K., 1998, “Algorithms for Sketching Surfaces”, Computers and Graphics, 22(2-3), pp. 269 – 280
[Whelan & Visvalingam 2003], Whelan J. C. & Visvalingam M., 2003, "Formulated silhouettes for sketching terrain." In Theory and Practice of Computer Graphics 2003, 90–96.
[Buchin et. al. 2004], Buchin K, Sousa, M. C., Dollner J., Samavati F., Walther M., 2004, “Illustrating Terrains using Direction of Slope and Lighting”, ICA Commission on Mountain Cartography, WORKSHOP — Vall de Núria, Spain, available at http://www.mountaincartography.org/publications/papers/papers_nuria_04/buchin.pdf
[Antoniou & Morley 2008]), Antoniou V. & Morley J., 2008 “Web Mapping and WebGIS: do we actually need to use SVG?”, in Proceedings of SVG Open 2008, Nuremberg, available at
http://www.svgopen.org/2008/papers/82-Web_Mapping_and_WebGIS_do_we_actually_need_to_use_SVG/
[Dahinden & Raeber 2002], Dahinden T., Raeber S., 2002, “Attractive Vectormaps - a call for well arranged webmaps” in Proceedings of SVG Open 2002, Zurich, available at
https://www.svgopen.org/2002/abstracts/dahinden__good_map_graphics.html
[Isakowski & Neumann 2002], Isakowski Y. & Neumann A., 2002, “Interactive Topographic Web-Maps Using SVG” in Proceedings of SVG Open 2002, Zurich, available at https://www.svgopen.org/2002/papers/isakowski_neumann__svg_for_interactive_topographic_maps/index.html
[Whelan 2005], Whelan J., 2005, “SVG For Teaching 2D Graphics Standards” in Proceedings of SVG Open 2005, Enschede, available at
http://www.svgopen.org/2005/papers/TeachingGraphicsStandards/index.html
Hide Abstract
SVG with Other Web Standards (e.g. HTML or XSLT)
- How Maqetta (http://maqetta.org) uses SVG
Show Abstract, Presentation (Separate Tab)
How Maqetta (http://maqetta.org) uses SVG
Papertopic: SVG with Other Web Standards (e.g. HTML or XSLT)
Author(s): Ferraiolo, Jon (IBM)
This talk is about how the Maqetta open source project (visual authoring tool for HTML5: http://maqetta.org) uses SVG today and our plans for leveraging SVG to a greater extent in the future, including expanding the existing HTML5 authoring support in Maqetta to include vector graphics (i.e., SVG) authoring. One focus area will be trials and tribulations the Maqetta team had using HTML, SVG and CSS transforms in combination, and the techniques used to navigate past spec ambiguities and browser bugs.
Hide Abstract
- WiseMapping: 5 years of development with SVG.
Show Abstract
WiseMapping: 5 years of development with SVG.
Papertopic: SVG with Other Web Standards (e.g. HTML or XSLT)
Author(s): Veiga, Paulo (WiseMapping) and Pablo Luna (WiseMapping)
Is SVG mature enough for creating advance editors? .
Nowadays the proof lies in the hundreds of good applications which make use of SVG, but 5 years ago, when we started working on WiseMapping, there was no way of being certain.
WiseMapping was the first web mind mapping tool that fully leveraged the power of SVG. The goal of this keynote is to share our experience of the last 5 years working with SVG (and his evil cousin VML). We will briefly overview the architecture, and look into the obstacles we faced and our plans for the future.
Hide Abstract
SVG Wow!
- SVG Wow 2011
Show Abstract
SVG Wow 2011
Papertopic: SVG Wow!
Author(s): Dahlström, Erik (Opera Software) and Vincent Hardy (Adobe Systems)
This session showcases the many different ways to use SVG for creating interactive, animated and visually attractive web content.
This year, the session will feature "wow!" development done with SVG on the web, some new demos by the presenters, as well as a revised version of the SVG Wow! web site.
A range of open web standards that integrate and complement SVG will be examined, such as HTML5, CSS3 with highlights on filter effects, 3D, audio and video as well as some surprises.
Links:
Hide Abstract
SVG Viewer Implementations
- Welcome to SVG Open 2011
Show Abstract
Welcome to SVG Open 2011
Papertopic: SVG Viewer Implementations
Author(s): Dengler, Patrick (Microsoft)
This session will introduce the theme of SVG Open: "Where SVG meets the web." It has been only a few months since Internet Explorer 9 shipped support for SVG and the opportunities to incorporate SVG into the standards based web are coming to fruition. Patrick will do a brief kick off for the conference and show some new features that have been introduced to date in Internet Explorer 10.
Hide Abstract
Workflow for Creating and Using SVG
- Different Dynamic Options for Integrating SVG:
Blending client-side, dynamic, on-revision, and static contentShow Abstract
Different Dynamic Options for Integrating SVG:
Blending client-side, dynamic, on-revision, and static content
Papertopic: Workflow for Creating and Using SVG
Author(s): Gezelter, Robert (Robert Gezelter Software Consultant)
SVG allows extreme flexibility in multiple dimensions when presenting information. Contents, layout, and typography are often developers' primary focus. The production process for an SVG also presents a number of opportunities for process optimization. Examples of approaches for providing SVG elements are:
- static documents,
- semi-dynamic documents generated as the product of an automated process,
- on-demand documents, or
- products of client-executed code
It is not often appreciated that these techniques are by no means mutually exclusive. Using other W3C standards (e.g., XHTML, DOM), SVG-based elements can be included or modified at any point at any point in the process, from original development to JavaScript-based user interaction with the end user. This multistage process provides opportunities at each and every step in the process.
This presentation will briefly show how these examples can be employed to minimize overhead and maximize the power of SVG to represent high-quality graphic output with maximum efficiency.
Links:
Hide Abstract
- Where have all the cycles gone?
Show Abstract
Where have all the cycles gone?
Papertopic: Workflow for Creating and Using SVG
Author(s): Danilo, Alex (Abbra) and Takanari Hayama (IGEL Co., Ltd.)
SVG rendering architectures have come a long way over the past decade. Many different approaches are taken to optimize the display speed of vector content. Pure software rendering versus hardware accelerated rendering approaches attempt to balance memory consumption, silicon utilization against speed to bring the highest rendering performance per watt, dollar or other metric.
As SVG graphics and web applications become more complex and are built dynamically or as a combination of graphics assets produced by a number of developers a new issue emerges. That being, what is the expected performance level of the resulting SVG application graphics?
A complex SVG application may consist of graphics exported from authoring tools such as Illustrator, Inkscape etc. which are then combined with complex scripts that combine the assets with dynamic layout or any number of other features such as scroll controls, etc. to produce a highly complex web application.
Debugging such complex applications is a challenge in any environment. When facing deployment in an embedded environment the resource constraints impact performance considerably. It is a fact that in any hardware device, the number of cycles per second available for rendering an image are finite whether the rendering architecture uses CPU or GPU rendering.
Authors of web style applications targeting an embedded device soon discover that the graphics assets produced on a high speed workstation show terrible rendering performance on the actual target.
Traditional analysis of web applications and rendering performance revolves around tools to look at the state of the DOM (e.g. IE’s F12 tools, Dragonfly, Firebug, etc.), performance profilers for the software stack (Shark, Vtune, etc.) and these provide very few clues as to what (1) the actual resultant performance on the device will be; and (2) what graphic assets are responsible for the majority of resource consumption.
Examples encountered in the real world have shown us that the graphics designers and script authors blame things such as excessive use of transparency compositing, excessive DOM manipulation and any number of other things as the root cause of poor application performance. Detailed engineering analysis can in many cases show that the ‘gut feel’ of the graphics developers is completely wrong, and this reflects badly on the existing performance analysis tools available to tune and measure real world web applications. This applies to all devices but is especially important for mobile, embedded and resource constrained environments.
We will give an overview of a number of rendering architectures, the performance trade-offs in each design and review approaches taken to date to attempt to measure application resource utilization. A couple of case studies of different embedded device projects will be described.
Finally we will present a measurement framework and tool built for the purpose of allowing developers to see what components in a web application are responsible for resource consumption. We will also outline a simulation framework that aims to let SVG graphics developers author assets on a workstation and view those assets in a simulator. The simulator attempts to replicate the performance of a real embedded device thus giving the developer immediate feedback about the eventual performance characteristics of their application and graphics without requiring real hardware to develop with.
Future directions of the analysis tool and optimization techniques will also be discussed.
Hide Abstract
