如何仅用CSS实现HTML特殊字符的SVG Data URI背景？

在实际项目中。你可能会遇到以下痛点：

• 想要为页面添加独特的纹理或图案，但又不想额外请求图片资源。
• 需要在不同分辨率下保持背景的清晰度，却不想为每种尺寸准备多张位图。
• 希望只使用 CSS / HTML 就能实现视觉效果，避免引入 JavaScript 或额外的建立步骤。不过，

如果你正为这些问题头疼。那么「仅用 CSS 实现 HTML 特殊字符的 SVG Data URI 背景」正是你的方法。

什么是 SVG Data URI？

SVG Data URI 是把一段 SVG 代码直接编码成字符串，接下来通过 data:image/svg+xml;charset=utf8, 前缀嵌入到 CSS 的方式。这样浏览器在渲染时会把它当作一张内联图片处理，省去网络请求。

创建包含特殊字符的 SVG 瓦片

1️⃣ 编写最小化的 SVG 代码

下面这段示例定义了一个宽 20 px、高 25 px 的瓦片。并在其中绘制了一个红色字符「░」：

你可以随意替换字符、颜色或字体大小，只要保持 SVG 合法即可。