Manuale di SVG

Elemento SVG

Visualizzazione di SVG nel Web

La visualizzazione di SVG nei browser Web (ad esempio Chrome, Firefox e Internet Explorer) può essere completata indirizzando il browser all'URL del file SVG, incorporando SVG in una pagina HTML, utilizzando l'elemento iframe, l'elemento img e altri metodi.

La visualizzazione di SVG nei browser Web (ad esempio Chrome, Firefox e Internet Explorer) può essere completata nei seguenti modi:

Il browser indica l'URL del file SVG.
Incorpora SVG in una pagina HTML

Puoi inserire un'immagine SVG in un file HTML utilizzando uno dei seguenti metodi:

Usare l'elemento iframe
Usare l'elemento img
Usare l'immagine SVG come immagine di sfondo.
Usare l'elemento svg
Usare l'elemento embed

cornice iframe

Se inserisci l'URL dell'immagine SVG, poiché il browser può visualizzare le immagini SVG, puoi anche usarlo per includere immagini SVG all'interno di iframe in una pagina HTML. Ecco un esempio:

<iframe src="mySvgImage.svg" width="200" height="200">

img

img è come usare qualsiasi altro tipo di immagine, è lo stesso per l'immagine SVG嵌入。Puoi scrivere l'URL dell'immagine SVG nell'attributo src dell'elemento img, come segue:

<img　src="/svg/circle-element-1.jsp">

Le immagini SVG vengono visualizzate nella pagina HTML come qualsiasi altra immagine.

SVG come immagine di sfondo

Poiché i browser trattano le immagini SVG come immagini bitmap, puoi utilizzare le immagini SVG come immagini di sfondo tramite CSS. Ecco un esempio:

div　{
　　　　background-image:　url('my-svg-image.svg');
　　　　background-size　:　100px　100px;
{}

Potrebbe essere necessario impostare la dimensione dell'immagine di sfondo per SVG per informare il browser su come scalare essa. Puoi farlo nel mioTutorial sulle immagini di sfondo CSSper ulteriori informazioni sulle immagini di sfondo.

Elemento svg all'interno dell'HTML

Incorporare immagini SVG utilizzando l'elemento SVG può essere fatto direttamente nella pagina HTML, come mostrato di seguito:

<div><svg>
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:#006600;　fill:#00cc00"/>
　　　　</svg></div>

Questo elemento div è solo per illustrare come l'elemento svg può essere incorporato direttamente nell'HTML. Tuttavia, l'elemento svg non deve essere incorporato all'interno di un elemento div.

Utilizzando l'elemento SVG, puoi incorporare direttamente l'SVG nella pagina HTML, piuttosto che metterlo in un file separato. Puoi impostare la larghezza e l'altezza dell'immagine SVG aggiungendo gli attributi width e height all'elemento SVG.

Utilizzando l'elemento svg, puoi anche generare direttamente svg nel browser utilizzando JavaScript. L'API JavaScript D3 è molto bravo in questo senso. L'API JavaScript jQuery può fare lo stesso.

Utilizzando l'elemento svg, puoi anche applicare stili CSS all'SVG e ai suoi elementi figli, proprio come faresti con qualsiasi altro HTML. Attenzione, i nomi degli attributi CSS degli elementi SVG a volte sono diversi dagli elementi HTML.

embed

Nella fase iniziale dello SVG, potevi utilizzare l'elemento embed per incorporare immagini SVG. Allora, non tutti i browser supportavano lo SVG. Oggi, consiglio di utilizzare gli elementi img o svg. Ecco un esempio di incorporamento dell'elemento per motivi storici:

<embed　src="/svg/simple-example-1.jsp"
　　　　　　　width="300"　height="220"
　　　　　　　type="image/svg+xml"
　　　　　　　pluginspage="http://www.adobe.com/svg/viewer/install/"　/>

Metti questo elemento nel punto in cui si desidera visualizzare l'immagine SVG nel file HTML. L'attributo src dovrebbe puntare all'URL dell'immagine SVG.

Nota l'attributo pluginspage. Questo è necessario per i browser più vecchi che non possono visualizzare SVG nativamente. Questi browser necessitano del plugin browser SVG di Adobe per visualizzare le immagini. In Internet Explorer 7 e Firefox 3.0.5, questo attributo non è necessario, ma non fa male includerlo.

Attributi Width e Height

Indipendentemente da se stai utilizzando l'elemento img, svg o embed per inserire l'immagine SVG, puoi impostare la larghezza e l'altezza dell'immagine utilizzando gli attributi width e height. Se l'immagine nell'archivio SVG è più larga o più alta di questi numeri, verrà visualizzata solo una parte dell'immagine SVG. Assicurati che la larghezza e l'altezza impostate siano sufficienti per visualizzare l'intera immagine SVG (o la larghezza che desideri visualizzare).

Utilizzare SVG come immagine di sfondo dell'elemento HTML

Puoi utilizzare l'attributo background-image CSS per utilizzare l'immagine SVG come immagine di sfondo dell'elemento HTML. Devi puntare all'immagine SVG come faresti con qualsiasi altro file di immagine. Non tutti i browser supportano completamente questo, quindi verifica nei browser che hai pianificato di supportare. Ecco un esempio:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
{}

Compatibilità del browser

Internet Explorer Le versioni 9 e successive possono visualizzare nativamente SVG. Al momento di scrivere questo articolo, Firefox, Chrome, Safari, Opera e i browser Android sono stati in grado di visualizzare nativamente SVG da un po'. Anche Safari per iOS, i browser mini e mobili di Opera, e Chrome per Android sono così.

Content Type

Se punti l'URL del browser con estensione .svg, il browser sarà in grado di indovinare il tipo mime del file SVG. Tuttavia, quando si genera SVG da servlet, JSP, PHP, ASP.NET o altri componenti di applicazioni web, l'estensione dell'URL non è sempre .svg.
Perché il browser continui a interpretare il file come file SVG, devi impostare l'intestazione HTTP Content-Type della risposta.

image/svg+xml

Se guardi l'elemento <embed> precedente, noterai che anche lì è così fatto. Impostare il tipo di contenuto nell'elemento <embed> è sufficiente per Internet Explorer, ma non abbastanza per Firefox. Deve essere impostato anche nel tipo di contenuto della risposta HTTP.

Inoltre, se si indirizza il browser direttamente al file SVG sul server, non ci sono etichette <embed> che possono eseguire questa operazione per voi. Poi, sarà necessario impostare manualmente il tipo di contenuto nella risposta HTTP.
Questo è il metodo per farlo in JSP:

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

Questo è molto simile a eseguire in servlet. Se si utilizza una tecnologia diversa da Java, basta cercare su Google per trovare esempi su come impostare il tipo di contenuto nella risposta HTTP. Ci saranno molti esempi.

Icone SVG Esempio semplice di SVG