Problema con la generación dinámica de imágenes SVG

StackOverflow https://stackoverflow.com/questions/1623242

  •  06-07-2019
  •  | 
  •  

Pregunta

Estoy intentando escribir un script del lado del servidor (PHP) para generar una imagen SVG basada en la entrada del usuario.Estoy usando el siguiente código:

<?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>';

?>

Leí en alguna parte que el tipo MIME debe ser svg+xml, así que intenté configurarlo en tipo de contenido como puedes ver arriba.Firefox recibe el código correcto pero la imagen no se representa.¿Alguien sabe qué cambiar aquí?

¿Fue útil?

Solución

De acuerdo con la Página SVG en wikipedia, SVG debe servirse como image/svg+xml.
Ver también : 1.2 Tipo SVG MIME, extensión de nombre de archivo y tipo de archivo Macintosh

El siguiente meta:

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

No define la forma en que se sirve un contenido desde un servidor; es más bien una forma de brindar esa información, para páginas HTML, cuando no se puede definir la forma en que se sirve...
Y no estoy seguro de si el elemento meta es válido en el Especificaciones SVG -- Te dejaré comprobarlo ^^


Lo que tienes que hacer aquí es enviar un encabezado HTTP desde su servidor, indicando el tipo de contenido de sus datos.

Esto se hace usando PHP. header función ;en tu 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 :

  • he eliminado el <meta> y <head> etiquetas;no estoy seguro si el <head> debería ser removido, pero, como estaba vacío....
  • Agregué la llamada al header función
  • Firefox muestra correctamente el círculo rojo SVG, por lo que parece funcionar ;-)

Espero que esto ayude !

Otros consejos

Solo digo que esto: 

<?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>

funcionará igual que esto: 

<?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>

Puedes juzgar por ti mismo cuál es más legible / limpio. Si usa muchos fragmentos de svg, puede tener sentido en algunos casos colocar las declaraciones xmlns en el elemento raíz html como en el primer ejemplo.

Recientemente logré usar svg en un documento xhtml. 

<?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>

El truco consistía en utilizar el prefijo svg: para cada elemento. Necesita saber el espacio de nombres para que el navegador lo analice correctamente.

Luego descubrí la biblioteca Javascript Raphael http://raphaeljs.com/ lo que hace que el manejo de objetos svg sea muy fácil.

Espero que ayude

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top