Question

我正在尝试编写服务器端脚本（PHP），以根据用户输入生成SVG图像。我使用以下代码：

<?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>';

?>

我在某处读到MIME类型必须是svg + xml所以我尝试在内容类型中设置它，如上所示。 Firefox正在接收正确的代码，但图像未呈现。有人知道在这里要改变什么吗？

Answer 1

根据SVG page on wikipedia，SVG应该作为image/svg+xml投放。
另见：1.2 SVG MIME type, file name extension and Macintosh file type

以下meta：

<meta http-equiv="Content-Type" content="svg/xml" />

不定义从服务器提供内容的方式 - 当您无法定义服务方式时，它更像是为HTML页面提供该信息的方式...
而且，我不确定元素是否在SVG specifications中有效 - 我会让你检查^^

您需要执行的操作是从服务器发送HTTP标头，指明数据的内容类型。

这是使用PHP header函数完成的;在你的情况下：

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

注意：

我删除了<meta>和<head>代码;不确定是否应删除<head>，但是，因为它是空的....
我已将调用添加到header功能
SVG红色圆圈由firefox正确显示 - 所以，似乎工作; - ）

希望这有帮助！

Answer 2

只是这样说：

<?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>

将与此相同：

<?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>

你可以自己判断哪个更易读/干净。如果你使用了很多svg片段，那么在某些情况下将xmlns声明放在html根元素上是有意义的，就像在第一个例子中一样。

Answer 3

我最近在xhtml文档中成功使用了svg。

<?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>

诀窍是为每个项目使用svg：前缀。它需要知道浏览器正确解析的命名空间。

然后我搜索了Raphael Javascript库http://raphaeljs.com/，这使得处理svg对象非常容易。

我希望它有所帮助

动态SVG图像生成的问题

3 个答案: