Chrome 72 是否破坏了 css 背景 svgs 的“dataimagesvg+xml;utf8” [复制]

Chrome

Chrome 72版本是否破坏了使用"data:image/svg+XML;utf8"作为CSS背景的SVG图片？这个问题一直困扰着开发者们。在本文中，我们将深入探讨这个问题，并提供一些案例代码来帮助大家理解。

在过去的版本中，开发者们习惯使用"data:image/svg+XML;utf8"来表示SVG图片的背景。这种方法非常方便，可以直接将SVG代码嵌入到CSS中，而不需要额外的文件。然而，最近的Chrome 72版本引入了一些变化，这引起了一些开发者的关注。

问题的根源

Chrome 72版本对CSS背景的处理方式发生了一些变化，特别是对"data:image/svg+XML;utf8"的处理。在之前的版本中，这种格式的SVG图片可以正常工作，但是在Chrome 72中，它们可能会导致一些问题。这是因为Chrome 72开始更加严格地检查SVG代码的语法和结构。

问题的影响

Chrome 72版本对CSS背景中的SVG图片的修改可能会导致一些问题。一些使用"data:image/svg+XML;utf8"作为背景的网站可能会出现显示不正确的情况，或者干脆无法显示。这可能会对网站的外观和用户体验产生负面影响。

解决方案

对于那些受到Chrome 72版本变化影响的开发者们，有几种解决方案可以尝试。首先，可以尝试使用其他格式的图片作为CSS背景，例如"data:image/png"或"data:image/jpeg"。这些格式的图片在Chrome 72中应该可以正常工作。

另一种解决方案是将SVG图片保存为单独的文件，并使用文件路径作为背景。这样可以避免Chrome 72对SVG代码的严格检查，确保背景图片可以正常显示。

案例代码

下面是一个使用"data:image/svg+XML;utf8"作为背景的案例代码：

CSS
.element {
  background: url("data:image/svg+XML;utf8,<svg XMLns='http://www.w3.org/2000/svg' width='100' height='100'><rect width='100' height='100' fill='red' /></svg>");
}

如果你遇到了Chrome 72版本对这段代码的问题，可以尝试使用下面的解决方案之一。

CSS

/* 使用其他格式的图片作为背景 */

.element {

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACtUlEQVRYR82XT2hUURTGfzPmZ2Z2b2bt2bbt2bt2bZt2bZt27Zt27Zt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZt2bZd+sMjIQmU3o9rHvP9zD2w3g4G2T4aRwXl21aRwXlm1aRwXl21aRwXlm1aRwXl21aRwXlm1aRwXl21aRwXlm1aRwXl21aRwXl21aRwXlm1aRwXl21aRwXlm1aRwXl21aRwXlm1aRwXl21aRwXlm1aRwXlm1aRwXl21aRwXlm1aRwXlm1aRwXl21aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwXlm1aRwX