W3C

SVG Open 2007 Live from Tokyo

SVG open 2007 has started this morning in Tokyo. A list of papers about SVG are available on the Web site.

SVG 101

A bright sun, it is 9:56am, and I’m following a session given by Doug Schepers on SVG 101, explaining the basis of SVG.

SVG is a language for describing two-dimensional graphics and graphical applications in XML.

Doug is emphasizing that you should use SVG when you need it and depending on the constraints of your domain, platforms, etc. He is making a demo of Inkscape.

Design is an important phase when you create SVG. You should get the help of a real visual designer. But it has its own challenges. If we use a visual authoring tool to create shapes in SVG, we do not get an abstract structure of the design. It might create difficulties if we want to create interactivity.

Describe the structure is then a very important phase. It means that you have to give all information about the part which are logical units and helps to create future interactivity like resizing some of the elements, changing colors, reacting to clicks.

Then the Development phase can start with the programmer. A few debugger tools are being developed for SVG.

Deployment of your SVG design is the big issue right now, but some javascript framework will do for example onfly conversion to VML for IE. Another solution is to use Sam Ruby’s script which “silverlize” the SVG to Silverlight. The actual code doing the transformation is SVG2SL.js

Doug is going on a live programming of SVG. Charles McCathieNevile is taking the whiteboard to explain the scaling concept. Hmmm that could be a nice idea for future tutorials with more interactivity in between participants, where people who understood something explain to others.

Let’s give a very simple example so you can see what SVG looks like. The source code of this SVG file which draws a square.

<svg width="600" height="300" 
    version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <rect x="330" y="50" 
        width="150" height="75"
        rx="10" ry="20"
        style="stroke:pink; stroke-width:4"/>
</svg>

and that should be rendered in your desktop browser supporting SVG (Opera, Firefox (Mozilla), Safari (Apple)) as

rectangle

Doug explains how for animation SVG is based on time when Flash is based on frame. For understanding a bit more about SVG animation, I recommend the article of Antoine Quint, Digging Animation and you can also look at a package which makes the conversion of animation between flash and svg.

For Japanese speaking persons, there are

How to create Opera widgets using SVG

Back from lunch. Tamachi area between Keio University and JR station is always busy with people from the surrounding companies.

Erik Dahlström, Developer, Opera Software ASA, introduces how to create Opera widgets using SVG

A widget is a small chromeless web application. It usually contains a configuration file, an HTML document, images (SVG or otherwise), javascript files and stylesheets. To create a widget, you wil need a basic understanding of Web technologies and a text editor or Web IDE. You need a zip software, and a place to share your widgets at Opera.

  • YourWidget.zip
    • config.xml
    • index.html
    • … other things

A simple SVG example widget to download so you can explore how it is done and starts working with it.

Widgets are allowed to make cross-domain requests but only to domains specified in the config.xml of the widget. There is no access to local filesystem, it may be possible to access content over http or https (if defined in security section). You can’t access intranet and internet content in the same widget. You may not access ports below 1024, and for other ports which are not common it has to be specified in config.xml security section.

Erik shows an XMLHttpRequest script to be able to handle the data. Opera Software provides a number of utility javascript libraries such as ScraperLib.js or Animation.js

If you publish your widget on your own server, use the mimetype application/x-opera-widgets. For Apache, the simpler is to put a .htaccess file in the same directory: Addtype application/x-opera-widgets .zip.

My comment to the room: It will create a problem with other browsers except if they decide to implement Opera mimetype. Not Cool. Charles McCathieNevile is mentionning the Rich Web Client Activity at W3C which has published the 1st working draft of Widget 1.0.

The SVG images are inserted in the document with the object element. The rest is pretty much how you would develop a classic interactive HTML application with javascript. The talk would be better with a bit more of SVG codes ;) .

Erik is giving details about the javascript code svgscript.js giving interaction to the SVG file.

You can using compound documents in widgets. Note that the index.html file in a widget is not XHTML, not possible to use inline SVG in that file. So the solution is to use object or iframe elements or similar references to an XHTML or an XML file. You might want to do scripting accross documents, something like

var svgdocument = object.getSVGDocument();

or get the top document (index.html) from an embedded SVG.

var topdocument = window.top.document;

You can optimize your widgets by splitting the background and te foreground images, so the caching will be easier. Everything which is static should be in a separate file to make animations faster. Expensive CPU features like gradients and filters have to be used with care.

There is a mechanism for autodiscovery of widgets by using link, the same way, we discover feeds.

<link
  rel="alternate"
  type="application/x-opera-widgets"
  href="http://my.opera.com/grafio/widgets/get.pl?id=4647"/>

Right now it seems that Opera Browser doesn’t implement the solution of the Widget 1.0 W3C Working Draft.

<link
 type="application/widget"
 rel="alternate"
 href="http://widgets.example.org/SimAquarium"
 title="An Example Widget"/>

Question: Can you do content negotiation inside a widget package with index.html.fr, index.html.en, etc.

Answer: no. I don’t think so for now. (Charles)

2 thoughts on “SVG Open 2007 Live from Tokyo

  1. The link to the PNG image is broken. I guess this is one of those cases where it would have been nice to show the actual SVG inline.

  2. Indeed Jacques, it would be very cool to have this possibility. It would be nice also to have the possibility to have a basic inline wysiwyg SVG editor. Once you have put a basic SVG shape in a page, it would help people to understand if you could modify it live.

Comments are closed.