SVG Inline SVG


Esempio

Inline SVG consente al markup SVG, scritto in HTML, di generare grafica nel browser.

Quando si utilizza SVG in linea, un DOCTYPE non è strettamente richiesto. Invece, solo i <svg> apertura e chiusura insieme a un viewBox oa attributi di larghezza e altezza saranno sufficienti:

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>

Il frammento <svg> sopra agisce sia come contenitore sia come elemento strutturale. Questo frammento stabilisce il proprio sistema di coordinate.

Di seguito è riportato un esempio di rendering di un frammento SVG con alcuni contenuti. Produrrà un rettangolo con "Hello World!" testo al suo interno.

<svg width="50%" viewBox="0 0 10 10">
    <rect x="1" y="1" width="5" height="3" fill="teal" />
    <text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>

Risultato:

Semplice esempio di output SVG