SVG in linea in HTML, con Firefox 3.5

Question

Sto cercando di creare del contenuto misto HTML/SVG e di avere qualche problema. Il contenuto HTML si presenta come previsto, ma l'SVG in linea non lo fa. Quindi, faccio alcuni esperimenti.

Trovo siti che hanno esempi di SVG inline e vengono visualizzati correttamente sul mio sistema. Quindi, "visualizzo l'origine della pagina" e copio/incolla l'HTML/SVG in un altro file locale e apro questo file in Firefox. Nessun SVG in linea è visibile.

Ho anche provato lo stesso esperimento con Chrome, gli stessi risultati.

Cosa potrei mancare?

Aggiornamento
Leggero cambiamento di identità da parte mia: k montgomery -> kmontgom sull'uso di OpenID.

In ogni caso grazie a tutti quelli che hanno risposto. La soluzione migliore era impostare Response.ContentType; questo mi consente di continuare con l'approccio WebForms per ora.

Avevo pensato di creare contenuti XHTML puri in file .xml e di utilizzare ASP.NET MVC per pubblicare tali contenuti. Potrei finire per farlo in futuro.

Ora, avanti con jQuery, SVG, e fare in modo che la cosa faccia qualcosa.

Grazie per tutto l'aiuto.

Answer 1

Assicurarsi che dare un nome al file ".xml" e non ".html"

Answer 2

Affinché linea SVG da visualizzare nei browser, la pagina deve essere XHTML valido e deve essere servita con application/xhtml + xml intestazione di risposta del server mime-type.

E 'anche possibile estrarre il contenuto SVG in linea dalla pagina HTML così, vedere un esempio di un'immagine SVG Tiger che può anche essere visualizzato in Internet Explorer (5.5+)

Answer 3

Come ha detto Greg, ha bisogno di essere un file che Firefox riconosce come un file XHTML, non solo normale HTML, che è ciò che ha ottenuto il rinominato. Per ottenerlo da un'app lato server, è necessario impostare l'intestazione Content-type della risposta su application/xhtml+xml.

Answer 4

Un'alternativa se non si vuole fare XHTML è codificare in base64 i dati SVG.

ad es.

<object type="image/svg+xml" 
     data="data:image/svg+xml;base64,PCFET0NUWVBFI...etc..."></object> 

Penso che probabilmente non è ciò che si desidera specificamente per la propria situazione, ma comunque può essere utile per gli altri.

Answer 5

Come altri notano, finché si utilizza XHTML e gli spazi dei nomi sono corretti, sei a posto - puoi semplicemente usare il tag > svg > nel codice HTML.

Ho trovato nei test che ha funzionato molto bene solo in Firefox 4 e nelle versioni recenti di Chrome, ma YMMV. Per cose su una intranet in cui sai che tutti usano un browser decente questo va bene.

Ho fatto un po 'di experimentation in generating inline SVG using JavaScript. Sentiti libero di verificarlo, potresti trovare utile il codice.

Answer 6

Se si genera dinamicamente SVG utilizzando javascript, funziona in linea. Invece di:

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1000" width="1000"> 
     <rect id="myrect" x="0" y="0" rx="0" ry="0" width="200" height="300" fill="yellow" stroke="purple" stroke-width="5" /> 
    </svg> 

Lei scrive:

<script> 
     var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg/"); 
     svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); 
     svg.setAttribute("height", "1000"); 
     svg.setAttribute("width", "1000"); 
     document.body.appendChild(svg); 
     var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
     rect.setAttribute("id", "myrect"); 
     rect.setAttribute("x", "0"); 
     rect.setAttribute("y", "0"); 
     rect.setAttribute("rx", "0"); 
     rect.setAttribute("ry", "0"); 
     rect.setAttribute("width", "200"); 
     rect.setAttribute("height", "300"); 
     rect.setAttribute("fill", "yellow"); 
     rect.setAttribute("stroke", "purple"); 
     rect.setAttribute("stroke-width", "5"); 
     svg.appendChild(rect); 
    </script> 

Non è l'ideale, ma sembra funzionare.

Answer 7

Per le persone che hanno questo problema con ASP.NET, modificare il doctype per HTML5 e tipo di contenuto application/xhtml + xml, ho provato su IE9, FF 3.6 e Chrome 13:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
..... 
etc 

E in code-behind:

protected void Page_Load(object sender, EventArgs e) 
{ 
this.Response.ContentType = "application/xhtml+xml"; 
}