使用 <html> 在 iOS 浏览器中显示 <svg> 而不使用 <embed> 标签答案

【问题标题】：Display <svg> in iOS Browser using <html> without the use of the <embed> Tag使用 <html> 在 iOS 浏览器中显示 <svg> 而不使用 <embed> 标签
【发布时间】：2011-11-26 10:53:23
【问题描述】：

是否可以在 iOS 浏览器中的 <html> 中显示 <svg> 内容不使用 <embed> 或 <img> 标签，这需要我存储 <svg>内容在单独的文件中？

在<html> 中嵌入<svg> 内容似乎适用于所有其他现代浏览器（IE9、Chrome，甚至 Window 上的 Safari！）。

我发现一些参考建议将内容类型更改为 'text/xml' 可能有效，但我无法更改它，因为我的代码在 SharePoint 2010 中作为移动服务器控件的一部分运行。

我的页面包含几个<svg> 区域，每个区域都显示一个简单的图表。这些图的数据存储在序列化对象中，需要在绘制 svg 折线之前对其进行反序列化。由于反序列化过程非常耗时，我更喜欢一次性完成并生成所有图形，而不是生成对单个 svg 文件的资源引用，这些文件可以通过 <embed> 标签引用。

编辑： There are indications iOS5 支持内联 <svg>。

【问题讨论】：

标签： ios html svg

【解决方案1】：

如果您需要将 SVG 直接嵌入到文档中

使用 XHTML（不仅仅是 HTML），使用正确的 mime 类型提供它，您的 SVG 将在所有主流浏览器中正常工作，包括 iPhone 和 iPad。

此示例文件在 XHTML 中使用内联 SVG，甚至在宿主文档中使用 JavaScript 和 CSS 来操作 SVG：
http://phrogz.net/SVG/svg_in_xhtml5.xhtml

它在 iPhone/iPad 上运行良好。

如果需要引用外部文件

使用<img> 标签直接引用您的SVG。这适用于 iOS。

例如，在您的 iPhone/iPad 上打开它：
http://phrogz.net/SVG/svg-via-img.html
哪些参考
http://phrogz.net/SVG/heart.svg

请注意，a bug with WebKit 与在固定大小的 <img> 标记内渲染可变大小的 SVG 相关。（它似乎是从包含窗口的纵横比而不是 <img> 元素的尺寸绘制 SVG 的纵横比。）如果您使用该测试文件调整浏览器窗口的大小，您可以在 Chrome 或 Safari 中看到奇怪之处.

【讨论】：

您的示例的 html 还引用了您的案例中的外部资源 (heart.svg)。问题要求在不引用外部资源的情况下做到这一点。内联 SVG 在除 iPhone 和 iPad 之外的所有浏览器中都能正常工作（甚至在 Windows 上的 Safari 中！）
@PhilippSchmid 天哪！我不知何故完全误读了原来的措辞并把它倒了回去。（我以为您是说您不想使用<embed>，但需要引用外部文件。）谢谢您的澄清！但是，内联 SVG 通过 XHTML 在 iPhone 和 iPad 上运行良好。我已经更新了我的答案以显示这一点。

【解决方案2】：

您可能需要在 XHTML 复合文档中使用内联 SVG。在这种情况下，XML 名称空间用于 HTML 根元素和内联 SVG 元素。相关示例请参见此处：
http://www.croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml

其他有用的例子可以在这里找到：
http://www.croczilla.com/bits_and_pieces/svg/samples

【讨论】：

【解决方案3】：

您是否尝试过使用<object>？我已经有一段时间没有这样做了，但你可以用谷歌搜索一下。

【讨论】：