SVG Open 2010
SVG in the Opera browser



                       dreas
                    An ens r Relations
            ...
Andreas
Bovens
Group Leader Developer Relations


Opera Software ASA              Phone:      +47 23 69 26 68
Waldemar Thr...
@andreasbovens
Opera 10.10
Opera 10.10



 Opera Unite
Opera 10.5x
Opera 10.5x

Standalone widgets

                        .ogg <video>
  Vega

                     Offline Storage
    Cara...
Opera 10.6x
Opera 10.6x



                 .webm <video>
Web Workers


                AppCache
  Geolocation
Opera Mini 5.x
available for
3000 phones
Opera Mobile 10
Opera Mobile 10.1 beta
Opera Mobile 10.1 beta



Vega
                   Geolocation

 Carakan
http://www.opera.com/docs/specs/productspecs/
http://www.opera.com/docs/specs/presto26/
http://www.opera.com/docs/specs/presto26/
Performance optimizations
SVG traversal logic redesign
filter, gradient, opacity optimizations
clipping path optimizations
...
Buffered rendering

SVG Tiny 1.2: “The creator of SVG content might want to
provide a hint to the implementation about how...
Various bug fixes
alignment with SVG 1.1 2nd edition
http://www.codedread.com/svg-support.php
http://www.codedread.com/svg-support.php
SVG + ...
SVG + JS


Demo:
http://people.opera.com/danield/svg/inbox-attack.svg
SVG + CSS transitions
          & transforms

Demos:
http://people.opera.com/andreasb/demos/demos_svgopen2010/transitions-...
SVG + media queries
media queries

@media screen and (max-width: 400px) {
/* CSS for browser widths smaller than 400px */
#nav {margin: 0}
#ad...
media queries

@media screen and (max-width: 400px) {
/* CSS for browser widths smaller than 400px */
#nav {margin: 0}
#ad...
different layouts for all
        media queries
                                                kinds of browser sizes



...
different layouts for all
        media queries
                                                kinds of SVG image sizes

...
SVG + geolocation


Demo:
http://people.opera.com/danield/svg/where-am-i.svg
SVG + video



Demo:
http://people.opera.com/andreasb/demos/demos_svgopen2010/video-filters/
SVG + widgets


Demo:
http://widgets.opera.com/widget/15321/1.1/
Thank you!


 @andreasbovens
SVG in the Opera browser
SVG in the Opera browser
SVG in the Opera browser
SVG in the Opera browser
SVG in the Opera browser
Upcoming SlideShare
Loading in...5
×

SVG in the Opera browser

4,087

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,087
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide





































  • Transcript of "SVG in the Opera browser"

    1. 1. SVG Open 2010 SVG in the Opera browser dreas An ens r Relations Bopveader Develope u L Gro e Phon
    2. 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. 3. @andreasbovens
    4. 4. Opera 10.10
    5. 5. Opera 10.10 Opera Unite
    6. 6. Opera 10.5x
    7. 7. Opera 10.5x Standalone widgets .ogg <video> Vega Offline Storage Carakan
    8. 8. Opera 10.6x
    9. 9. Opera 10.6x .webm <video> Web Workers AppCache Geolocation
    10. 10. Opera Mini 5.x
    11. 11. available for 3000 phones
    12. 12. Opera Mobile 10
    13. 13. Opera Mobile 10.1 beta
    14. 14. Opera Mobile 10.1 beta Vega Geolocation Carakan
    15. 15. http://www.opera.com/docs/specs/productspecs/
    16. 16. http://www.opera.com/docs/specs/presto26/
    17. 17. http://www.opera.com/docs/specs/presto26/
    18. 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. 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. 20. Various bug fixes alignment with SVG 1.1 2nd edition
    21. 21. http://www.codedread.com/svg-support.php
    22. 22. http://www.codedread.com/svg-support.php
    23. 23. SVG + ...
    24. 24. SVG + JS Demo: http://people.opera.com/danield/svg/inbox-attack.svg
    25. 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. 26. SVG + media queries
    27. 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. 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. 29. different layouts for all media queries kinds of browser sizes Demo: http://people.opera.com/andreasb/demos/demo_mediaqueries/
    30. 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. 31. SVG + geolocation Demo: http://people.opera.com/danield/svg/where-am-i.svg
    32. 32. SVG + video Demo: http://people.opera.com/andreasb/demos/demos_svgopen2010/video-filters/
    33. 33. SVG + widgets Demo: http://widgets.opera.com/widget/15321/1.1/
    34. 34. Thank you! @andreasbovens
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×