My presentation for SVG Open 2010. http://svgopen.org/2010/registration.php?section=abstracts_and_proceedings#paper_32 Textures from http://www.flickr.com/photos/delanydean/4460819042/ (CC by 2.0) and http://www.flickr.com/photos/poetatum/3380087493/ (CC by-nc 2.0)

1. SVG Open 2010
SVG in the Opera browser
dreas
An ens r Relations
Bopveader Develope
u L
Gro e
Phon

2. Andreas
Bovens
Group Leader Developer Relations
Opera Software ASA Phone: +47 23 69 26 68
Waldemar Thranes gate 98 Fax: +47 23 69 24 01
P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59
0131 Oslo E-mail: andreasb@opera.com
Norway Web site: www.opera.com
@andreasbovens

3. @andreasbovens

6. Opera 10.10

7. Opera 10.10
Opera Unite

8. Opera 10.5x

9. Opera 10.5x
Standalone widgets
.ogg <video>
Vega
Offline Storage
Carakan

10. Opera 10.6x

11. Opera 10.6x
.webm <video>
Web Workers
AppCache
Geolocation

12. Opera Mini 5.x

14. available for
3000 phones

16. Opera Mobile 10

17. Opera Mobile 10.1 beta

18. Opera Mobile 10.1 beta
Vega
Geolocation
Carakan

19. http://www.opera.com/docs/specs/productspecs/

20. http://www.opera.com/docs/specs/presto26/

21. http://www.opera.com/docs/specs/presto26/

22. Performance optimizations
SVG traversal logic redesign
filter, gradient, opacity optimizations
clipping path optimizations
Demo:
http://people.opera.com/andreasb/demos/demos_svgopen2010/performance/

23. Buffered rendering
SVG Tiny 1.2: “The creator of SVG content might want to
provide a hint to the implementation about how often an
element is modified to make speed vs. memory tradeoffs
as it performs rendering.”
buffered-rendering="auto|dynamic|static"
Demos:
http://people.opera.com/andreasb/demos/demos_svgopen2010/bufferedrendering/
http://people.opera.com/andreasb/demos/demos_svgopen2010/bufferedrendering2/

24. Various bug fixes
alignment with SVG 1.1 2nd edition

25. http://www.codedread.com/svg-support.php

26. http://www.codedread.com/svg-support.php

27. SVG + ...

28. SVG + JS
Demo:
http://people.opera.com/danield/svg/inbox-attack.svg

29. SVG + CSS transitions
& transforms
Demos:
http://people.opera.com/andreasb/demos/demos_svgopen2010/transitions-dock/
http://people.opera.com/andreasb/demos/demos_svgopen2010/transitions-map/

30. SVG + media queries

31. media queries
@media screen and (max-width: 400px) {
/* CSS for browser widths smaller than 400px */
#nav {margin: 0}
#ad {display: none;}
}
@media screen and (min-width: 401px) and (max-width: 800px) {
/* CSS for browser widths between 401 and 800px */
#ad {float: left}
#content {padding: 5px;}
}
...

32. media queries
@media screen and (max-width: 400px) {
/* CSS for browser widths smaller than 400px */
#nav {margin: 0}
#ad {display: none;}
}
@media screen and (min-width: 401px) and (max-width: 800px) {
/* CSS for browser widths between 401 and 800px */
#ad {float: left}
#content {padding: 5px;}
}
...

33. different layouts for all
media queries
kinds of browser sizes
Demo:
http://people.opera.com/andreasb/demos/demo_mediaqueries/

34. different layouts for all
media queries
kinds of SVG image sizes
Demos:
http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-circle/
http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-logo/
http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-chart/
http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-map/
http://people.opera.com/andreasb/demos/demos_svgopen2010/transitions-mediaqueries-map/

35. SVG + geolocation
Demo:
http://people.opera.com/danield/svg/where-am-i.svg

36. SVG + video
Demo:
http://people.opera.com/andreasb/demos/demos_svgopen2010/video-filters/

37. SVG + widgets
Demo:
http://widgets.opera.com/widget/15321/1.1/

39. Thank you!
@andreasbovens