Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Resolution Independence

Ae1387e14465db7185f4d0aa474f9415?s=47 Analogue76
June 07, 2013

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.

Ae1387e14465db7185f4d0aa474f9415?s=128

Analogue76

June 07, 2013
Tweet

More Decks by Analogue76

Other Decks in Design

Transcript

  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
  7. None
  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

  11. None
  12. None
  13. None
  14. None
  15. None
  16. compressive images

  17. None
  18. None
  19. None
  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
  23. None
  24. svg syntax

  25. <svg xmlns='http://www.w3.org/2000/svg'> <circle r='50' cx='50%' cy='50%' /> </svg>

  26. None
  27. <svg xmlns='http://www.w3.org/2000/svg'> <circle r='25%' cx='50%' cy='50%' fill='darkorange' /> </svg>

  28. None
  29. <svg xmlns='http://www.w3.org/2000/svg'> <circle r='25%' cx='50%' cy='50%' fill='none' stroke='#e60' stroke-width='25' />

    </svg>
  30. None
  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>
  32. None
  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>
  41. None
  42. None
  43. svg examples

  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  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
  56. None
  57. None
  58. None
  59. svg tools

  60. None
  61. None
  62. None
  63. None
  64. None
  65. using webfonts as icons

  66. None
  67. None
  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; }
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. resources

  79. None
  80. None
  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/