09: 使用 Data URI 的 SVG | CSS-Tricks

我们已经介绍了“内联 SVG” - 它将 SVG 语法直接放入 HTML 中。您也可以在其他地方使用相同的内联 SVG，例如在 <img> 或 background-image 中。这很奇怪。

就像

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

您将整个 SVG 语法放在您看到 <svg> 开始的地方。

同样在 CSS 中

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

除此之外，您可以将 SVG 转换为 Base64 编码，它也可以作为 Data URI 工作，例如

<img alt="" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc">

这在 CSS 中也能正常工作（可能在其他地方也能工作，任何您使用图形的地方都能使用。）

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的使用 Data URI 的 SVG（多种方式）演示。

JonathanBeech

# 2014 年 9 月 21 日

我不确定使用 data:image/svg+xml;utf8 与仅使用内联 SVG 相比有什么优势？

Chris Coyier

评论永久链接# 2014 年 10 月 21 日

一个潜在的优势是 DOM 权重。对于内联 SVG，所有形状都在 DOM 中，而 <img> 只是一个 DOM 节点。
John Moore

评论永久链接# 2014 年 10 月 31 日

我们对重复的图标使用 data URI。您可以创建一个 CSS 类，并将其应用到您想要使用该图像的所有地方。如果您试图榨取每一丝性能，这可能是一个不错的策略。
Sebastian Hädrich

评论永久链接# 2019 年 10 月 4 日

相反，您可以通过 <use /> 标签重复使用 svg 图标。

Jonathan Duck

# 2016 年 7 月 15 日

Base64 是一种编码。

UTF-8 主要对每个字符使用 1 个字节（0 到 255 之间的数字）。（假设您只使用不需要更多字节的字符，例如典型 SVG 中的字符。）Base64 可以接受任何二进制数据，例如 SVG 文本文件或图像文件，并使用 64 个不同的字符对其进行编码。

Hello 变为 SGVsbG8K，而 'I just broke CSS; 变为 J0kganVzdCBicm9rZSBDU1M7Cg==，它可以放在 CSS 字符串中。

它总是会使您的文件变大，但会确保您可以在任何可以使用 Base64 的 64 个字符的地方使用它。在 CSS 中，您的换行符会破坏文档，但在 Base64 中它们会被编码，因此不会出现问题。它主要用于包含您无法在文档中放置的字符的文件。在文本编辑器中打开 PNG 并尝试将其复制粘贴到 CSS 文件中，结果可能不理想。;)

Adam Crockett

# 2017 年 5 月 28 日

那么，如何处理 Base64 编码的 svg 滤镜文件呢？然后用 webpack 将它们打包成 filter:url(require(‘blur.svg’)); - 这可是一个应用案例。有人用过早期的 CSS 背景滤镜吗？

vigneshwaran

# 2017 年 8 月 31 日

以下代码的 list-style-image 工作正常，但悬停无效。悬停在 HTML 标签中有效，但在 CSS 中无效，有没有什么解决方案？提前感谢。

.dropdownList ul{
margin:auto;
display: none;
position:absolute;
list-style-image: url("data:image/svg+xml;utf8,");
direction:rtl;
list-style-position: inside;
}
.dropdownList li:hover  svg #circle{
stroke-width:1;
stroke:#1b5e20;
fill: #fce57e;
}

Bucky

# 2018 年 3 月 13 日

Base64 编码并不是唯一的选择。例如，默认情况下它期望 URI 编码。如果您执意要这样做，您可以对整个 SVG 文件进行 URI 编码。如果您已经在使用 LESS 或 SASS 等预处理器，那么这样做可能没有太大好处。如果没有预处理器，URI 编码会让处理颜色值稍微不那么麻烦。如果您正在与一位犹豫不决的设计师合作，这可以帮您省心。

David E Elliott

# 2018 年 6 月 15 日

如果我生成一个 SVG 图标，保存 Base64 编码的字符串，并在 1000 个 img 标签中使用该字符串，浏览器是否需要为每个 img 标签解码字符串并重新解析 SVG？

Danny D

# 2018 年 10 月 29 日

我可以将动画 SVG 用作允许我输入文本内容的 div 的背景图像吗？

Geoff Graham

评论永久链接# 2018 年 10 月 29 日

只是猜测，没有看到示例，但您可能可以做到。查看这篇最近的文章，其中在 background-image 属性中直接对背景图像进行了动画处理。我认为您可以在 SVG 标记中添加 text 元素。但是，您可以看到这种方法很快就会变得难以管理。

Dzintars Klavins

# 2018 年 12 月 12 日

我在 LeafletJS 中使用自定义标记时，有点被迫使用这种方法（我不想使用 png），但现在我无法弄清楚如何动态应用新类。简单的 on hover 样式可以通过 css filter 完成，但功能有限。相当基础。但我希望有一些花哨的样式，比如轮廓、多个彩色段等等。因此我需要应用类。我不确定如何实现。我想要使用 SVG 的一个原因是，我可以将动态文本值传递到其中。
例如 - 简单的 LeafletJS 标记

let svgicon = `<svg id="marker` + markers[i][4] + `" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <defs>
          <style>
            .cls-1 {
              fill: #006aff;
            }      
            .cls-2 {
              font-size: 28px;
              fill: #fff;
              font-family: Montserrat-Regular, Montserrat;
            }
          </style>
        </defs>
        <path class="cls-1" d="M56.9679,24.9679A24.9679,24.9679,0,1,0,12.38928,40.42236h-.00067l18.4848,22.96552a1.38676,1.38676,0,0,0,2.22162.10583l17.86951-22.285H50.963A24.86853,24.86853,0,0,0,56.9679,24.9679Z"/>
        <text id="label` + markers[i][4] + `" class="cls-2" transform="translate(32 34)" text-anchor="middle">` + markers[i][1] + `</text>
        </svg>`
let url = encodeURI("data:image/svg+xml;utf8," + svgicon).replace('#','%23');
let icon = new CustomIcon({iconUrl: url})

非常感谢您提供任何链接/资源。

Humphrey Pietersen

# 2019 年 4 月 27 日

发现 Data URI 在放置到文档中非常有用，一些微小的图标，在其中整个内联 svg 元素可能显得过于杂乱，减少了 DOM 权重。保持标记更干净 :)

vikas

# 2019 年 10 月 12 日

是否可以将上面的 ddata:image/svg+xml;charset=utf-8, 保存为 png 图像？请帮忙

Bhavin

# 2020 年 2 月 13 日

在 image 标签中使用 SVG 图像的 Data URI 的一个优势是，它有助于使用 WKHTMLTOPDF 和其他 PHP PDF 库创建 PDF。

David Waterman

# 2022 年 6 月 14 日

有没有办法使用包含换行符的 Data URI？

background-image: url(data:image/svg+xml;utf8,
<svg>
...
</svg>
);

David Waterman

# 2022 年 6 月 30 日

据我所知，关于可以直接将 svg 放入 Data URL 的说法是错误的。许多 SVG 包含“#”，例如。字符串中的 SVG 需要先进行编码，例如使用 window.encodeURIComponent(svg)。

不同浏览器处理 Data URI 的方式差异很大。
参考：https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-September/075456.html

hannah

# 2022 年 7 月 11 日

谢谢，我一直不知道 SVG 是什么以及它是如何使用的，但了解到它是一组图像指令以及它在 CSS 文件中的使用方式，这很有帮助... 我不是开发者

# 2022 年 8 月 6 日

正确的语法是 ;charset=utf-8，而不是 ;utf8，但这两种方式都可以工作，因为 utf-8 是 svg 的默认编码。

# 2024 年 4 月 16 日

David Waterman 是对的，某些特殊字符必须在 Data URI 中进行编码，尤其是 # (%23) 和 % (%25)。请更正上面的文章。

#12: data:image/svg+xml;utf-8 就足够了，但并没有过时。

John

# 2024 年 6 月 10 日

从 2023 年 12 月开始，SVG 对 Data URI 的支持已被取消。 https://developer.chrome.com/blog/migrate-way-from-data-urls-in-svg-use

jonty

评论永久链接# 2024 年 7 月 17 日

仅适用于 SVG 中的元素，而不是 CSS 中。

您链接的页面上写着“SVG 规范最近更新，取消了对 SVG 元素中 data: URL 的支持”。

评论

发表评论 取消回复

发表评论取消回复