SVG in the Opera browser

4,875 views
4,453 views

Published on

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)

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,875
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
39
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide





































  • SVG in the Opera browser

    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
    4. Opera 10.10
    5. Opera 10.10 Opera Unite
    6. Opera 10.5x
    7. Opera 10.5x Standalone widgets .ogg <video> Vega Offline Storage Carakan
    8. Opera 10.6x
    9. Opera 10.6x .webm <video> Web Workers AppCache Geolocation
    10. Opera Mini 5.x
    11. available for 3000 phones
    12. Opera Mobile 10
    13. Opera Mobile 10.1 beta
    14. Opera Mobile 10.1 beta Vega Geolocation Carakan
    15. http://www.opera.com/docs/specs/productspecs/
    16. http://www.opera.com/docs/specs/presto26/
    17. http://www.opera.com/docs/specs/presto26/
    18. Performance optimizations SVG traversal logic redesign filter, gradient, opacity optimizations clipping path optimizations Demo: http://people.opera.com/andreasb/demos/demos_svgopen2010/performance/
    19. 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/
    20. Various bug fixes alignment with SVG 1.1 2nd edition
    21. http://www.codedread.com/svg-support.php
    22. http://www.codedread.com/svg-support.php
    23. SVG + ...
    24. SVG + JS Demo: http://people.opera.com/danield/svg/inbox-attack.svg
    25. 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/
    26. SVG + media queries
    27. 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;} } ...
    28. 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;} } ...
    29. different layouts for all media queries kinds of browser sizes Demo: http://people.opera.com/andreasb/demos/demo_mediaqueries/
    30. 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/
    31. SVG + geolocation Demo: http://people.opera.com/danield/svg/where-am-i.svg
    32. SVG + video Demo: http://people.opera.com/andreasb/demos/demos_svgopen2010/video-filters/
    33. SVG + widgets Demo: http://widgets.opera.com/widget/15321/1.1/
    34. Thank you! @andreasbovens

    ×