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

3,534 views

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,534
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • SVG in Opera’s desktop, mobile & TV browsers — edition 2011

    1. 1. SVG in Opera’s desktop,mobile & TV browsers— edition 2011 @andreasbovens
    2. 2. Oslo, Norway
    3. 3. Developer Relations team
    4. 4. Bruce Lawson Daniel Davis Divya Manian Chris Mills Karl Dubost Shwetank Dixit Tiffany Brown Andreas Bovens Luz CaballeroPatrick Lauke Zi Bin Cheah Vadim Makeev Mike Taylor
    5. 5. It’s been a busy year!
    6. 6. & Opera Opera Nexthttp://www.opera.com/browser/ http://www.opera.com/browser/next/ http://my.opera.com/desktopteam/
    7. 7. HTML5test.com400 346300200100 & friends 0 10.60 11 11.10 11.50 12
    8. 8. http://caniuse.com/#compare=y&b1=opera+10.6&b2=opera+12
    9. 9. HTML5 parser:- support for new elements- standardized error handling- support for inline SVG
    10. 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. 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 childrenAlso: special focus onhardware acceleration onTVs, set-top boxes, etc.
    12. 12. Talking about TV use cases...We now supporttext-overflow=ellipsison text and textArea elements... See also http://www.w3.org/2011/03/03-svg-minutes.html#item04
    13. 13. Hardware accelerationon desktop for WebGL, 2D canvas,SVG & other painting operations
    14. 14. Opera Mobile for Android phones & tablets http://m.opera.com/
    15. 15. Opera Mobile for Android phones & tablets speed, UI optimizations, standards support http://m.opera.com/
    16. 16. No more checkerboard, fast panning- new way of rendering visible content- some shortcuts for speed optimization http://m.opera.com/
    17. 17. 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/
    18. 18. No more checkerboard, fast panningbilinear 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/
    19. 19. When developing for mobile, look into usingthe viewport meta tag, @viewport to solvezooming and panning issues. it’s CSS, so this can be used inside SVG files as well! http://m.opera.com/
    20. 20. Optimizing your layout for phones and tablets using viewport and media queries Andreas Bovens - Opera Softwarehttp://goo.gl/j6YwF http://goo.gl/f303y http://m.opera.com/
    21. 21. Opera Dragonfly
    22. 22. Opera Dragonfly 1.0 and 1.1 releases.Rich feature set for local and evenremote SVG debugging.http://www.opera.com/dragonfly/documentation/
    23. 23. Test automationOperaDriver is part of Selenium 2 and usesthe Scope interface (like Opera Dragonfly) tocommunicate directly with Opera from Java.http://code.google.com/p/selenium/wiki/OperaDriver
    24. 24. ExampleAutomated game testing using OperaDriverautomating the “Inbox Attack” game.
    25. 25. DetailsLong video: http://goo.gl/2VseMShort video: http://goo.gl/iDNSEGitHub repo: http://goo.gl/yQ7b1
    26. 26. Thanks for listening :-)Any questions? @andreasbovensThanks to ~yc for the wooden background: http://yc.deviantart.com/art/Wood-Rays-62468397

    ×