Problema con la generazione di immagini SVG dinamiche

Sto cercando di scrivere uno script lato server (PHP) per generare un'image SVG in base all'input dell'utente. Sto usando il seguente codice:

<?php echo '<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <head><meta http-equiv="Content-Type" content="svg+xml" /></head> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>'; ?> 

Ho letto da qualche parte che il tipo MIME deve essere svg + xml, quindi ho provato ad impostarlo in content-type come puoi vedere sopra. Il codice corretto viene ricevuto da Firefox, ma l'image non viene visualizzata. Qualcuno sa cosa cambiare qui?

Secondo la pagina SVG su wikipedia , SVG dovrebbe essere visualizzato come image/svg+xml .
Vedi anche: 1.2 Tipo MIME di SVG, estensione del nome del file e tipo di file Macintosh

Il seguente meta:

 <meta http-equiv="Content-Type" content="svg/xml" /> 

Non definisce il modo in cui un contenuto è servito da un server – è più un modo di fornire quell'informazione, per le pagine HTML, quando non è ansible definire il modo in cui è servito …
E, non sono sicuro che il metaelemento sia valido nelle specifiche SVG – ti permetterò di controllare che ^^

Quello che devi fare, qui, è submit un'intestazione HTTP dal tuo server, indicando il tipo di contenuto dei tuoi dati.

Questo viene fatto usando la function di header PHP; nel tuo caso :

 header('Content-type: image/svg+xml'); echo '<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>'; 

Nota :

  • Ho rimosso i <meta> e <head> ; non sono sicuro se il <head> debba essere rimosso, ma, poiché era vuoto ….
  • Ho aggiunto la chiamata alla function di header
  • Il cerchio rosso SVG è correttamente visualizzato da firefox – quindi, sembra funzionare 😉

Spero che questo ti aiuti !

Solo dicendo questo:

 <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <head><title>test</title></head> <body> <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500"> <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> </svg:svg> </body> </html> 

functionrà allo stesso modo di questo:

 <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>test</title></head> <body> <svg id="display" width="500" heigth="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> </svg> </body> </html> 

Puoi giudicare da te che è più leggibile / pulito. Se si utilizzano molti frammenti svg, in alcuni casi può avere senso inserire le dichiarazioni xmlns nell'elemento radice html come nel primo esempio.

Sono riuscito a usare svg in un documento xhtml di recente.

 <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <head><title>test</title></head> <body> <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500"> <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> </svg:svg> </body> </html> 

Il trucco era usare il prefisso svg: per each object. Ha bisogno di sapere lo spazio dei nomi per essere analizzato correttamente dal browser.

Poi ho scoperto la libreria Javascript di Raphael http://raphaeljs.com/ che rende molto semplice la gestione degli oggetti svg.

spero possa essere d'aiuto