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

Question

基于此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字符？我怎样才能实现呢？

http://jsfiddle.net/zB8E2/

请注意我默认使用OS X中安装的STIXFonts。

Answer 1

只需将%uXXXX替换为&#xXXXX;，例如%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编码）中的相同内容：

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8v d3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkv eGxpbmsiIHZpZXdCb3g9IjAgLTE0NjMuNTMyMTAyNTY0NzEzNiAxMTQ5LjQ0MzE0NzkwOTc3OTgg MjQyNy4wNjQyMDUxMjk0MjciPjxkZWZzPjxwYXRoIGlkPSJNSk1BVEhJLTc4IiBzdHJva2Utd2lk dGg9IjEwIiBkPSJNNTIgMjg5UTU5IDMzMSAxMDYgMzg2VDIyMiA0NDJRMjU3IDQ0MiAyODYgNDI0 VDMyOSAzNzlRMzcxIDQ0MiA0MzAgNDQyUTQ2NyA0NDIgNDk0IDQyMFQ1MjIgMzYxUTUyMiAzMzIg NTA4IDMxNFQ0ODEgMjkyVDQ1OCAyODhRNDM5IDI4OCA0MjcgMjk5VDQxNSAzMjhRNDE1IDM3NCA0 NjUgMzkxUTQ1NCA0MDQgNDI1IDQwNFE0MTIgNDA0IDQwNiA0MDJRMzY4IDM4NiAzNTAgMzM2UTI5 MCAxMTUgMjkwIDc4UTI5MCA1MCAzMDYgMzhUMzQxIDI2UTM3OCAyNiA0MTQgNTlUNDYzIDE0MFE0 NjYgMTUwIDQ2OSAxNTFUNDg1IDE1M0g0ODlRNTA0IDE1MyA1MDQgMTQ1UTUwNCAxNDQgNTAyIDEz NFE0ODYgNzcgNDQwIDMzVDMzMyAtMTFRMjYzIC0xMSAyMjcgNTJRMTg2IC0xMCAxMzMgLTEwSDEy N1E3OCAtMTAgNTcgMTZUMzUgNzFRMzUgMTAzIDU0IDEyM1Q5OSAxNDNRMTQyIDE0MyAxNDIgMTAx UTE0MiA4MSAxMzAgNjZUMTA3IDQ2VDk0IDQxTDkxIDQwUTkxIDM5IDk3IDM2VDExMyAyOVQxMzIg MjZRMTY4IDI2IDE5NCA3MVEyMDMgODcgMjE3IDEzOVQyNDUgMjQ3VDI2MSAzMTNRMjY2IDM0MCAy NjYgMzUyUTI2NiAzODAgMjUxIDM5MlQyMTcgNDA0UTE3NyA0MDQgMTQyIDM3MlQ5MyAyOTBROTEg MjgxIDg4IDI4MFQ3MiAyNzhINThRNTIgMjg0IDUyIDI4OVoiPjwvcGF0aD48L2RlZnM+PGcgc3Ry b2tlPSJibGFjayIgZmlsbD0iYmxhY2siIHN0cm9rZS13aWR0aD0iMCIgdHJhbnNmb3JtPSJtYXRy aXgoMSAwIDAgLTEgMCAwKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDApIj48cmVjdCBz dHJva2U9Im5vbmUiIHdpZHRoPSI5MDkiIGhlaWdodD0iNjAiIHg9IjAiIHk9IjIyMCI+PC9yZWN0 PjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2NCw3MzApIj48dGV4dCBmb250LWZhbWlseT0iU1RJ WEdlbmVyYWwsJ0FyaWFsIFVuaWNvZGUgTVMnLHNlcmlmIiBmb250LXN0eWxlPSIiIGZvbnQtd2Vp Z2h0PSIiIHN0cm9rZT0ibm9uZSIgdHJhbnNmb3JtPSJzY2FsZSg0Mi4zODI1MDM5MDcyMzc5Nykg bWF0cml4KDEgMCAwIC0xIDAgMCkiPiYjeDIxNDY7PC90ZXh0PjwvZz48ZyB0cmFuc2Zvcm09InRy YW5zbGF0ZSg2MCwtNjM5KSI+PHRleHQgZm9udC1mYW1pbHk9IlNUSVhHZW5lcmFsLCdBcmlhbCBV bmljb2RlIE1TJyxzZXJpZiIgZm9udC1zdHlsZT0iIiBmb250LXdlaWdodD0iIiBzdHJva2U9Im5v bmUiIHRyYW5zZm9ybT0ic2NhbGUoNDIuMzgyNTAzOTA3MjM3OTcpIG1hdHJpeCgxIDAgMCAtMSAw IDApIj4mI3gyMTQ2OzwvdGV4dD48dXNlIHRyYW5zZm9ybT0ic2NhbGUoMC43MDcxMDY3ODExODY1 NDc2KSIgeGxpbms6aHJlZj0iI01KTUFUSEktNzgiIHg9IjUzOSIgeT0iMCI+PC91c2U+PC9nPjwv Zz48L2c+PC9zdmc+">

请参阅fiddle。

相同但使用encodeURIComponent（）：

<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">

请参阅fiddle。

Answer 2

%u2146

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

%E2%85%86

您是如何制作数据网址的？如果您在某个时候使用了JavaScript escape()函数，那么它实际上应该是encodeURIComponent()。

Answer 3

您的unicode字符使用（非标准）％uXXXX格式对这些unicode字符进行编码。这两个字符是：

%u2146

有关详细信息，请参阅https://en.wikipedia.org/wiki/Percent-encoding。

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

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

我怀疑你需要调和这个矛盾。