Resolution Independence

Slides for a presentation on resolution independence with SVG and webfonts, given at the Edinburgh Open Source Breakfast meeting on 7 June 2013.

1. resolution independence Justin Reynolds, 7 June 2013
2. about me Web designer, copywriter and blogger, self-employed but working mostly these days with a couple of Edinburgh agencies. analogue76.com j@analogue76.com @justinlucent Also LinkedIn, Google+
3. about this talk The web is a medium poorly suited to extensive use of bitmap images. We need to design for displays of varying size and resolution, and by their nature bitmap images don’t scale. So where possible we should use resolution independent vectors instead. Only where possible. This presentation will briefly discuss the nature of the bitmap issue before looking at the vector options available to us.
4. the problem with bitmaps
5. Display resolution refers to the total number of pixels available on a screen. A device pixel (or physical pixel) is the tiniest physical unit in a display. Pixel density refers to the number of pixels that fit into a fixed amount of space. It is most often given as pixels per inch (ppi) or dots per inch (dpi). A CSS pixel is an abstract unit used by browsers to precisely and consistently draw web content on devices with different display resolutions and pixel densities. On standard-density displays, one CSS pixel corresponds to one device pixel. But...
6. Source: ‘Retinafy your websites & apps’, Thomas Fuchs device pixels per inch iMac 27” 100 to 110 Original iPad 130 HTC Wildfire 160 ‘Retina’ iPad 264 ‘Retina’ iPhone 326 HTC One 468
8. one device pixel no longer equals one css pixel When a bitmap image is displayed at full size on a standard- density display, one bitmap pixel corresponds to one device pixel, resulting in a full-fidelity representation. But because a bitmap pixel can’t be further divided, it gets multiplied by four on Retina displays to preserve the same physical size of the image, losing detail along the way.
9. Source: ‘Towards a Retina Web’, Reda Lemeden, http://bit.ly/MH1bjq
10. Source: ‘Towards a Retina Web’, Reda Lemeden, http://bit.ly/MH1bjq
16. compressive images
20. SVG (SCALABLE VECTOR GRAPHICS)
21. “ Source: Mozilla Developer Network Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text. SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a W3C recommendation (ie a standard) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.
22. SVG can be a static image format suitable for illustrations, but it was designed from its inception to be interactive and dynamic: Declarative animation with Synchronised Multimedia Integration Language (SMIL) Scripted animation with JavaScript
24. svg syntax
25. <svg xmlns='http://www.w3.org/2000/svg'> <circle r='50' cx='50%' cy='50%' /> </svg>
27. <svg xmlns='http://www.w3.org/2000/svg'> <circle r='25%' cx='50%' cy='50%' fill='darkorange' /> </svg>
29. <svg xmlns='http://www.w3.org/2000/svg'> <circle r='25%' cx='50%' cy='50%' fill='none' stroke='#e60' stroke-width='25' /> </svg>
31. <svg xmlns='http://www.w3.org/2000/svg'> <circle r='25%' cx='30%' cy='30%' fill='lightgreen' stroke='#e60' stroke-width='25' /> <circle r='25%' cx='50%' cy='50%' fill='none' stroke='#e60' stroke-width='25' /> </svg>
33. <svg xmlns='http://www.w3.org/2000/svg'> <ellipse id='E' cx='90' cy='90' rx='30' ry='40' fill='#448'> <animate attributeName='rx' dur='5s' values='20;90;20' repeatCount='indefinite' /> <animate attributeName='ry' dur='5s' values='30;60;30' repeatCount='indefinite' /> </ellipse> </svg>
34. adding svg to html
35. <img src="logo.svg" width="200" height="300" alt="Title of website">
36. if (!Modernizr.svg) { $(".logo img").attr("src", "images/logo.png"); }
37. <h1><a href=/ class=logo>Title of website</a></ h1> .logo { display: block; text-indent: -9999px; width: 200px; height: 300px; background: url(logo.svg); background-size: 100px 82px; }
38. .no-svg .logo { background: url(logo.png); } or .logo { background: url(logo.png); background-image: url(logo.svg), none; }
39. <object type="image/svg+xml" data="logo.svg" class="logo"> <image src=”logo.png”> <!-- fallback --> </object>
40. <div class= 'svg-circle-wrapper' > <svg xmlns='http://www.w3.org/2000/svg'> <circle r='50' cx='50%' cy='50%' /> </svg> </div>
43. svg examples
54. svg libraries
55. SVG JavaScript libraries provide APIs simplifying the process of drawing and animating vector graphics, and offer greater cross- browser compatibility. Three of the most popular are: Raphael.js - comprehensive set of drawing/animation tools D3.js - generates vector graphics from data Highcharts.js - generates vector charts from data
59. svg tools
65. using webfonts as icons
68. @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; }
69. <h2 id="stats"> <span aria-hidden="true" data- icon="&#x21dd;"></span> Stats </h2> [data-icon]:before { font-family: icomoon; /* custom icon font */ content: attr(data-icon); speak: none; }
70. <a href="#rss" class="icon-alone"> <span aria-hidden="true" data- icon="&#x25a8;"></span> <span class="screen-reader-text">RSS</span> </a> .icon-alone { display: inline-block; } .screen-reader-text { position: absolute; top: -9999px; left: -9999px; }
78. resources
81. tutorials/articles ‘A Primer to Front-end SVG Hacking’, David Bushell, http://dbushell.com/2013/02/04/a-primer-to- front-end-svg-hacking/ ‘Adobe & HTML’, http://html.adobe.com/webplatform/ ‘Creating a world map with RaphaelJS’, Dasha Salo, http://dashasalo.com/2011/04/04/creating-a- world-map-with-raphaeljs-svg/ ‘HTML for Icon Font Usage’, Chris Coyier, http://css-tricks.com/html-for-icon-font-usage/ ‘Resolution Independence with SVG’, David Bushell, http://bit.ly/zLx90E ‘SVG Developer Center’, Adobe, http://adobe.ly/VRmD5c ‘The playground vector animation process’, Playground Inc, http://playgroundinc.com/blog/the- playground-vector-animation-process/ ‘Towards a Retina Web’, Reda Lemeden, http://bit.ly/MH1bjq ‘Using SVG’, Chris Coyier, http://bit.ly/XoFYz8
82. tutorials/articles - continued ‘Adobe Edge Animate proves HTML5 is no substitute for Flash’, Tom Arah, http:// www.pcpro.co.uk/realworld/380242/adobe-edge-animate-proves-html5-is-no-substitute-for-flash ‘Compressive images’, Justin Reynolds, http://www.analogue76.com/blog/entry/ compressive_images
83. TOOLS Adobe Edge Animate, http://html.adobe.com/edge/animate/ Adobe Illustrator, http://www.adobe.com/uk/products/illustrator D3.js, http://d3js.org/ Font Awesome, http://fortawesome.github.io/Font-Awesome/ IcoMoon, http://icomoon.io/ Inkscape, http://inkscape.org/ Peculiar Icons, http://lucianmarin.com/peculiar/ Pictos, http://pictos.cc/one/ Raphael JavaScript Library, http://raphaeljs.com/ SVG Edit, https://code.google.com/p/svg-edit/
84. books ‘Building Web Applications with SVG’, David Dailey, Jon Frost, Domenico Strazullo, http://oreil.ly/ vFSUOZ ‘Retinafy your web sites & apps’, Thomas Fuchs, http://retinafy.me/ ‘The Icon Handbook’, Jon Hicks, http://iconhandbook.co.uk/