REPORT SVG Open 2011
SPOTS ON Mappetizer
ARTIST'S CORNER Interview: Art Science Factory


SVG Open 2011 Conference

Author: Andreas Neumann
Published: November 2011

The 9th annual SVG Open conference took place in Cambridge, Massachusetts, USA, October 17-20, 2011. Seventy-five attendees presented their work or projects around SVG and interactive web graphics or informed themselves about the latest projects and standardization efforts. The conference was hosted by Microsoft in their NERD (New England Research and Development) center, which is located right next to the MIT campus in Cambridge. We'd like to thank Microsoft for their great support prior and during the conference, both organizational and financial. More acknowledgements go to the Slippery Rock University and foundation for supporting the financial aspects, for sponsoring, and for participating in the organization of the conference. Other major companies (Google, IBM, Adobe) and universities (RIT, Harvard) supported the conference financially. Their financial support helped compensate part of the travel costs of students and Open Source developers.

Boston harbor
Bridge as seen from the Boston Harbour tour

The main conference lasted for three days, Monday through Wednesday, followed by one day of workshops on Thursday. The conference was opened by keynotes from Microsoft and Google officials. Patrick Dengler from the Internet Explorer team briefly talked about the SVG improvements in Internet Explorer 9 and 10. Version 10 will introduce SVG filters, many of them with a very fast implementation, often also hardware accelerated. He also informed the audience that there is not enough customer demand and that there are currently no plans to implement SVG fonts and SMIL animations. Igor Kopylov from Google discussed the increasing use of SVG in Google Docs and the problems they hit during the development of Google docs. Apparently, SVG is used in the drawing component of Google docs as well as in the charting component. Google docs users can use SVG clip-art and integrate SVG graphics in their text and presentation documents. One big problem they encountered is the reliable rendering of text within SVG documents. Their solution was to render text on their server and send back SVG paths, which guaranteed consistent rendering across different browsers and operating systems. Also line breaks and text wrapping in rectangular and irregular shapes is a big issue.

Traditionally, the SVG Open is also a place for SVG content developers to discuss issues and ideas with the W3C SVG working groups, with implementors of SVG viewers and authoring tools and with other web developers. Members of the SVG working group presented past and present work, as well as an outlook towards upcoming modules, such as the filter module, SVG parameters, vector effects and work around CSS that would apply to both HTML and SVG (e.g. CSS transitions/animations and CSS shaders). A current trend is that SVG and HTML can be better integrated. As an example, web developers can use SVG in an image tag. SVG content can also be directly embedded inline in an HTML document, or as a background image of a web page, as a graphic element in bullet lists, etc. In addition, the existing SVG syntax inspired new syntax in CSS styling and animation.

Two big open issues are the future of SMIL animation and SVG fonts. SMIL is implemented in all modern web browsers, except Internet Explorer. The IE team made it clear that there are currently two different animation models: SMIL animation and CSS animations. They do not want to implement both models (like all the other browser projects) but only the one model with more customer demand. Momentarily, they see more demand for CSS animations and fewer (or not enough) customer demand for SMIL animation. During the discussion, some attendees pointed out that SMIL was around much earlier than CSS animations, and that certain aspects (such as synchronization and timing issues) are not yet properly solved in CSS. In addition, animation is not always about styling, but also part of the content and thus CSS is not a suitable model to represent time and certain animation types. SVG font support is present in some browsers (Opera, Webkit/Safari/Chrome), others do not want to implement them (Mozilla and Internet Explorer). They see WOFF fonts (Web Open Font Format) as an alternative. Unfortunately WOFF fonts do not offer all the flexibility that SVG fonts offer (e.g. animation, filter effects, video, etc.), and they also are not as accessible as SVG fonts for web developers (not hand-authoring in the text-editor, no DOM access). On the other hand SVG fonts lack certain features that web fonts offer, such as advanced hinting. One open proposal tries to marry both approaches by allowing SVG glyph definitions within web fonts.

Boston harbor
An audience at the SVG Open 2011 conference

Now that native SVG support in modern web browsers is becoming ubiquitous, the next major issue is the lack of authoring tools. While excellent tools exist for static content, for example Inkscape, SVG Edit, Adobe Illustrator, and many others, authoring of interactive and animated content is still somehow limited towards developers with a broad skill set around XML/SMIL/DOM/Scripting, etc. SVG content development is not yet accessible for animation and UI designers who do not want to fiddle around with format internals and technology integration issues (Webdraw and Mobile Designer, now property of Corel and Oracle respectively, were excellent but did not meet the success they deserved, Ed.). Adobe presented some promising work to improve the situation: the upcoming Adobe Flash authoring tool will be able to export existing Flash projects to HTML5 (which includes HTML/SVG/DOM/Scripting and CSS components). Other projects include Adobe Wallaby (an Adobe Flash to HTML/SVG converter), improvements in Adobe Illustrator and Dreamweaver, as well as a new project called Adobe Edge which is a new animation tool specifically designed around HTML/CSS/SVG/Scripting.

Two Inkscape developers presented recent and upcoming improvements in Inkscape: new mesh gradients (needs to be standardized by the SVG working groups), better Live Path-Effects and Power Strokes (variable stroke-width), performance improvements and many more. Jon Ferraiolo from the IBM emerging technologies group presented “Maqetta”, a new visual HTML5 authoring tool developed under the hood of the Dojo Foundation. Among other web technologies, the authoring tool also uses SVG, as an example in mobile phone emulators (device silhouettes), in their drawing tools and in clip-arts. Maqetta targets mobile devices and desktop computers.

Monday evening's social event offered attendees a welcome reception on the 11th floor of the building of the NERD center. In a relaxing atmosphere and with a marvelous view of the Boston skyline across the Charles River, people enjoyed drinks and snacks while chatting with each other.

The Tuesday keynote from Mike Bostock about d3.js, a Javascript/SVG/CSS based visualization toolkit and library was clearly one of the highlights of the conference and took the audience by storm. He presented a large range of interactive and amazingly fast visualizations including chord and circular diagrams, tree representations, tree maps, choropleth maps, multiple linked scatterplot representations, date widgets, sunburst diagrams, animated bar and line charts, and many more. D3 implements various animators and interpolators, as well as utility functions that are useful or necessary for visualization purposes. D3 is a clever combination of different web technologies and uses them for the parts where the technologies can shine. D3's predecessor Protovis initially used the Canvas technology, but was later ported to SVG for its better interactivity features and the fact that it is a DOM tree (scene graph) where individual elements can be easily changed without having to redraw the entire scene. It seems like the D3 library inspired a lot of other web content authors and is quickly becoming a well-known library for visualization purposes on the web.

On Tuesday evening people enjoyed the dinner cruise on the Charles River and in the Boston Harbor, on a historic boat, while enjoying drinks and the delicious buffet. Guests were able to discover the cities of Cambridge and Boston in the evening from a different perspective.

Boston harbor
Folks at the Boston Harbour tour

The Wednesday keynote by Paulo Veiga and Pablo Luna presented Wisemapping, an interactive web application for the editing of mind maps. The project uses SVG for the rendering and editing of the mind maps. In older versions of Internet Explorer, the application uses VML. The project origins date back to 2004, a time where native SVG support in browsers was still immature. Luckily, the situation has improved a lot in the past years to a situation where usability and performance of the application is now satisfying. In their keynote they shared the ups and downs during the development of their product.

The closing of the main conference was the highly anticipated “SVG Wow!” presentation by Erik Dahlström (Opera Software) and Vincent Hardy (Adobe). The examples were a mix of different web technologies (SVG, HTML, CSS, Canvas, Scripting) and JavaScript libraries such as jQuery, YUI and d3.js. Examples included multimedia, games and a preview of CSS shader features. One amazing example featured dancing eggs (SVG elements) automatically synchronized with a sound which was analyzed on-the-fly while playing. It shows that today's web browser environment is fast enough to do on the fly multimedia analysis with JavaScript and animation. A demo of a CSS shader studio allowed to interactively change parameters and apply them to Graphics and Text.

Thursday was the workshop day. Six workshops, each lasting 2.5 hours, introduced different topics. Two workshops were held in parallel. The “JavaScript and SVG” workshop by Dan Bogaard turned out to be very popular. David Dailey's workshop on “Declarative Animation in SVG” is almost a classic at the SVG Open conference. Mike Bostock ran us through the concepts of his d3.js library and through a series of tutorial samples. Harris Hudson held a workshop on the use of SVG in the popular OpenLayers library. Barend Köbben presented his work on temporal WMS servers and where SVG fits in regarding temporal visualization and animation. Anthony Starks ran a workshop on generating SVG with the Go programming language. He made a Go programming environment where one could edit code in the web browser and the script would run on the server and immediately display the resulting SVG without much latency.

All in all the SVG Open 2011 conference was inspiring and a great opportunity for attendees, content developers and programmers to exchange ideas. The NERD center offered a great venue and the catering was excellent. The SVG Open website offers papers and slides for those who could not make it to the conference.

The 10th anniversary edition of the conference will be hosted in Switzerland. The call for participation will be published soon at the SVG Open website. The organizing team is considering the opening of the conference to other W3C graphic technologies, such as Scripting, Canvas, CSS and WebGL. Your ideas about shaping the future of the conference as well as feedback about past conferences are welcome.

Please contact us at: info@svgopen.org

Visit http://www.svgopen.org/