Vai al contenuto

Svg

Scalable Vector Graphics

Si tratta di un linguaggio di script per la descrizione di scene grafiche 2D

  • il file è puro testo, secondo lo standard XML
  • tutti i browser aggiornati aprono il file SVG senza necessità di plug-in
  • alcuni software grafici usano SVG nativamente (Inkscape) e molti lo prevedono come importazione/esportazione
  • le immagini possono essere rese interattive tramite codice JavaScript

Storia

  • …, VML, PGML
  • 2001-09, SVG 1.0
  • 2003-01, SVG 1.1
  • 2008-12, SVG Tiny 1.2
  • …, SVG 1.1 (Second Edition)

I materiali in questa pagina sono stati scritti 20 anni fa, sono da revisionare.

Studia la sintassi SVG direttamente con gli esempi

  1. Inclusione dei file
  2. Struttura dei file
  3. Immersione nel codice HTML
  4. Stili – fogli di stile: RIEPILOGO
  5. Forme elementari: line, rect
  6. Forme elementari: circle, ellipse
  7. Forme elementari: polyline, polygon
  8. Forme elementari: RIEPILOGO
  9. Testi: Testi 1
  10. Testi: Testi 2
  11. Testi: Testi 3
  12. Testi: Testi 4
  13. Immagini
  14. Raggruppamenti: <g>
  15. Trasformazioni: translate, scale
  16. Trasformazioni: rotate
  17. Trasformazioni: skew
  18. Path: linee
  19. Path: Bezier cubica
  20. Path: Bezier quadratica
  21. Path: archi
  22. Path: RIEPILOGO
  23. Definizioni: defs
  24. Definizioni: use
  25. Definizioni: …
  26. Testi e percorsi: tref
  27. Testi e percorsi: tpath
  28. Gradienti: linear
  29. Gradienti: radial
  30. Pattern
  31. Collegamenti

SVG + Javascript

  1. Attributi: #1
  2. Attributi: #2
  3. Attributi: #3
  4. Attributi: #4
  5. Attributi: #5
  6. Elementi: #1
  7. Elementi: #2
  8. Elementi: #3
  9. Elementi: #4
  10. Elementi: #5
  11. Eventi: RIEPILOGO

SVG + SMIL

  • …

SVG Examples

Tratti da Croczilla.com > SVG Examples (non è più online…)

  1. Circles: #1
  2. Circles: #2
  3. Ellipse: #1
  4. Events: #1
  5. Events: #2
  6. Gradients: #1
  7. Gradients: #2
  8. Line: #1
  9. Paths: #1
  10. Paths: #2
  11. Polygons: #1
  12. Polygons: #2
  13. Polygons: #2
  14. Rectangles: #1
  15. Rectangles: #2
  16. Style: #1
  17. …

Risorse essenziali

In italiano

In inglese