• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SVG in the Opera browser
 

SVG in the Opera browser

on

  • 4,545 views

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)

Statistics

Views

Total Views
4,545
Views on SlideShare
4,523
Embed Views
22

Actions

Likes
2
Downloads
38
Comments
0

2 Embeds 22

http://lanyrd.com 21
http://blog.gaborit-d.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

SVG in the Opera browser SVG in the Opera browser Presentation Transcript

  • SVG Open 2010 SVG in the Opera browser dreas An ens r Relations Bopveader Develope u L Gro e Phon
  • 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
  • @andreasbovens
  • Opera 10.10
  • Opera 10.10 Opera Unite
  • Opera 10.5x
  • Opera 10.5x Standalone widgets .ogg <video> Vega Offline Storage Carakan
  • 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 Demo: http://people.opera.com/andreasb/demos/demos_svgopen2010/performance/
  • 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/
  • 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-dock/ http://people.opera.com/andreasb/demos/demos_svgopen2010/transitions-map/
  • SVG + media queries
  • 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;} } ...
  • 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;} } ...
  • different layouts for all media queries kinds of browser sizes Demo: http://people.opera.com/andreasb/demos/demo_mediaqueries/
  • 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/
  • 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