如何在SVG中使用unicode字符作为图像中的数据uri嵌入？

基于此SVG

<svg xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 -1463.5321025647136 1149.4431479097798 2427.064205129427"
     style="width: 2.645ex; height: 5.568ex; vertical-align: -2.367ex; margin: 1px 0px;">
  <defs id="MathJax_SVG_glyphs">
    <path id="MJMATHI-78" stroke-width="10" d="M52 289Q59 331 106 386T222 442Q257 442 286 424T329 379Q371 442 430 442Q467 442 494 420T522 361Q522 332 508 314T481 292T458 288Q439 288 427 299T415 328Q415 374 465 391Q454 404 425 404Q412 404 406 402Q368 386 350 336Q290 115 290 78Q290 50 306 38T341 26Q378 26 414 59T463 140Q466 150 469 151T485 153H489Q504 153 504 145Q504 144 502 134Q486 77 440 33T333 -11Q263 -11 227 52Q186 -10 133 -10H127Q78 -10 57 16T35 71Q35 103 54 123T99 143Q142 143 142 101Q142 81 130 66T107 46T94 41L91 40Q91 39 97 36T113 29T132 26Q168 26 194 71Q203 87 217 139T245 247T261 313Q266 340 266 352Q266 380 251 392T217 404Q177 404 142 372T93 290Q91 281 88 280T72 278H58Q52 284 52 289Z"></path>
  </defs>
  <g stroke="black" fill="black" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
    <g transform="translate(120,0)">
      <rect stroke="none" width="909" height="60" x="0" y="220"></rect>
      <g transform="translate(264,730)">
        <text font-family="STIXGeneral,'Arial Unicode MS',serif" font-style="" font-weight="" stroke="none" transform="scale(42.38250390723797) matrix(1 0 0 -1 0 0)">ⅆ</text>
      </g>
      <g transform="translate(60,-639)">
        <text font-family="STIXGeneral,'Arial Unicode MS',serif" font-style="" font-weight="" stroke="none" transform="scale(42.38250390723797) matrix(1 0 0 -1 0 0)">ⅆ</text>
        <use transform="scale(0.7071067811865476)" xlink:href="#MJMATHI-78" x="539" y="0"></use>
      </g>
    </g>
  </g>
</svg>

ⅆ
ⅆ

我创造了一个形象

<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%20-1463.5321025647136%201149.4431479097798%202427.064205129427%22%3E%3Cdefs%3E%3Cpath%20id%3D%22MJMATHI-78%22%20stroke-width%3D%2210%22%20d%3D%22M52%20289Q59%20331%20106%20386T222%20442Q257%20442%20286%20424T329%20379Q371%20442%20430%20442Q467%20442%20494%20420T522%20361Q522%20332%20508%20314T481%20292T458%20288Q439%20288%20427%20299T415%20328Q415%20374%20465%20391Q454%20404%20425%20404Q412%20404%20406%20402Q368%20386%20350%20336Q290%20115%20290%2078Q290%2050%20306%2038T341%2026Q378%2026%20414%2059T463%20140Q466%20150%20469%20151T485%20153H489Q504%20153%20504%20145Q504%20144%20502%20134Q486%2077%20440%2033T333%20-11Q263%20-11%20227%2052Q186%20-10%20133%20-10H127Q78%20-10%2057%2016T35%2071Q35%20103%2054%20123T99%20143Q142%20143%20142%20101Q142%2081%20130%2066T107%2046T94%2041L91%2040Q91%2039%2097%2036T113%2029T132%2026Q168%2026%20194%2071Q203%2087%20217%20139T245%20247T261%20313Q266%20340%20266%20352Q266%20380%20251%20392T217%20404Q177%20404%20142%20372T93%20290Q91%20281%2088%20280T72%20278H58Q52%20284%2052%20289Z%22%3E%3C/path%3E%3C/defs%3E%3Cg%20stroke%3D%22black%22%20fill%3D%22black%22%20stroke-width%3D%220%22%20transform%3D%22matrix%281%200%200%20-1%200%200%29%22%3E%3Cg%20transform%3D%22translate%28120%2C0%29%22%3E%3Crect%20stroke%3D%22none%22%20width%3D%22909%22%20height%3D%2260%22%20x%3D%220%22%20y%3D%22220%22%3E%3C/rect%3E%3Cg%20transform%3D%22translate%28264%2C730%29%22%3E%3Ctext%20font-family%3D%22STIXGeneral%2C%27Arial%20Unicode%20MS%27%2Cserif%22%20font-style%3D%22%22%20font-weight%3D%22%22%20stroke%3D%22none%22%20transform%3D%22scale%2842.38250390723797%29%20matrix%281%200%200%20-1%200%200%29%22%3E%u2146%3C/text%3E%3C/g%3E%3Cg%20transform%3D%22translate%2860%2C-639%29%22%3E%3Ctext%20font-family%3D%22STIXGeneral%2C%27Arial%20Unicode%20MS%27%2Cserif%22%20font-style%3D%22%22%20font-weight%3D%22%22%20stroke%3D%22none%22%20transform%3D%22scale%2842.38250390723797%29%20matrix%281%200%200%20-1%200%200%29%22%3E%u2146%3C/text%3E%3Cuse%20transform%3D%22scale%280.7071067811865476%29%22%20xlink%3Ahref%3D%22%23MJMATHI-78%22%20x%3D%22539%22%20y%3D%220%22%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 2.645ex; height: 5.568ex; vertical-align: -2.367ex; margin: 1px 0px;">

为什么不显示差异unicode字符？我怎样才能做到

---

请注意，我使用的是默认安装在OS X中的。

您的unicode字符使用（非标准）%uxxx格式编码这些unicode字符。对于以下两个字符：

%u2146

有关更多信息，请参阅

解码时，它将转换为完整的unicode字符。但是，编码的SVG中的XML头声明编码为UTF-8

<?xml version="1.0" encoding="UTF-8"?>

---

我想你需要调和这种矛盾。

只要用

&xXXXX>替换
%uxxx
，例如
%u2146
→ <代码>ⅆ

完整示例：

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -1463.5321025647136 1149.4431479097798 2427.064205129427"><defs><path id="MJMATHI-78" stroke-width="10" d="M52 289Q59 331 106 386T222 442Q257 442 286 424T329 379Q371 442 430 442Q467 442 494 420T522 361Q522 332 508 314T481 292T458 288Q439 288 427 299T415 328Q415 374 465 391Q454 404 425 404Q412 404 406 402Q368 386 350 336Q290 115 290 78Q290 50 306 38T341 26Q378 26 414 59T463 140Q466 150 469 151T485 153H489Q504 153 504 145Q504 144 502 134Q486 77 440 33T333 -11Q263 -11 227 52Q186 -10 133 -10H127Q78 -10 57 16T35 71Q35 103 54 123T99 143Q142 143 142 101Q142 81 130 66T107 46T94 41L91 40Q91 39 97 36T113 29T132 26Q168 26 194 71Q203 87 217 139T245 247T261 313Q266 340 266 352Q266 380 251 392T217 404Q177 404 142 372T93 290Q91 281 88 280T72 278H58Q52 284 52 289Z"></path></defs><g stroke="black" fill="black" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g transform="translate(120,0)"><rect stroke="none" width="909" height="60" x="0" y="220"></rect><g transform="translate(264,730)"><text font-family="STIXGeneral,'Arial Unicode MS',serif" font-style="" font-weight="" stroke="none" transform="scale(42.38250390723797) matrix(1 0 0 -1 0 0)">&#x2146;</text></g><g transform="translate(60,-639)"><text font-family="STIXGeneral,'Arial Unicode MS',serif" font-style="" font-weight="" stroke="none" transform="scale(42.38250390723797) matrix(1 0 0 -1 0 0)">&#x2146;</text><use transform="scale(0.7071067811865476)" xlink:href="#MJMATHI-78" x="539" y="0"></use></g></g></g></svg>

ⅆⅆ；

img标签中的相同内容（base64编码）：



看

相同，但使用encodeURIComponent（）：



看

这不是有效的URL编码，它应该是UTF-8-URL编码的：

%E2%85%86

您是如何生成数据URL的？如果您在某个时候使用了JavaScript
escape（）
函数，那么它实际上应该是
encodeURIComponent（）
。
没错，我确实使用了
escape（）
。但将其更改为建议的方法并没有改变输出。请参阅：在Firefox中添加缺少的
xmlns:xlink=”时对我有效http://www.w3.org/1999/xlink
namespace（否则XML不会解析）。不过，这在Chrome中不起作用。字符的大小是错误的。这是一个Chrome bug吗？你能提出一个将XML嵌入
img
dataURI的工作示例吗？你的实体替换解决方案在Firefox上运行正常。你知道为什么它会在铬上断裂吗？谢谢
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%20-1463.5321025647136%201149.4431479097798%202427.064205129427%22%3E%3Cdefs%3E%3Cpath%20id%3D%22MJMATHI-78%22%20stroke-width%3D%2210%22%20d%3D%22M52%20289Q59%20331%20106%20386T222%20442Q257%20442%20286%20424T329%20379Q371%20442%20430%20442Q467%20442%20494%20420T522%20361Q522%20332%20508%20314T481%20292T458%20288Q439%20288%20427%20299T415%20328Q415%20374%20465%20391Q454%20404%20425%20404Q412%20404%20406%20402Q368%20386%20350%20336Q290%20115%20290%2078Q290%2050%20306%2038T341%2026Q378%2026%20414%2059T463%20140Q466%20150%20469%20151T485%20153H489Q504%20153%20504%20145Q504%20144%20502%20134Q486%2077%20440%2033T333%20-11Q263%20-11%20227%2052Q186%20-10%20133%20-10H127Q78%20-10%2057%2016T35%2071Q35%20103%2054%20123T99%20143Q142%20143%20142%20101Q142%2081%20130%2066T107%2046T94%2041L91%2040Q91%2039%2097%2036T113%2029T132%2026Q168%2026%20194%2071Q203%2087%20217%20139T245%20247T261%20313Q266%20340%20266%20352Q266%20380%20251%20392T217%20404Q177%20404%20142%20372T93%20290Q91%20281%2088%20280T72%20278H58Q52%20284%2052%20289Z%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%20stroke%3D%22black%22%20fill%3D%22black%22%20stroke-width%3D%220%22%20transform%3D%22matrix(1%200%200%20-1%200%200)%22%3E%3Cg%20transform%3D%22translate(120%2C0)%22%3E%3Crect%20stroke%3D%22none%22%20width%3D%22909%22%20height%3D%2260%22%20x%3D%220%22%20y%3D%22220%22%3E%3C%2Frect%3E%3Cg%20transform%3D%22translate(264%2C730)%22%3E%3Ctext%20font-family%3D%22STIXGeneral%2C'Arial%20Unicode%20MS'%2Cserif%22%20font-style%3D%22%22%20font-weight%3D%22%22%20stroke%3D%22none%22%20transform%3D%22scale(42.38250390723797)%20matrix(1%200%200%20-1%200%200)%22%3E%26%23x2146%3B%3C%2Ftext%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(60%2C-639)%22%3E%3Ctext%20font-family%3D%22STIXGeneral%2C'Arial%20Unicode%20MS'%2Cserif%22%20font-style%3D%22%22%20font-weight%3D%22%22%20stroke%3D%22none%22%20transform%3D%22scale(42.38250390723797)%20matrix(1%200%200%20-1%200%200)%22%3E%26%23x2146%3B%3C%2Ftext%3E%3Cuse%20transform%3D%22scale(0.7071067811865476)%22%20xlink%3Ahref%3D%22%23MJMATHI-78%22%20x%3D%22539%22%20y%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A">

%u2146

%E2%85%86