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.
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
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
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
- … 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.
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
The talk would be better with a bit more of SVG codes ;) .
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)