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)
23. 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/
31. 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;}
}
...
32. 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;}
}
...
33. different layouts for all
media queries
kinds of browser sizes
Demo:
http://people.opera.com/andreasb/demos/demo_mediaqueries/
34. 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/