什么是 SVG，它是如何工作的？答案

【问题标题】：What is SVG and how does it work?什么是 SVG，它是如何工作的？
【发布时间】：2013-03-18 00:21:09
【问题描述】：

CSS 中的 SVG 是如何工作的？例如，为了在 IE9 中有渐变，我使用了这个编辑器。 http://www.colorzilla.com/gradient-editor/

它为使用 SVG 结构的 IE9 生成了一些代码。有人可以解释这是什么以及它是如何工作的吗？所以它没有从任何地方加载文件，它只是使用 url 的 data 属性来编译 SVG 文件就是它在做什么。

data:image/svg+xml;base64 是什么意思？

它会减慢页面的渲染速度吗？我知道 PIE 会减慢它的速度，所以只是想知道这个对于 IE9 而不是 PIE 对于渐变的值。

【问题讨论】：

标签： css svg

【解决方案1】：

这意味着您将 base 64 编码图像嵌入到您的 css 文件中，这样您的应用程序就不必为图像发出另一个显式 http 请求。它固有地包含在您的 css 文件中。

【讨论】：

它给你一个 svg 因为 ie 9 不支持渐变但支持 svgs。
渲染时间是否更长。例如 PIE 确实会占用大量渲染时间。
它也可以在其他浏览器上加载或仅在 IE9 上受支持。我问的原因是，如果我使用过滤器将它添加到具有 IE7 IE8 特定渐变样式的类中，我不需要它发生在 IE8 或 IE7 上，它不会加载到这些页面上。
在 Wikipedia 上有一个很好的支持 svg 的浏览器列表：en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_browsers 就渲染时间而言，与页面上的静态图像相比没有明显的区别（只有几毫秒）。渲染可能花费的几毫秒时间，您将获得很多倍的回报，而不必向服务器发出额外的 CSS 图像请求。我们使用这种方法取得了巨大的成功。

【解决方案2】：

这是一个数据 url (link @MDN)。 image/svg+xml 说它是 SVG 图像（而不是 png 或其他东西）。最后base64表示后面的内容是用base64编码的。

【讨论】：

【解决方案3】：

您可以像在 CSS 中使用常规 jpg 一样使用 SVG 文件。例如，background: url(image.svg);。这是用 CSS 实现 SVG 的一种方法。

【讨论】：