Presentazione per il CSSDay 2018, puoi votare qua: https://joind.in/talk/e84d1 Le Scalable Vector Graphics sono uno standard da moltissimi anni e permettono di ridurre il tempo di caricamento dei nostri siti web e di presentare delle immagini vettoriali completamente scalabili. Molto spesso però non si sa come sia possibile modificarle grazie ai CSS ed è per questo motivo che in questa presentazione di presenterò come farlo e addirittura come animare queste immagini.

1. Modifichiamo le SVG con i CSS
Ovvero come modificare le immagini nei nostri siti

2. Andrea Barghigiani
Chi sono?
https://skillsandmore.org

3. Non dimenticare di votarmi!
https://joind.in/event/cssday-2018

4. Attenzione a questo logo!

5. Scalable
Vector
Graphics
Il significato di SVG

6. Perché usare le SVG?

7. Perché usare le SVG?
Guarda il video

8. Ma è bene usarle anche perché:
• sono leggere (soprattutto con Gzip)
• possono essere modificate

9. Come creare una SVG?
Esistono molti altri editor, basta cercare ;)

10. Sapevi che le SVG sono simili all’HTML?

11. Prima di usarle è bene ottimizzarle!

12. Esistono diversi strumenti, il più semplice...
SVGOMG

13. Come si usano le SVG?

14. Possiamo iniziare con il classico <img>

15. Richiamando il vecchio <object>

16. Oppure utilizzare un <iframe>

17. C’è chi preferisce un <embed>

18. Mentre altri si affidano ai CSS

19. Purtroppo nessuno di questi
permette di modificare queste
immagini con i CSS!

20. L’unico modo che ci permette di
applicare modifiche con i CSS

21. La cascata dei
CSS funziona
anche con le SVG
Ma in modo diverso

22. Esaminiamo una semplice immagine

23. Ecco il suo codice SVG

24. Sovrascrivi lo stile con i CSS inline

25. Sovrascrivi lo stile con i CSS inline

26. <style> all’interno del SVG

27. Usiamo i fogli di stile esterni
index.html
style.css

28. Quali sono le proprietà che possiamo personalizzare?

29. Purtroppo non possiamo
modificare le tracce create in
SVG, per quello serve
JavaScript

30. Ma possiamo animare tutte le
altre proprietà con del semplice
CSS!

31. Per esempio, possiamo disegnare sulla pagina
Guarda il video

32. Il codice CSS
per disegnare
l’immagine

33. Possiamo animare i singoli elementi SVG
Guarda il video

34. Il codice CSS
per animare
singoli elementi

35. Questo effetto ci ha mostrato
una differenza tra le
trasformazioni CSS e SVG

36. La transform-origin si comporta diversamente
CSS (50%, 50%) SVG (0, 0)

37. La transform-origin si comporta diversamente

38. Quando animiamo le SVG
ricordiamoci che la transform-
origin si allinea al contenitore e
non al singolo elemento

39. La transform-origin si comporta diversamente
Guarda il video

40. Il codice CSS per
creare delle ombre
per gli elementi di
una SVG

41. Attenzione alle dimensioni
della stessa SVG perché gli
effetti non si applicano fuori di
essa.

42. L’ombra non esce dall’area della SVG

43. L’unico limite è la tua
immaginazione!

44. Puoi fornire suggerimenti
Guarda il video

45. Animare un logo
Guarda il video

46. Creare un semplice spinner
Guarda il video

47. E se vuoi fare di più puoi iniziare a usare
le librerie JavaScript dedicate
• Snap.svg
• SVG.js
• vivus.js
• Anime.js
• GreenSock

48. Piaciuta la presentazione?
Votami ;)
https://joind.in/event/cssday-2018

49. Grazie!
https://skillsandmore.org