modo migliore per posiziona SVG contenuto all'interno HTML

Question

Dalla mia ricerca, ho capito ci sono tre modi per effettuare un file in formato SVG all'interno HTML:

utilizzando incorporare:

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

utilizzando oggetto:

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

utilizzando iframe:

<iframe src="plot1.svg" width="500" height="320"> </iframe> 

Ho sperimentato tutti e tre su un banco di prova (Django built-in server dev, il rendering le pagine in Firefox 3.6). In questo ambiente ovviamente sterile, non ho notato alcuna differenza tra le prestazioni o la risoluzione di tre w/r/t.

La mia domanda è se uno di questi è migliore degli altri due, e se sì, quale. La risposta potrebbe ovviamente dipendere dai fatti, che ho cercato di limitare a ciò che è rilevante:

Spesso visualizziamo dati (ad es. Serie temporali) sul nostro sito Web, di solito creati in risposta ad un'azione dell'utente; in base a tale azione dell'utente, viene effettuata una chiamata a un database, i dati restituiti vengono scricchiolanti e inviati al motore di tracciamento, che esegue il rendering di un'immagine statica che viene quindi incorporata nella pagina - roba molto standard.

Questo funziona correttamente, ma vorrei aggiungere alcune funzionalità interattive a questi grafici (ad esempio, descrizioni comandi, etichette dell'asse con collegamenti ipertestuali, evidenziando un gruppo di punti w/in un grafico). Alcuni dei grafici sono abbastanza sofisticati (ad es. Condizionamento multi-pannello) e non ho trovato una libreria di grafici javascript che includa queste funzionalità. Alla fine ho optato per l'utilizzo della stessa libreria di tracciamento (Lattice in R) ma il rendering di ogni grafico in svg e quindi l'aggiunta delle funzionalità di interazione dell'utente in un passaggio di post-elaborazione, che consiste essenzialmente di funzioni javascript che manipolano direttamente l'XML.

Answer 1

<embed> Eviterei generalmente. È deprecato in HTML4, non consente il corretto contenuto di fallback e ha avuto una selezione di problemi in IE.

<object> consente di includere contenuti HTML di riserva per i browser senza supporto SVG. tornerà a richiedere all'utente di scaricare il file .svg. Quale di questi è probabilmente dipende dall'applicazione.

L'altra alternativa, per i browser moderni (incluso IE dalla versione 9) è di pubblicare la pagina Web come application/xhtml+html e includere gli elementi SVG nella pagina stessa.

Answer 2

per me il modo migliore è questa fonte

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <image x="0" y="0" height="60" width="60" xlink:href="huge-red-circle.svg" /> 
</svg> 

You can see the example here

: http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial