Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Modifichiamo le SVG con i CSS
Ovvero come modificare le immagini nei nostri siti
Andrea Barghigiani
Chi sono?
https://skillsandmore.org
Non dimenticare di votarmi!
https://joind.in/event/cssday-2018
Attenzione a questo logo!
Scalable
Vector
Graphics
Il significato di SVG
Perché usare le SVG?
Perché usare le SVG?
Guarda il video
Ma è bene usarle anche perché:
• sono leggere (soprattutto con Gzip)
• possono essere modificate
Come creare una SVG?
Esistono molti altri editor, basta cercare ;)
Sapevi che le SVG sono simili all’HTML?
Prima di usarle è bene ottimizzarle!
Esistono diversi strumenti, il più semplice...
SVGOMG
Come si usano le SVG?
Possiamo iniziare con il classico <img>
Richiamando il vecchio <object>
Oppure utilizzare un <iframe>
C’è chi preferisce un <embed>
Mentre altri si affidano ai CSS
Purtroppo nessuno di questi
permette di modificare queste
immagini con i CSS!
L’unico modo che ci permette di
applicare modifiche con i CSS
La cascata dei
CSS funziona
anche con le SVG
Ma in modo diverso
Esaminiamo una semplice immagine
Ecco il suo codice SVG
Sovrascrivi lo stile con i CSS inline
Sovrascrivi lo stile con i CSS inline
<style> all’interno del SVG
Usiamo i fogli di stile esterni
index.html
style.css
Quali sono le proprietà che possiamo personalizzare?
Purtroppo non possiamo
modificare le tracce create in
SVG, per quello serve
JavaScript
Ma possiamo animare tutte le
altre proprietà con del semplice
CSS!
Per esempio, possiamo disegnare sulla pagina
Guarda il video
Il codice CSS
per disegnare
l’immagine
Possiamo animare i singoli elementi SVG
Guarda il video
Il codice CSS
per animare
singoli elementi
Questo effetto ci ha mostrato
una differenza tra le
trasformazioni CSS e SVG
La transform-origin si comporta diversamente
CSS (50%, 50%) SVG (0, 0)
La transform-origin si comporta diversamente
Quando animiamo le SVG
ricordiamoci che la transform-
origin si allinea al contenitore e
non al singolo elemento
La transform-origin si comporta diversamente
Guarda il video
Il codice CSS per
creare delle ombre
per gli elementi di
una SVG
Attenzione alle dimensioni
della stessa SVG perché gli
effetti non si applicano fuori di
essa.
L’ombra non esce dall’area della SVG
L’unico limite è la tua
immaginazione!
Puoi fornire suggerimenti
Guarda il video
Animare un logo
Guarda il video
Creare un semplice spinner
Guarda il video
E se vuoi fare di più puoi iniziare a usare
le librerie JavaScript dedicate
• Snap.svg
• SVG.js
• vivus.js
• Anime.js
• Gr...
Piaciuta la presentazione?
Votami ;)
https://joind.in/event/cssday-2018
Grazie!
https://skillsandmore.org
Upcoming SlideShare
Loading in …5
×

Modifichiamo le SVG con i CSS

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.

  • Be the first to comment

Modifichiamo le SVG con i CSS

  1. 1. Modifichiamo le SVG con i CSS Ovvero come modificare le immagini nei nostri siti
  2. 2. Andrea Barghigiani Chi sono? https://skillsandmore.org
  3. 3. Non dimenticare di votarmi! https://joind.in/event/cssday-2018
  4. 4. Attenzione a questo logo!
  5. 5. Scalable Vector Graphics Il significato di SVG
  6. 6. Perché usare le SVG?
  7. 7. Perché usare le SVG? Guarda il video
  8. 8. Ma è bene usarle anche perché: • sono leggere (soprattutto con Gzip) • possono essere modificate
  9. 9. Come creare una SVG? Esistono molti altri editor, basta cercare ;)
  10. 10. Sapevi che le SVG sono simili all’HTML?
  11. 11. Prima di usarle è bene ottimizzarle!
  12. 12. Esistono diversi strumenti, il più semplice... SVGOMG
  13. 13. Come si usano le SVG?
  14. 14. Possiamo iniziare con il classico <img>
  15. 15. Richiamando il vecchio <object>
  16. 16. Oppure utilizzare un <iframe>
  17. 17. C’è chi preferisce un <embed>
  18. 18. Mentre altri si affidano ai CSS
  19. 19. Purtroppo nessuno di questi permette di modificare queste immagini con i CSS!
  20. 20. L’unico modo che ci permette di applicare modifiche con i CSS
  21. 21. La cascata dei CSS funziona anche con le SVG Ma in modo diverso
  22. 22. Esaminiamo una semplice immagine
  23. 23. Ecco il suo codice SVG
  24. 24. Sovrascrivi lo stile con i CSS inline
  25. 25. Sovrascrivi lo stile con i CSS inline
  26. 26. <style> all’interno del SVG
  27. 27. Usiamo i fogli di stile esterni index.html style.css
  28. 28. Quali sono le proprietà che possiamo personalizzare?
  29. 29. Purtroppo non possiamo modificare le tracce create in SVG, per quello serve JavaScript
  30. 30. Ma possiamo animare tutte le altre proprietà con del semplice CSS!
  31. 31. Per esempio, possiamo disegnare sulla pagina Guarda il video
  32. 32. Il codice CSS per disegnare l’immagine
  33. 33. Possiamo animare i singoli elementi SVG Guarda il video
  34. 34. Il codice CSS per animare singoli elementi
  35. 35. Questo effetto ci ha mostrato una differenza tra le trasformazioni CSS e SVG
  36. 36. La transform-origin si comporta diversamente CSS (50%, 50%) SVG (0, 0)
  37. 37. La transform-origin si comporta diversamente
  38. 38. Quando animiamo le SVG ricordiamoci che la transform- origin si allinea al contenitore e non al singolo elemento
  39. 39. La transform-origin si comporta diversamente Guarda il video
  40. 40. Il codice CSS per creare delle ombre per gli elementi di una SVG
  41. 41. Attenzione alle dimensioni della stessa SVG perché gli effetti non si applicano fuori di essa.
  42. 42. L’ombra non esce dall’area della SVG
  43. 43. L’unico limite è la tua immaginazione!
  44. 44. Puoi fornire suggerimenti Guarda il video
  45. 45. Animare un logo Guarda il video
  46. 46. Creare un semplice spinner Guarda il video
  47. 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. 48. Piaciuta la presentazione? Votami ;) https://joind.in/event/cssday-2018
  49. 49. Grazie! https://skillsandmore.org

×