Problem with dynamic SVG image generation
I am trying to write a server开发者_JAVA百科 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?
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
headerfunction - The SVG red circle is properly displayed by firefox -- so, seems to work ;-)
Hope this helps !
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
加载中,请稍侯......
精彩评论