动态 SVG 图像生成问题答案

【问题标题】：Problem with dynamic SVG image generation动态 SVG 图像生成问题
【发布时间】：2023-03-04 03:19:01
【问题描述】：

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

<?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，所以我尝试将其设置为 content-type，如上所示。 Firefox 正在接收正确的代码，但未呈现图像。有人知道这里要改什么吗？

【问题讨论】：

标签： php html svg

【解决方案1】：

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

以下元：

<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 函数
Firefox 可以正确显示 SVG 红色圆圈 -- 所以，似乎可以工作 ;-)

希望这会有所帮助！

【讨论】：

谢谢 :) 我被困在这个问题上很长时间了。现在完美运行。
@Pascal：是的，SVG中没有head，meta元素的使用方式不同。

【解决方案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-declarations 放在 html 根元素上是有意义的，就像在第一个示例中一样。

【讨论】：

【解决方案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 对象变得非常容易。

希望对你有帮助

【讨论】：

你不需要在每个元素上都使用前缀，将 xmlns="w3.org/2000/svg" 放在最外面的
哦，真的，我需要更改 xmlns:svg 吗？