Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Unlocking the full potential of SVG

87 visualizaciones

Publicado el

Slides for the 2017 Web Camp presentation in Zagreb

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Unlocking the full potential of SVG

  1. 1. Unlocking the full potential of SVG WebCamp 2017
  2. 2. Magdalena Magličić
  3. 3. Why SVG? INTRO
  4. 4. SVG is ... , funpowerful and useful INTRO
  5. 5. INTRO If you don't know SVG you can't call yourself a web developer, call yourself a web enthusiast. - Dmitry Baranovskiy
  6. 6. INTRO SVG (1.1 spec)
  7. 7. INTRO SVG (1.1 spec) & mobile
  8. 8. INTRO SVG (1.1 spec) SVG filters (on SVG elements) & mobile & mobile
  9. 9. SVG (1.1 spec) SVG filters (on SVG elements) SVG filters (on HTML elements) Buggy behaviour INTRO & mobile & mobile
  10. 10. Filters for cool effects CHAPTER 1
  11. 11. <fe*>
 <feDropShadow> <feGaussianBlur> 
 ... and more FILTERS
  12. 12. Combined filters FILTERS
  13. 13. feGaussianBlur + feColorMatrix + feBlend Combined filters FILTERS
  14. 14. Color manipulation CHAPTER 2
  15. 15. <feColorMatrix> COLOR MANIPULATION .circle { filter: saturate(0.5); }
  16. 16. <filter id="saturate"> <feColorMatrix type="saturate" values="0.5"/> </filter> <feColorMatrix> COLOR MANIPULATION .circle { filter: saturate(0.5); }
  17. 17. <filter id="sepia"> <feColorMatrix type="matrix" values=" (0.393 + 0.607 * [1 - amount]) (0.769 - 0.769 * [1 - amount]) (0.189 - 0.189 * [1 - amount]) 0 0 (0.349 - 0.349 * [1 - amount]) (0.686 + 0.314 * [1 - amount]) (0.168 - 0.168 * [1 - amount]) 0 0 (0.272 - 0.272 * [1 - amount]) (0.534 - 0.534 * [1 - amount]) (0.131 + 0.869 * [1 - amount]) 0 0 0 0 0 1 0 "/> </filter> <feColorMatrix> COLOR MANIPULATION
  18. 18. http://kazzkiq.github.io/svg-color-filter/
  19. 19. Clipping & masking CHAPTER 3
  20. 20. http://kazzkiq.github.io/svg-color-filter/https://codepen.io/noeldelgado/pen/ByxQjL
  21. 21. CLIPPING AND MASKING <image width="100%" height="100%" xmlns:xlink= "person.svg" />
  22. 22. CLIPPING AND MASKING <image width="100%" height="100%" xmlns:xlink= "person.svg" /> <image width="100%" height="100%" xmlns:xlink= "skeleton.svg" />
  23. 23. CLIPPING AND MASKING <image width="100%" height="100%" xmlns:xlink= "person.svg" /> <image width="100%" height="100%" xmlns:xlink= "skeleton.svg" /> <defs> <clipPath id="clip"> </clipPath> </defs>
  24. 24. CLIPPING AND MASKING <image width="100%" height="100%" xmlns:xlink= "person.svg" /> <image width="100%" height="100%" xmlns:xlink= "skeleton.svg" /> <defs> <clipPath id="clip"> <circle id="clip-circle" cx="60%" cy="20%" r="10%" /> </clipPath> </defs>
  25. 25. CLIPPING AND MASKING <image width="100%" height="100%" xmlns:xlink= "person.svg" /> <image width="100%" height="100%" xmlns:xlink= "skeleton.svg" clip-path="url(#clip)"/> <defs> <clipPath id="clip"> <circle id="clip-circle" cx="60%" cy="20%" r="10%" /> </clipPath> </defs>
  26. 26. <image width="100%" height="100%" xmlns:xlink= "person.svg" /> <image width="100%" height="100%" xmlns:xlink= "skeleton.svg" mask="url(#clip)"/> <defs> <mask id="clip"> <circle id="clip-circle" cx="60%" cy="20%" r="10%" fill="gray"/> </mask> </defs> CLIPPING AND MASKING
  27. 27. Animation: there's more than one way CHAPTER 4
  28. 28. ANIMATION SVG CSS SMIL JS
  29. 29. ANIMATION [/ˈsmaɪl/]SMIL
  30. 30. ANIMATION SMIL
  31. 31. ANIMATION CSS animations #circle {
 stroke-dashoffset: 200;
 } <path id="circle" stroke-dashoffset="100" ... />
  32. 32. Greensock Snap.svg Data-driven documents ANIMATION JS libraries
  33. 33. https://codepen.io/chrisgannon/pen/bVwLdg ANIMATION Morphing
  34. 34. What does the future hold? LAST CHAPTER
  35. 35. SVG 2 THE FUTURE
  36. 36. Summary
 Learn the basics! Use SVG effects only on SVG elements Try JS libraries for animations Don’t be afraid to experiment!
  37. 37. Thank you for listening!
  38. 38. Any questions?
  39. 39. Unlocking the full potential of SVG

×