Slides for the 2017 Web Camp presentation in Zagreb

1. Unlocking the
full potential of SVG
WebCamp 2017

2. Magdalena Magličić

3. Why SVG?
INTRO

7. SVG is ... , funpowerful and useful
INTRO

8. INTRO
If you don't know SVG you can't call yourself a web developer,
call yourself a web enthusiast.
- Dmitry Baranovskiy

9. INTRO
SVG
(1.1 spec)

10. INTRO
SVG
(1.1 spec)
& mobile

11. INTRO
SVG
(1.1 spec)
SVG filters
(on SVG elements)
& mobile
& mobile

12. SVG
(1.1 spec)
SVG filters
(on SVG elements)
SVG filters
(on HTML elements)
Buggy behaviour
INTRO
& mobile
& mobile

13. Filters for cool effects
CHAPTER 1

14. <fe*>
<feDropShadow>
<feGaussianBlur>
... and more
FILTERS

15. Combined filters
FILTERS

16. feGaussianBlur + feColorMatrix + feBlend
Combined filters
FILTERS

18. Color manipulation
CHAPTER 2

20. <feColorMatrix>
COLOR MANIPULATION
.circle {
filter: saturate(0.5);
}

21. <filter id="saturate">
<feColorMatrix type="saturate" values="0.5"/>
</filter>
<feColorMatrix>
COLOR MANIPULATION
.circle {
filter: saturate(0.5);
}

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

23. http://kazzkiq.github.io/svg-color-filter/

24. Clipping & masking
CHAPTER 3

25. http://kazzkiq.github.io/svg-color-filter/https://codepen.io/noeldelgado/pen/ByxQjL

26. CLIPPING AND MASKING
<image width="100%" height="100%" xmlns:xlink= "person.svg" />

27. CLIPPING AND MASKING
<image width="100%" height="100%" xmlns:xlink= "person.svg" />
<image width="100%" height="100%" xmlns:xlink= "skeleton.svg" />

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

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

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

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

32. Animation:
there's more than one way
CHAPTER 4

33. ANIMATION
SVG
CSS SMIL
JS

34. ANIMATION
[/ˈsmaɪl/]SMIL

35. ANIMATION
SMIL

36. ANIMATION
CSS animations
#circle {
stroke-dashoffset: 200;
}
<path id="circle" stroke-dashoffset="100" ... />

37. Greensock Snap.svg Data-driven documents
ANIMATION
JS libraries

41. https://codepen.io/chrisgannon/pen/bVwLdg
ANIMATION
Morphing

42. What does the future hold?
LAST CHAPTER

43. SVG 2
THE FUTURE

44. Summary
Learn the basics!
Use SVG effects only on SVG elements
Try JS libraries for animations
Don’t be afraid to experiment!

45. Thank you for
listening!

46. Any questions?

47. Unlocking the
full potential of SVG