ELEMENTI GRAFICI IN SVG
In SVG tutto è un elemento grafico; e un elemento grafico può essere una generica shape, un testo o un riferimento ad un altro elemento grafico.
Graphics Elements = {Shapes , text , Graphics Referencing Elements}
 |
Shapes = Basic Shapes + path |
|
Basic Shapes |
|
rect (rettangolo, anche con angoli arrotondati) |
|
circle |
|
ellipse |
|
line |
|
polyline |
|
polygon |
|
path |
|
text |
|
Graphics Referencing Elements |
|
image |
|
use |
Tabella riepilogo comandi SVG per disegno elementi grafici
| Elemento | Attributi di Base | Descrizione |
| Svg |
x, y, width4, height, allowZoomAndPan risultano attivi).
|
Questo è l'elemento più esterno che contiene tutti gli altri elementi grafici e definisce un'immagine SVG. La posizione (x,y) risulta utile quando l'immagine è visualizzata all'interno di una pagine WEB. width e height rappresentano larghezza ed altezza, mentre il flag allowZoomAndPan consente all'utente di zoomare e ricentrare l'immagine (ossia: i rispettivi comandi del browser/plug-in
|
|
Rect
|
x, y, width, height |
Rettangolo di base width ed altezza height. E' possibile inoltre realizzare rettangoli con "spigoli arrotondati", specificando ulteriormente rx, ry, ovvero i raggi dell'ellisse usata per arrotondare gli angoli.
|
|
Circle |
cx, cy, r |
Circonferenza di centro (cx,cy) e raggio r. |
|
Ellipse |
cx, cy, rx, ry |
Ellisse di centro (cx,cy) e raggi rx, ry. |
|
Line |
x1, y1, x2, y2 |
Linea retta descritta dai due estremi (punti iniziale e finale). |
|
Polyline
|
Lista di punti |
Lista di "coppie di coordinate (x,y) " Insieme di punti costituenti la curva, separati da una virgola, o da uno spazio. Esempio: "20,20 50,100 200,80 70,300"
|
|
Polygon |
Lista di Punti Un polygon è una polyline, che viene automaticamente chiusa. |
Lista di "coppie di coordinate (x,y) "Insieme di punti costituenti il poligono, separati da una virgola, o da uno spazio.
|
|
Text
|
String, x, y |
Si riferisce specificamente ad una stringa che deve essere visualizzata, a differenza di quanto accade per gli elementi desc e title che hanno uno speciale significato e possono o meno essere visualizzati.
|
|
Image
|
x, y, width, height,xlink:href |
Questo elemento consente di inserire un'immagine PNG o JPEG (ma non una GIF) all'interno di un'immagine SVG.
|