Problem with dynamic SVG image generation

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

  •  06-07-2019
  •  | 
  •  

Question

I am trying to write a server side script (PHP) for generating an SVG image based on user input. I am using the following code:

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

?>

I read somewhere that the MIME type must be svg+xml so I tried setting it in content-type as you can see above. The correct code is being received by Firefox but the image is not being rendered. Does somebody know what to change here?

Was it helpful?

Solution

According to the SVG page on wikipedia, SVG should be served as image/svg+xml.
See also : 1.2 SVG MIME type, file name extension and Macintosh file type

The following meta :

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

Doesn't define the way a content is served from a server -- it's more of a way to give that information, for HTML pages, when you can't define the way it's served...
And, I am not sure if the meta element is valid in the SVG specifications -- I'll let you check that ^^


What you need to do, here, is send a HTTP header from your server, indicating the content-type of your data.

This is done using the PHP header function ; in your case :

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

Note :

  • I have removed the <meta> and <head> tags ; not sure if the <head> should be removed, but, as it was empty....
  • I've added the call to the header function
  • The SVG red circle is properly displayed by firefox -- so, seems to work ;-)

Hope this helps !

OTHER TIPS

Just saying that this:

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

will work the same as this:

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

You can judge for yourself which is more readable/clean. If you use many svg fragments then it can make sense in some cases to put the xmlns-declarations on the html root element like in the first example.

I've succeed to use svg in a xhtml document recently.

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

The trick was to use the svg: prefix for every item. It needs to know the namespace to be correctly parsed by the browser.

Then I doscovered Raphael Javascript library http://raphaeljs.com/ which makes handling svg objects very easy.

I hope it helps

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top