Guida SVG

Imparare ad utilizzare lo standard SVG. costruire di immagini, barre di navigazione, animazioni e gli elementi grafici tipici di una pagina Web

1. 1. Introduzione a SVG

   I vantaggi di SVG. Come visualizzare i file SVG sul proprio browser

2. 2. Un file SVG

   Anatomia di un basilare file SVG: la dichiarazione del documento e i...

3. 3. Disegnare l'area di lavoro

   Viewport e ViewBox: come specificare l'area di visualizzazione della...

4. 4. Le figure geometriche principali

   Come disegnare le Basic Shapes: linea, cerchio, rettangolo, poligoni

5. 5. Le figure geometriche irregolari

   Il Path: disegnare figure geometriche irregolari

6. 6. Inserire il testo: l'elemento Text

   Come inserire del testo all'interno delle immagini SVG

7. 7. Aggiungere lo stile - I

   Utilizzare l'attributo style in SVG: fill, opacity, stroke

8. 8. Aggiungere lo stile - II

   Come utilizzare i fogli di stile in un documento SVG

9. 9. Raggruppare e trasformare le immagini

   Come raggruppare le immagini e modificarne la posizione

10. 10. Link

    Come inserire collegamenti all'interno di una immagine SVG

11. 11. Template

    Come creare modelli unici riutilizzabili in più file SVG

12. 12. Immagini PNG e JPEG

    Come inserire immagini PNG o JPEG all'interno di file SVG

13. 13. Gradients & Patterns

    Creare sfumature e ripetizioni infinite di elementi grafici

14. 14. Clipping & Masking

    Ritagliare zone di immagini e visualizzare effetti di trasparenza

15. 15. Filtri & Effetti Grafici

    Effetti sofisticati in SVG: ombreggiatura, effetti tridimensionali

16. 16. Scripting

    L'interattività all'interno di file SVG

17. 17. Gestione degli eventi

    Far reagire le immagini SVG alle azioni dell'utente

18. 18. Animazioni

    Animare un'immagine e lasciarla controllare dall'utente

19. 19. SVG e SMIL: parte prima

    Animare le immagini SVG attraverso il linguaggio SMIL: Teoria

20. 20. SVG e SMIL: parte seconda

    Animare le immagini SVG attraverso il linguaggio SMIL: Pratica

21. 21. Tutorial: un banner

    Realizziamo un banner per il nostro sito con SVG

22. 22. Tutorial: un menu dinamico

    Realizziamo un menu interattivo e dinamico con SVG