Menu
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?
316
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 :
<meta> and <head> tags ; not sure if the <head> should be removed, but, as it was empty....header functionHope this helps !
96
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.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
