Demos available on http://people.opera.com/andreasb/demos/demos_svgopen2011/ For a long time now, Opera has been committed to implementing SVG in its desktop and mobile browser products. Over the last year, we have been focused on improving the performance of our SVG implementation, while adding new features as well, including support for embedding SVG in HTML5. Our Opera Dragonfly debugger has matured as well and is now a powerful tool for debugging SVG on desktop as well as on mobile. In this presentation, I give a status update of Opera's SVG implementation and introduce some of the latest changes to our Opera Presto engine. I also show demos and practical examples of how SVG can be mixed with other technologies to create compelling web applications.

1. SVG in Opera’s desktop,
mobile & TV browsers
— edition 2011
@andreasbovens

2. Oslo, Norway

3. Developer Relations team

4. Bruce Lawson Daniel Davis
Divya Manian
Chris Mills
Karl Dubost
Shwetank Dixit Tiffany Brown
Andreas Bovens
Luz Caballero
Patrick Lauke
Zi Bin Cheah Vadim Makeev Mike Taylor

5. It’s been a busy year!

6. &
Opera Opera Next
http://www.opera.com/browser/ http://www.opera.com/browser/next/
http://my.opera.com/desktopteam/

7. HTML5test.com
400
346
300
200
100
& friends
0
10.60 11 11.10 11.50 12

8. http://caniuse.com/#compare=y&b1=opera+10.6&b2=opera+12

9. HTML5 parser:
- support for new elements
- standardized error handling
- support for inline SVG

10. Improved painting performance
- painting code on a diet
- smarts to optimize for specific TV use cases,
e.g. transforms on <g>s with lots of children

11. Improved painting performance
- painting code on a diet
- smarts to optimize for specific TV use cases,
e.g. transforms on <g>s with lots of children
Also: special focus on
hardware acceleration on
TVs, set-top boxes, etc.

12. Talking about TV use cases...
We now support
text-overflow=ellipsis
on text and textArea elements...
See also http://www.w3.org/2011/03/03-svg-minutes.html#item04

13. Hardware acceleration
on desktop for WebGL, 2D canvas,
SVG & other painting operations

15. Opera Mobile for Android phones & tablets
http://m.opera.com/

16. Opera Mobile for Android phones & tablets
speed, UI optimizations, standards support
http://m.opera.com/

17. No more checkerboard, fast panning
- new way of rendering visible content
- some shortcuts for speed optimization
http://m.opera.com/

18. No more checkerboard, fast panning
- new way of rendering visible content*
- some shortcuts for speed optimization
* we don’t make fully use of this for SVG yet though
http://m.opera.com/

19. No more checkerboard, fast panning
bilinear interpolation for zoomed images already in the viewport
- new way of rendering visible content*
- some shortcuts for speed optimization**
nearest neighbor interpolation for zoomed images that are pulled in from outside the viewport
* we don’t make fully use of this for SVG yet though
** switching between bilinear and nearest-neighbor interpolation
http://m.opera.com/

20. When developing for mobile, look into using
the viewport meta tag, @viewport to solve
zooming and panning issues.
it’s CSS, so this
can be used inside
SVG files as well!
http://m.opera.com/

21. Optimizing your layout
for phones and tablets
using viewport and
media queries
Andreas Bovens - Opera Software
http://goo.gl/j6YwF http://goo.gl/f303y
http://m.opera.com/

22. Opera Dragonfly

23. Opera Dragonfly 1.0 and 1.1 releases.
Rich feature set for local and even
remote SVG debugging.
http://www.opera.com/dragonfly/documentation/

24. Test automation
OperaDriver is part of Selenium 2 and uses
the Scope interface (like Opera Dragonfly) to
communicate directly with Opera from Java.
http://code.google.com/p/selenium/wiki/OperaDriver

25. Example
Automated game testing using OperaDriver
automating the “Inbox Attack” game.

27. Details
Long video: http://goo.gl/2VseM
Short video: http://goo.gl/iDNSE
GitHub repo: http://goo.gl/yQ7b1

28. Thanks for listening :-)
Any questions?
@andreasbovens
Thanks to ~yc for the wooden background: http://yc.deviantart.com/art/Wood-Rays-62468397