Die Flash Die - SVG has arrived

40 minutes - double-length talk
Mon, 2010-01-18 13:30 - 14:10

Die Flash Die: SVG for web designers with Inkscape!

Ding dong!, you know the rest... And what a great time to be working on the web!
Internet explorer is rapidly losing market share, modern browsers have outstandingly faster javascript engines and most importantly! all webkit, gecko and opera based browsers near fully support the scalable vector graphics format SVG booyah everybody!.

My tutorials in the past have focused publishing and desktop artwork but now it's time to take on the web!

Participants should be familiar with using Inkscape and basic web formats (SVG, HTML & CSS).

Due to the advanced nature of the topics covered here, this tutorial may also be pre-recorded for immediate distribution after the talk to help excite more detailed questions while at the linux.conf.au

1. Interactivity
Hooray for JavaScript+HTML5+SVG : Small demo of all the cool things that are being done with open web technologies.

2. Drawing with Inkscape
Very Quick Inkscape Introduction (most of you should know this guy already)
Activity: Let's draw a banner together. (quick and dirty please)

3. Polishing the XML
Tools and tips for optimizing Inkscape SVG for any purpose now and into the future.
Node Optimization (small perl script provided to class)
Jeff Schiller's Scour (awesome python scripts) http://www.codedread.com/scour + Doug Schepers (explaining Scour) http://river-valley.tv/scour-an-svg-scrubber/

4. SVG for Localization
How to create beautiful SVG files that can be easily localized online or managed from your projects repo
Activity: Enhancing our banner with multiple languages.

5. Chameleon styles Putting in a little extra effort for a lot of extra reward. CSS and SVG: dynamically themed illustrations
Activity: Recreating our banner to auto-magically use different themes (with only a text editor)

6. Rendering
Creating PNG's from a super smart single SVG file (for those old and not-so-smart web browsers)
Activity: Constructing a smiley theme from a single SVG file

7. Looting the un-dead (vectors)
Resurrecting dead graphics with swfdec and cairo for use in SVG's.
A handy migration path for the trapped and willing - also the only time flash will be uttered during this tutorial;-).

8. Interactive question time Ask and we will perform.
Remaining questions regarding tools, tips and techniques shown during this talk.

9. Bonus remaining-time activity
Activity: Constructing a smiley theme from a single SVG file: draw once face and you've almost drawn them all.

Recommended for participants

Inkscape .47 or above http://inkscape.org/
Scour Tools http://codedread.com/scour/
SWFdec http://swfdec.freedesktop.org
firefox 3.5 or above http://www.firefox.com

Andy Fitz

Open Source Designer, Living in China, Using 100% Free software