SVG的URL编码器
编码要与CSS一起使用的SVG
预习
结果
本工具可将原始SVG代码转换为经URL编码的Data URI,你可以直接将其粘贴到CSS的`background-image`或HTML的`<img src>`中,不需要单独的图片文件或托管服务。这是把小图标和插图直接内联到样式表或标记里的一个快捷方式。
粘贴如下SVG代码即可获得可直接使用的Data URI:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4"/></svg>
→
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...%3E
为什么要编码SVG而不是直接链接文件?
内联的Data URI可以省去一次单独的HTTP请求,这对本来会增加页面额外往返次数的小图标特别有帮助。
编码会改变SVG的外观吗?
不会,编码只改变SVG作为文本的表示方式,渲染出的图像与原始文件完全一致。
可以将输出结果直接用于CSS吗?
可以,编码后的字符串可以直接粘贴到CSS的`background-image`或`content`属性的`url()`中使用。
编码有大小限制吗?
非常大的SVG也可以编码,但会生成很长的Data URI,因此这种方式更适合小图标,而不适合复杂插图。