html语言%3chr %3e,[html5]CSS样式中SVG引用方法兼容性考量-优快云博客

本文介绍了一种使用 SVG (Scalable Vector Graphics) 的方法，并展示了如何将其编码为 Base64 字符串用作背景图像。文中还提供了几个在线资源链接，包括获取 SVG 数据 URL 的 GitHub 仓库、SVG 的官方规范以及字符编码转换工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG

Scalable Vector Graphics (SVG)

.svg {

background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2C10L2%2C20L5%2C20L13%2C25L13%2C5L5%2C10L5%2C10Z'%2F%3E%3Cpath%20d%3D'M18%2C10C%2022%2C12%2022%2C18%2018%2C20'%20%2F%3E%3Cpath%20d%3D'M22%2C6C%2028%2C10%2028%2C20%2022%2C24'%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

}

.svg {

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IUR

PQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy

9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9

zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjUwOCIgaGVpZ2h0PSIyNTIu

NyIgdmlld0JveD0iMCAwIDI1MDggMjUyLjciPjxwb2x5Z29uIHBvaW50cz0iNCwyNTIuNyAyNTA0LDAgMjUwNCwyNTIuNyIgc3R5

bGU9ImZpbGw6I2U2ZWJlYSIgLz48L3N2Zz4=');

}

.svg {

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cpolygon points='4,252.7 2504,0 2504,252.7' style='fill:%23e6ebea'/%3E%3C/svg%3E");

}

SVG引用：https://github.com/pfan123/svgtodataurl

SVG：https://www.w3.org/TR/SVG/

编码转换：https://meyerweb.com/eric/tools/dencoder/

---------------------

作者：阿酷tony

来源：优快云

原文：https://blog.youkuaiyun.com/ffffffff8/article/details/83895645