Question

我想在我的HTML文件中使用SVG图片，但该图片无法加载。

我尝试使用img和iframe代码。

http://cld.persiangig.com/dl/dHo6d/Rg9Myk2bCv/alert.svg

Answer 1

问题在于HTTP标头，这些标头未包含在问题中，只能使用给定的URL进行检索，这可能会随时停止工作或改变其工作方式，恕不另行通知。但是为了记录，这些是截至目前的响应标题：

HTTP/1.1·200·OK(CR)(LF)
Server:·nginx/1.4.7(CR)(LF)
Date:·Sun,·24·Aug·2014·12:20:31·GMT(CR)(LF)
Content-Type:·application/octet-stream(CR)(LF)
Content-Length:·550(CR)(LF)
Last-Modified:·Sun,·24·Aug·2014·12:12:03·GMT(CR)(LF)
Connection:·close(CR)(LF)
Cache-Control:·public,·must-revalidate(CR)(LF)
Content-disposition:·attachment;·filename="alert.svg"(CR)(LF)
ETag:·"53f9d693-226"(CR)(LF)
Accept-Ranges:·bytes(CR)(LF)
(CR)(LF)

因此，资源被标识为application / octet-stream（这意味着未指定格式的二进制数据块），服务器要求客户端将资源存储为文件，名称为alert.svg。

您需要更改服务器对.svg文件的工作方式，使其宣布其内容类型为image / svg + xml（不带Content-Disposition标头）。这样，情况将取决于浏览器对SVG图像的支持。

Answer 2

您可以使用：

<object data="http://www.broken-links.com/tests/images/heart-tree.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

或使用：

<embed type="image/svg+xml" src="http://www.broken-links.com/tests/images/heart-tree.svg" />

更新：而不是您在波斯语中的评论以及有关将svg图像设置为div背景的问题：

div {    
    background-image: url("http://www.broken-links.com/tests/images/heart-tree.svg");  
}

JSFIDDLE DEMO

add-svg-to-web-page article

的更多信息

在HTML中使用SVG图像？

2 个答案: