O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Use SVG to Bring the Web to Life (Quinton Jason Jr)

2.821 visualizações

Publicada em

Session slides from the Future Insights Live, Vegas 2015 event: https://futureinsightslive.com/las-vegas-2015/

SVG is more than just an image format. It’s a solution that solves many problems with today’s rapidly growing web, especially in responsive design. SVG also contains many features to enhance the user's experience: accessibility, resolution independence, and interactivity. We'll see why we should use SVG, how to style SVG using CSS, how to animate SVG to bring the web to life, and much more.

Publicada em: Internet, Software, Engenharia
  • Login to see the comments

Use SVG to Bring the Web to Life (Quinton Jason Jr)

  1. 1. USE SVG TO BRING THE WEB TO LIFE Quinton Jason Jr @quintonjasonjr thinkx.net/svg
  2. 2. WHY SVG?
  3. 3. Resolution Independence Small File Size Accessibility Interactivity Filters and Blend Modes
  4. 4. 123 KB fishadelic.jpg
  5. 5. 34 KB
  6. 6. GZIP COMPRESSION
  7. 7. 6.8 KB
  8. 8. STYLING SVG
  9. 9. PRESENTATION ATTRIBUTES
  10. 10. INLINE CSS
  11. 11. EXTERNAL CSS
  12. 12. EMBEDDING SVG
  13. 13. <IMG>
  14. 14. SVG AS CSS BACKGROUND
  15. 15. <OBJECT> <IFRAME> <EMBED>
  16. 16. WHICH DO I USE?
  17. 17. FALLBACKS https://css-tricks.com/a-complete-guide-to-svg-fallbacks/
  18. 18. RESPONSIVE SVG
  19. 19. CSS
  20. 20. <IMG> <OBJECT>
  21. 21. <IFRAME>
  22. 22. <SVG>
  23. 23. ADAPTIVE SVG Different images at different breakpoint points
  24. 24. CSS TRANSFORMS (GOOD)
  25. 25. CSS TRANSFORMS (GOOD)
  26. 26. CSS TRANSFORMS (BAD)
  27. 27. IE and Opera don't support CSS Transforms Firefox doesn't support % based transform-origin Safari zooming breaks % or px based origins CSS TRANSFORMS (BAD)
  28. 28. <TEXTPATH>
  29. 29. Some random text Some random TEXT ALONG A PATH
  30. 30. Fr ANIMATE TEXT ALONG A PATH
  31. 31. Some random text Some random
  32. 32. 2005 Batman Begins Movie SMIL PATH MORPHING http://tavmjong.free.fr/blog/?p=741
  33. 33. TRIGGERED MORPHING http://codepen.io/chriscoyier/pen/DpFfE/
  34. 34. http://alexk111.github.io/SVG-Morpheus/
  35. 35. TEXT EFFECTS
  36. 36. Can Contain All Type of SVG shapes and images Simple or Complex Resized without losing shape PATTERNS
  37. 37. TEXT FILLS XXDDEESSIIGGNN
  38. 38. TEXT STROKE CREEPYCREEPYCREEPYCREEPYCREEPY
  39. 39. FORM ELEMENTS
  40. 40. SVG AS SUBMIT BUTTON http://tympanus.net/Tutorials/CircularProgressButton/
  41. 41. FILTER EFFECTS
  42. 42. MOTION BLUR http://codepen.io/lbebber/pen/zxpMZw
  43. 43. GLITCH EFFECT http://codepen.io/lbebber/pen/qEjRYd/
  44. 44. GOOEY EFFECT 4 3 2 1 http://codepen.io/lbebber/pen/OPjxZL/
  45. 45. Use Inline SVG Provide a <title> Provide a <desc>ription Use <text> Give it an ARIA role ACCESSIBILITY http://www.sitepoint.com/tips-accessible-svg/
  46. 46. BE EXPRESSIVE
  47. 47. RESOURCES
  48. 48. https://github.com/willianjusten/awesome-svg
  49. 49. http://tympanus.net/codrops/?s=svg&search-type=posts

×