Problem with dynamic SVG image generation

2019-03-31 02:33发布

站内问答 / PHP
858 3 6

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?

标签： php html svg
举报
3条回答
狗以群分
2楼-- · 2019-03-31 03:11

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.

查看更多
0人赞 添加讨论(0) 举报
做个烂人
3楼-- · 2019-03-31 03:15

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 !

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
4楼-- · 2019-03-31 03:20

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)