1. casa
  2. Domanda e risposta
  3. Come utilizzare i file .svg in una pagina Web?

Come utilizzare i file .svg in una pagina Web?

2010-01-06 9 views

risposta

5

http://www.w3schools.com/svg/svg_inhtml.asp

L'esempio migliore:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml" 
pluginspage="http://www.adobe.com/svg/viewer/install/" />

fonte

2010-01-06 06:30:58

+0

sarebbe questo in realtà mostrare l'immagine su qualsiasi svg browser? Grazie? – Parastar

+0

Dovrebbe apparire su tutti i principali browser. –

+1

Grazie, ma che cos'è la "pluginspage"? non può recuperare con quello? – Parastar

2

Raphaël—JavaScript Library. Bella libreria javascript che sta usando svg e ti offre una vasta gamma di effetti!

supporta anche la maggior parte dei browser, tra cui Internet Explorer

fonte

2010-01-06 07:27:55

40

Vedere svgweb quickstart e la svgweb project homepage per qualcosa che funziona in tutti i browser, tra cui Internet Explorer (richiede plug in flash).

Ci sono molti modi per includere un file SVG esistente:

  • <img src="your.svg"/>
  • <object data="your.svg"/>
  • <iframe src="your.svg"/>
  • <embed src="your.svg"/>
  • <div style="background:url(your.svg)">...</div>

fonte

2010-01-06 08:15:54

+3

Il mio preferito non è in questo elenco, basta aprire il tuo svg in un editor di testo e mettere il suo contenuto in linea nel tuo documento html, questo ti permetterà di applicare filtri ad esso e di disegnare l'immagine svg con css. – chrisweb

+2

@chrisweb Funziona anche con ''. Vedi "Uso di SVG come " su http://css-tricks.com/using-svg/. –

+0

@chrisweb Come funziona con un'immagine di sfondo? –

17

Se tutto ciò che si vuole fare è posizionare un'immagine SVG come un logo o un diagramma statico, è sufficiente fare attenzione a fornire un fallback per le versioni precedenti di Internet Explorer (ad es. versioni 8 e precedenti).

Il metodo migliore e più semplice che ho trovato è quello di utilizzare un file .png o .jpg per il fallback, collocato utilizzando un normale tag img. Quindi inserisci il tag img in un tag object, utilizzando l'attributo data per posizionare lo SVG.

<object data="/path-to/your-svg-image.svg" type="image/svg+xml"> 
    <img src="/path-to/your-fallback-image.png" /> 
</object>

Il file di riserva img viene caricato e utilizzato solo se il browser non comprende SVG.

fonte

2012-10-30 04:09:32 Caspar

+0

alternativamente sposta il fallback nello stesso CSS – Jerome

1

Mi piacerebbe essere d'accordo con la risposta di "code-zoop". Sebbene questo tecnicamente non risponda alla tua domanda, potrebbe anche essere una soluzione: inserisci i dati rilevanti direttamente nel codice HTML. Sia direttamente come elemento svg, sia usando Raphaël-JS.

del W3C-scuole:

SVG è tutto suported in In Firefox, Internet Explorer 9, Google Chrome, Opera e Safari è possibile

<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" 
    stroke-width="2" fill="red"/> 
</svg> 

</body> 
</html>

(Fine citazione)

E per pensare ancora di più fuori dagli schemi, a seconda di come si desidera utilizzarlo, è anche possibile inserire la grafica a 1 colore in un webfont. (vedi ad esempio iconmoon.io)

fonte

2013-03-06 06:52:14 Ideogram

2

Ti consiglio di inserire la svg in linea nel tuo documento (tecnica html5). Basta aprire il tuo file SVG, copiare il tag SVG e tutto ciò che contiene e incollarlo nel tuo documento html.

<html> 
    <body> 
     <svg></svg> 
    </body> 
</html>

ha il vantaggio che questo consente di utilizzare i CSS per lo stile che, come cambiare il colore di riempimento o l'applicazione di filtri ad esso come sfocatura. Un altro vantaggio è che si salva una richiesta http per il recupero del file svg se si trova all'interno del documento.

Se si desidera ad esempio modificare la propria posizione utilizzando css, è necessario inserire il css all'interno di un attributo di stile. Gli stili che si trovano in un file css esterno non verranno applicati nella maggior parte dei browser poiché si tratta di una restrizione di sicurezza. Per esempio:

<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>

Questa tecnica è supportata da tutti i browser tranne IE8 e sotto così come il android 2.3 del browser e sotto.

Leggi l'SVG capitolo in linea per ulteriori dettagli:

se non volete metterlo in linea nella tua pagina, quindi l'alternativa migliore sembra essere l'oggetto tag ed evita di usare il tag embed.

Leggi questo per ulteriori dettagli sulla oggetto vs embed vs tag img:

fonte

2013-09-23 21:00:40 chrisweb

+0

Sai un modo per automatizzare questo? Piuttosto che copiare dal file SVG e incollare nel tuo codice HTML, c'è un plugin grunt o qualcosa che può iniettarlo nella tua pagina? –

+0

spiacente, non ho mai sentito parlare di un simile plug-in, ma forse esiste – chrisweb

2

approccio di Caspar è quella corretta. Tuttavia, vorrei spostare il fallback al CSS, dato che probabilmente desidera applicare alcuni stili alla stessa file in formato SVG ...

<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>

CSS

.no-svg .logo { 
    width: 99px; 
    height: 99px; 
    background-image: url(/path-to/your-png-image.png); 
}`

fonte

2013-12-20 13:26:58 Jerome

Problemi correlati

 Problemi correlati