URL编码SVG使用时矩形圆角丢失 如何正常保留圆角效果

完全可以。URL编码本身不会破坏SVG的任何渲染效果，圆角丢失问题和URL编码机制无关，是编码后生成的data URI存在语法错误导致的。

圆角丢失的本质是生成的data URI存在转义遗漏：stroke-width属性前的双引号没有被正确编码为%22，浏览器解析SVG属性时会在这个位置提前截断，后续的ry圆角属性无法被正常识别，最终导致圆角效果丢失。

只要保证SVG所有属性的引号、特殊字符（比如颜色值前的#）被正确转义即可，这里提供两种低出错率的写法，直接适配列表项目符号的使用场景：

• 写法1：全量正确转义版本（兼容所有浏览器）

/* 列表基础样式重置 */
li {
  list-style: none;
  padding-left: 30px;
  position: relative;
}
/* 用伪元素挂载SVG作为项目符号 */
li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml,%3Csvg width="24" height="24" version="1.1" viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg"%3E%3Crect x=".375" y=".375" width="5.6" height="5.6" rx="0" ry="1.7089" fill="none" stroke="%23007bc4" stroke-width="%22.75%22/%3E%3C/svg%3E');
}

• 写法2：简化写法（现代浏览器全兼容，出错率更低）
  不需要全量编码所有字符，只需要把SVG内部的属性引号换成单引号，仅转义#为%23即可，代码可读性更高：

li::before {
  /* 其余定位、尺寸样式和写法1一致 */
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 6.35 6.35' xmlns='http://www.w3.org/2000/svg'><rect x='.375' y='.375' width='5.6' height='5.6' rx='0' ry='1.7089' fill='none' stroke='%23007bc4' stroke-width='.75'/></svg>");
}

• SVG作为data URI使用时，颜色值前的#必须编码为%23，否则会被浏览器识别为URL的锚点片段，导致颜色失效
• 不需要在data URI里携带XML声明头（<?xml version="1.0" encoding="UTF-8"?>），不会影响渲染，还能减少代码长度

内容的提问来源于stack exchange，提问作者lijeles952