Question

我想在我的主页上使用svg-image，基本上使用以下代码：

<html><head/><body>
<img src="images/avatar.svg" width="135mm" height="210mm"/>
</body></html>

我的电脑上的一切正常（带有apache-server的Linux），然而，在转移到非常有限的主机后，图像不再显示。（注意：使用Chrome29和Opera12测试）

原因：它是在'text / xml'下转移而不是'image / svg + xml'

我正在寻找的是一种在我的主页上显示此图像的方法，最好不要丢失img-tag。

关于这一点的棘手部分：

我无法访问魔法文件
我不允许上传.htaccess
我没有服务器端脚本
我不想使用（i）帧
基本上我只能添加（x）html，css，javascript

缓解一些限制：

不需要在IE

修改已经联系过支持，他们声称他们的主机可以正常工作。所以这就是为什么我在寻找解决方案（目前正在使用.png，但对此并不满意）

Answer 1

您可以使用数据URI（您自己指定内容类型），或者您可以使用允许内联SVG的HTML5（这将要求您删除img标记）。

http://jsfiddle.net/zy96L/4/：

<!doctype html>
<head><title>Red circle</title>
<body>
    <img alt="red circle" src="data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'><circle%20fill='red'%20cx='50'%20r='50'%20cy='50'%20/></svg>" />

（甚至验证）

Answer 2

answer of Janus Troelsen设法帮助了我。

我使用一些JavaScript来检索图像，而不是直接将图像嵌入HTML中：

<script type="text/javascript">
     function getSVG(source)
     {
             xmlhttp = new XMLHttpRequest();
             xmlhttp.open("GET", source, false);
             xmlhttp.send();
             return "data:image/svg+xml," + xmlhttp.responseText;
     }
</script>
<img src="images/avatar.svg"
     onerror="this.onerror = null;
              this.src = getSVG('images/avatar.svg')"/>

服务器工作正常！

如果mime-type等于text / xml，则显示svg

2 个答案: