Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SVG in the Opera browser

5,707 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
  • Be the first to comment

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

×