The document discusses Vodafone's use of SVG and widgets. SVG is the preferred format for scalable graphics in Vodafone due to its support for data exchange, icon design, and interaction design. Vodafone uses widgets, which are packaged HTML files containing resources like CSS, JS, bitmaps and SVG, to create app-like experiences for mobile users. SVG is important for widgets because screen resolutions and pixel densities are highly fragmented across devices, and SVG allows for dynamic sizing and scaling of graphics.

1. SVG in Vodafone
Widgets
Daniel Herzog,Vodafone
@danfooo

2. Vodafone Internet Services - London and Düsseldorf
@danfooo Daniel Herzog, @danfooo

3. Düsseldorf, Germany
@danfooo Daniel Herzog, @danfooo

4. SVG and Vodafone
@danfooo Daniel Herzog, @danfooo

5. SVG and Vodafone
SVG is #1 format for Scalable Graphics in Vodafone
•Data exchange
•Icon design
•Interaction design
@danfooo Daniel Herzog, @danfooo

6. SVG and Vodafone
A piece of History:
Bundesliga Player
Presented at SVG Open 2007
@danfooo Daniel Herzog, @danfooo

7. @danfooo Daniel Herzog, @danfooo

8. SVG and Vodafone
Big demand for graphical scalability
because of incredible handset fragmentation
@danfooo Daniel Herzog, @danfooo

9. SVG and Vodafone
Vodafone demands SVG
support for these handsets.
@danfooo Daniel Herzog, @danfooo

10. SVG and Vodafone
How is that going to be usable?
@danfooo Daniel Herzog, @danfooo

11. Vodafone Widgets
@danfooo Daniel Herzog, @danfooo

12. Vodafone Widgets
Widgets in the W3C sense.
w3.org/TR/widgets/
@danfooo Daniel Herzog, @danfooo

13. Vodafone Widgets
Packed HTML with all resources.
CSS, JavaScript, Bitmaps, SVG
And whatever else.
Inside one zip with some extra instructions.
@danfooo Daniel Herzog, @danfooo

14. Vodafone Widgets
Downloaded once.
To fetch only the actual data everytime.
But updatable like an (iPhone) App.
@danfooo Daniel Herzog, @danfooo

15. Vodafone Widgets
Widgets are Apps.
Because to a customer they look and
feel and smell like Apps.
@danfooo Daniel Herzog, @danfooo

16. Vodafone Widgets
But they are made with web-technologies.
@danfooo Daniel Herzog, @danfooo

17. Vodafone Widgets
Made for multiple
•OS
•Device types
•Screensizes
•Resolutions / pixel densities
@danfooo Daniel Herzog, @danfooo

18. Vodafone Widgets
•Application character
•Potentially even more multi-platform
then the web.
•Because it can work offline.
@danfooo Daniel Herzog, @danfooo

19. Vodafone Widgets
Available on S60 phones for VF
customers.
Accessible from the home screen.
Out of the box or as OTA download.
@danfooo Daniel Herzog, @danfooo

20. Vodafone Widgets
Client made by Opera.
SVG support pretty good
Partial Tiny 1.2, as in Opera mobile
@danfooo Daniel Herzog, @danfooo

21. Vodafone Widgets
And on the new
Vodafone 360 H1 device.
Coming pre-christmas
to EU markets.
More: bit.ly/1e1JV6
@danfooo Daniel Herzog, @danfooo

22. Vodafone Widgets
Widget engine done by
Samsung, Webkit based.
@danfooo Daniel Herzog, @danfooo

23. Vodafone Widgets
How to make one?
360 Tutorial: bit.ly/10x59l
Info in the betavine Widget Zone: bit.ly/7P0y
@danfooo Daniel Herzog, @danfooo

24. Vodafone Widgets
Why make one?
Huge contests, win up to 100k €: bit.ly/Qv7DM
@danfooo Daniel Herzog, @danfooo

25. Using SVG in Vodafone Widgets
@danfooo Daniel Herzog, @danfooo

26. Using SVG in Vodafone Widgets
SVG as background image
•Perfect for rounded corners
•Proportionally adapting
@danfooo Daniel Herzog, @danfooo

27. Using SVG in Vodafone Widgets
SVG as object component
•Reusable components
•Parent to child / Child to parent scripting
•Possible to fall back when running without
SVG support
•Still with all advantages from HTML/CSS
@danfooo Daniel Herzog, @danfooo

28. Using SVG in Vodafone Widgets
SVG in fullscreen
•Mostly for simple 2d games
•or UIs that don‘t need text-flow or CSS
layout features.
@danfooo Daniel Herzog, @danfooo

29. Why is SVG so important
for Widgets?
@danfooo Daniel Herzog, @danfooo

30. Why is SVG so important for Widgets?
Resolutions are overly fragmented.
In terms of screen-size
and pixel resolution.
= in pixel density (ppi)
@danfooo Daniel Herzog, @danfooo

31. Why is SVG so important for Widgets?
Multi-resolution as an advantage of Web-Technology
Samsung H1 (267ppi)
Nokia N97 Mini (230ppi)
Nokia N97 (210ppi)
Nokia 6710 classic (181ppi)
Nokia N95 (153ppi)
24inch Desktop, Full-HD'ish (94ppi)
@danfooo Daniel Herzog, @danfooo

32. Why is SVG so important for Widgets?
Widget Engines should not run at 96ppi.
If they can know better.
VF widgets run on the correct resolution.
@danfooo Daniel Herzog, @danfooo

33. Why is SVG so important for Widgets?
SVG can therefor be brought to dynamic sizes.
Via CSS.
@media all and (min-resolution: 200dpi)
{
body {font-size: 22px}
}
.mySVGButton {width: 1em;}
@danfooo Daniel Herzog, @danfooo

34. Bottom line
•Lots of nice ways to use SVG
•Lots of good reasons to do it
@danfooo Daniel Herzog, @danfooo

35. My problem list
•Performance (never ever enough)
•SVG is not SVG-T
•Can‘t emulate the mobile browser or
Widget Runtime on a desktop browser.
@danfooo Daniel Herzog, @danfooo

36. Questions
@danfooo Daniel Herzog,Vodafone
Daniel Herzog, @danfooo