SVG URL 编码器

什么是 SVG？

SVG 代表可缩放矢量图形。SVG 用于为 Web 定义基于矢量的图形，以 XML 格式描述图形。SVG 文件中的每个元素和属性都可以进行动画处理。

• 维基百科 - SVG

如何在 CSS 中使用 SVG？

要在 CSS 中直接使用 SVG 代码，需要先对 SVG 代码进行编码。可以使用此 SVG URL 编码器工具或 JavaScript 函数 encodeURIComponent() 来编码 SVG。编码后的 SVG 数据 URI 可通过 url() 函数与 background-image、border-image 和 mask 等 CSS 属性配合使用。 示例： background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

如何在 CSS 中更改 SVG 的颜色？

要更改 SVG 的颜色，可以组合使用 mask 和 background-color CSS 属性。 以下示例将把 SVG 的颜色更改为蓝色。 示例： mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

什么是 URL？

URL（统一资源定位符）是互联网上唯一资源的地址。它是浏览器用于获取资源（如 HTML 页面、CSS 文档、图片等）的关键机制之一。

• MDN - What is a URL?

如何对 URL 进行编码？

要对 URL 进行编码，可以使用 encodeURIComponent() 函数，该函数通过将特定字符替换为表示其 UTF-8 编码的一个、两个、三个或四个转义序列来编码 URI。与 encodeURI() 相比，此函数编码的字符更多，包括那些属于 URI 语法的字符。

• MDN - encodeURIComponent()

如何解码 URL？

要解码 URL，可以使用 decodeURIComponent() 函数，该函数通过将 %XX 形式的每个转义序列视为一个 UTF-8 代码单元（一个字节）来解码 URI。在 UTF-8 中，第一个字节的前导 1 位数（可能为 0（用于 1 字节 ASCII 字符）、2、3 或 4）表示该字符的字节数。

• MDN - decodeURIComponent()