ansaurus

Question

Problem with dynamic SVG image generation

Answer 1

+5 A:

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"&gt;
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
<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 !

Pascal MARTIN 2009-10-26 05:44:13

Thank You :) I was stuck on this for a lot of time. It works perfectly now.

Crimson 2009-10-26 06:08:01

@Pascal: Yes, there is no `head` in SVG, and the `meta` element is used differently.

Boldewyn 2010-02-18 09:28:20

Answer 2

+1 A:

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"&gt;
    <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

luc 2009-10-26 06:23:55

You don't need to use prefixes on every element, it's enough to put xmlns="http://www.w3.org/2000/svg" on the outermost <svg> root element(s).

Erik Dahlström 2009-10-26 11:47:11

...modulo correct xmlns value

Erik Dahlström 2009-10-26 11:48:53

Oh really, Do I need to change the xmlns:svg?

luc 2009-10-26 11:56:11

Answer 3

A:

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"&gt;
    <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"&gt;
    <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"&gt;
        <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.

Erik Dahlström 2009-10-26 18:35:38

ansaurus

tags:

views:

answers:

Problem with dynamic SVG image generation

related questions