SVG in the Opera browser

  • 3,940 views
Uploaded on

My presentation for SVG Open 2010. …

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)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,940
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
38
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide





































Transcript

  • 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