HTML and CSS Reference
In-Depth Information
Il tag
svg
rappresenta quindi la figura ed è sottoposto alle regole di layout come qualsiasi
altro elemento presente nella pagina. Può essere disposto come blocco, allineato, influenza-
to dagli altri elementi e, facoltativamente, possiamo ometterne le dimensioni.
Nell'esempio
zona da visualizzare. I due rettangoli occupano un'area di 100x100 pixel e questo permette
alla figura di non essere influenzata nelle sue misure dall'esterno. Impostando una dimen-
sione con gli attributi
width
o
height
, otterremo un'immagine che, forzatamente, viene
scalata proporzionalmente per riempire l'area.
Nell'esempio 10.2
,
omettendo le dimensio-
ni, otteniamo una figura che va a riempire tutto lo spazio allocato dopo il titolo, cioè l'intera
pagina, come è visibile nella
figura 10.1
.
Figura 10.1
- Due rettangoli SVG all'interno di una pagina HTML.
Da notare, inoltre, che l'ordine della definizione degli elementi determina lo
z-index
de-
gli stessi: nella
figura 10.1
possiamo notare che il secondo rettangolo si pone davanti al
primo.
Per incorporare un file .svg esterno, come facciamo con immagini in formato JPEG e
PNG, possiamo utilizzare il tag
object
, specificando per l'attributo
type
il valore
ima-
ge/svg+xml
, come
nell'esempio 10.3
.
Esempio 10.3
<body>
<h1>SVG</h1>
<object data="1.svg" type="image/svg+xml">
SVG non supportato
</object>
</body>
