Iniziare ad usare SVG
Questa esercitazione ti aiuterà ad iniziare ad usare SVG.
Questa esercitazione ti aiuterà ad iniziare ad usare SVG.
Scalable Vector Graphics (SVG) è un linguaggio XML di markup per la descrizione di grafica vettoriale a due dimensioni. Essenzialmente SVG sta alla grafica come XHTML sta al testo.
SVG è simile negli scopi alla tecnologia proprietaria Macromedia Flash di Adobe, ma quello che distingue SVG da Flash l'essere una raccomandazione W3C (vale a dire, uno standard a tutti gli effetti) e che è basato su XML anzichè essere un formato binario proprietario. E' esplicitamente progettato per lavorare con altri standard W3C quali CSS, DOM e SMIL.
Documentazion
- Riferimento degli elementi SVG
- Ottieni i dettagli di ogni elemento SVG.
- Riferimento degli attributi SVG
- Ottieni i dettagli di ogni attributo SVG.
- Riferimento alle API nel DOM di SVG
- Ottieni i dettagli sull'intra API nel DOM di SVG.
- Migliora il contenuto HTML
- SVG opera insieme ad HTML, CSS e JavaScript. Utilizza SVG per una comune pagna HTML o un'apllicazione web.
- SVG in Mozilla
- Note e informazioni su come SVG è implementato in Mozilla.
Comunità
- Vedi i forum di Mozilla...
Strumenti
- Suite di prova per SVG
- SVG Validator (Cessato)
- Ulteriori Strumenti...
- Altre risorse: XML, CSS, DOM, Canvas
Esempi
- Google Maps (sovrapposizione del percorso) & Docs (grafici dei fogli di calcolo)
- SVG menu a bolle
- Linee guida SVG per autori
- Una panoramica del Progetto SVG di Mozilla
- Domande e risposte frequenti su SVG e Mozilla
- Diapositive e dimostrazioni da SVG Open 2009 su SVG e Mozilla
- SVG come immagine
- Anmazione SVG con SMIL
- Lion, Butterfly & Tiger
- Galleria d'arte SVG
- Ulteriori esempi (Esempi SVG croczilla.com, carto.net)
Animazione e interazione
Come HTML, SVG ha un modello di documento a oggetti (DOM) ed events accessibili via JavaScript. Ciò permette agli sviluppatori di creare ricche immagini animate ed interattive.
- Alcuni realmente gustosi SVG da svg-wow.org
- Estensione di Firefox (Grafox) per aggiungere un sottoinsieme del supporto per animazioni di SMIL
- Manipolazione interattiva di foto
- Trasformazioni HTML utilizzando
foreignObject
di SVG - Arte animata
Mappe, grafici, giochi ed sperimentazioni 3D
Se un piccolo SVG può fare tanta strada per migliorare il contenuto del web, ecco qualche esempio di uso intensivo di SVG.
- Un Tetris SVG & Connect 4
- Gioco Find the State
- Mappa della popolazione degli US
- Scatola 3D e Scatole 3D
- jVectorMap (mappe interattive per la visualizzazione dati)