SVG in Opera’s desktop, mobile & TV browsers — edition 2011

@andreasbovens

Oslo, Norway

Developer Relations team

Chris Mills

Bruce Lawson Daniel Davis

Karl Dubost

Shwetank Dixit

Divya Manian

Luz Caballero

Tiffany Brown

Vadim Makeev Mike TaylorZi Bin CheahPatrick Lauke

Andreas Bovens

It’s been a busy year!

&

http://www.opera.com/browser/next/http://www.opera.com/browser/http://my.opera.com/desktopteam/

Opera Opera Next

0

100

200

300

400

10.60 11 11.10 11.50 12

HTML5test.com

& friends

346

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

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

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

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.

We now support text-overflow=ellipsison text and textArea elements...

Talking about TV use cases...

See also http://www.w3.org/2011/03/03-svg-minutes.html#item04

on desktop for WebGL, 2D canvas, SVG & other painting operations

Hardware acceleration

Opera Mobile for Android phones & tablets

http://m.opera.com/

Opera Mobile for Android phones & tablets

http://m.opera.com/

speed, UI optimizations, standards support

http://m.opera.com/

No more checkerboard, fast panning- new way of rendering visible content- some shortcuts for speed optimization

http://m.opera.com/

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/

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** switching between bilinear and nearest-neighbor interpolation

bilinear interpolation for zoomed images already in the viewport

nearest neighbor interpolation for zoomed images that are pulled in from outside the viewport

http://m.opera.com/

When developing for mobile, look into using the viewport meta tag, @viewport to solve zooming and panning issues.

it’s CSS, so thiscan be used inside SVG files as well!

http://m.opera.com/

http://goo.gl/j6YwF

Optimizing your layout

for phones and tablets

using viewport and

media queriesAndreas Bovens - Opera Software

http://goo.gl/f303y

Opera Dragonfly

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

Test automationOperaDriver 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

ExampleAutomated game testing using OperaDriver automating the “Inbox Attack” game.

DetailsLong video: http://goo.gl/2VseMShort video: http://goo.gl/iDNSE GitHub repo: http://goo.gl/yQ7b1

Thanks for listening :-)Any questions?

@andreasbovens

Thanks to ~yc for the wooden background: http://yc.deviantart.com/art/Wood-Rays-62468397