最近的Chrome版本中增强了安全特性, 这意味着从SVG中使用嵌入式数据URL可能会受到一定限制。这篇文章会讲解如何更好地利用SVG，并将SVG的数据URL迁移到SVG元素之外。
为什么需要迁移到SVG元素中的数据URL之外？
使用数据URL作为SVG的嵌入式图片是一种很常见的方法，可以轻松地将矢量图形写入到HTML或CSS中，而无需将它们作为外部文件下载。但是，随着Web安全性的提高，一些浏览器现在可能会限制使用这种方法。
例如，在最新的Chrome版本中，当SVG内使用的嵌入式数据URL过长或包含危险字符时，浏览器可能会限制其使用或阻止其加载。为了确保SVG的正确加载，我们应该尽量避免使用嵌入式数据URL，并将SVG数据URL迁移到SVG元素之外。
如何从SVG嵌入式数据URL迁移到SVG元素之外？
如果你的SVG使用了类似于以下示例中的嵌入式数据URL，那么你应该将其迁移到SVG元素之外：
“`svg
fill=”url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/c3ZnLWl0ZW0tYmFzZW [truncated])” /> “` 对于上面的SVG，我们可以将data URL替换为定义ID的线性渐变，并将其作为SVG文件元素之外的一个块： “`svg “` 在上面的示例中，我们定义了一个ID为“myGradient”的线性渐变，然后使用“fill”属性将其作为矩形的填充。由于渐变是在SVG元素之外定义的，所以我们可以轻松地避免任何与数据URL相关的安全问题。 总结 在本文中，我们了解了嵌入式数据URL在SVG中的使用情况，并讨论了在使用SVG时应避免使用它们的原因。我们还通过实际示例演示了如何将SVG数据URL迁移到SVG元素之外，以确保最佳的Web安全性。 我们鼓励所有开发人员迁移到SVG元素之外的方法，并在开发过程中谨慎使用SVG嵌入式数据URL。如果你遇到任何与SVG相关的问题，可以查看Chrome开发者文档并联系相关开发社区以获取支持。 了解更多有趣的事情：https://blog.ds3783.com/