CODEWITHSUNDEEP
phphtmlsvg
KJ Saxena
KJ Saxena

Reputation: 21828

Problem with dynamic SVG image generation

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?

Upvotes: 10

Views: 28940

Answers (3)

Pascal MARTIN
Pascal MARTIN

Reputation: 400972

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

Upvotes: 32

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

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.

Upvotes: 3

luc
luc

Reputation: 43096

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

Upvotes: 0

Related Questions