SVG in HTML | Tutorial con esempi

HTML5 fornisce la tecnologia SVG (Acronimo della grafica vettoriale scalabile) per disegnare una grafica bidimensionale basata su vettori sui siti Web. A differenza di altri formati di immagini (come PNG, JPG, ecc.) Svg non si basa sui pixel invece utilizza i dati vettoriali.

World Wide Web Consortium (W3C) consiglia la tecnologia SVG di disegnare grafica su un sito Web. In html Il tag viene utilizzato come contenitore per la grafica SVG e usando SVG possiamo disegnare percorsi, cerchi, rettangoli, ecc. Questo articolo ti guiderà su come lavorare con le immagini SVG e presenterà una panoramica dettagliata nei seguenti aspetti:

• Nozioni di base di SVG
• Come disegnare la linea SVG in HTML
• Come disegnare il cerchio SVG in HTML
• Come disegnare rettangolo SVG in HTML
• Come disegnare il rettangolo arrotondato SVG in HTML
• Come disegnare poligono SVG in HTML
• Come disegnare svg eclipse html

Quindi iniziamo!

Nozioni di base di SVG

Grafica vettoriale scalabile determinare i formati grafici/immagini vettoriali basati su XML per le tecnologie web. I file SVG possono essere animati e possiamo integrarli con altri standard W3C come DOM e XSL. Svg fornisce immagini di alta qualità i.e. Se qualcuno ingrandisce in un'immagine SVG, la qualità dell'immagine non sarebbe interessata.

Come disegnare la linea SVG in HTML

Il tag HTML può essere utilizzato all'interno tag per disegnare una riga. L'esempio di seguito ti permetterà di capire come disegnare una linea SVG in HTML.

Esempio

Il seguente pezzo di codice disegna una riga semplice:

Linea SVG non supportata!

Qui nello snippet sopra, X1, Y1 sono i punti di partenza della linea e X2, Y2 sono i punti finali della linea. Mentre specifichiamo il colore della linea nell'attributo di stile:

L'uscita verifica che una linea di colore blu sia disegnata in base alle posizioni impostate dai suoi attributi.

Come disegnare il cerchio SVG in HTML

Il tag HTML può essere utilizzato all'interno tag per disegnare un cerchio.

Esempio
Lo snippet di seguito ti consentirà di guidare per creare un cerchio SVG:

Cerchio SVG non supportato!

Abbiamo specificato il valore dell'asse x e dell'asse Y come 40 e 50 rispettivamente insieme al raggio di 30 pixel. Il seguito sarà l'output:

L'uscita verifica che il cerchio sia disegnato in colore blu e riempito di colore grigio.

Come disegnare rettangolo SVG in HTML

Il tag può essere utilizzato all'interno del tag per disegnare un rettangolo.

Esempio

Il seguente frammento di codice imposta la larghezza, l'altezza del rettangolo SVG rispettivamente 250, 100 e il rettangolo verrà riempito con il colore grigio.

Abbiamo specificato il colore della corsa e la larghezza della corsa come blu e 5 rispettivamente. Il seguito sarà l'output:

Come disegnare il rettangolo arrotondato SVG in HTML

Dobbiamo specificare gli attributi RX, RY in TAG per disegnare angoli arrotondati SVG RecTangle.

Esempio

Estendiamo un po 'l'esempio precedente e impostiamo il valore di Rx, RY come 10px per disegnare gli angoli arrotondati del rettangolo SVG:

Lo snippet di codice sopra visualizza il seguente output:

Come disegnare poligono SVG in HTML

HTML fornisce un tag per disegnare una forma che ha almeno 3 lati. Un attributo chiamato "punti" può essere utilizzato per specificare l'asse x e l'asse Y di tutti i lati.

Esempio

Consideriamo il seguente frammento di codice per capire come impostare l'asse X e l'asse y di una forma:

Il tag può essere usato per disegnare forme diverse come una stella SVG o qualsiasi altra forma chiusa.

Come disegnare svg eclipse html

Il tag viene utilizzato per disegnare una forma di eclissi, è molto simile al cerchio. Il cerchio SVG ha un raggio orizzontale e verticale uguale ma nell'eclissi, il raggio orizzontale e verticale è diverso l'uno dall'altro.

Esempio

Lo snippet di seguito è riportato come disegnare un'eclissi in HTML dove rx = "150" è il raggio orizzontale e ry = "75" è il raggio verticale dell'eclissi:

Lo snippet di codice sopra mostra il seguente risultato:

Il bordo/ictus di colore blu e la forma dell'eclissi piena di grigi hanno verificato che il tag funzionava correttamente.

Conclusione

Questo articolo ha dimostrato come disegnare immagini SVG di base in HTML. All'interno dei tag vari tag possono essere utilizzati per disegnare diverse immagini SVG come ,,,, e tag possono essere utilizzati per disegnare rispettivamente le linee SVG, i cerchi, i rettangoli, i poligoni e la forma dell'eclissi. All'interno di questi tag, attributi diversi come la corsa e la larghezza della corsa possono essere utilizzati per impostare rispettivamente il bordo e la larghezza della forma.