将svg转换为svg base64并将其嵌入HTML文档中

Question

在这里给出一些svg代码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16">
<path d="M15.025,15.2017972 L10.8665842,11.0433814 C12.9070491,8.61548644 12.8037344,4.99947266 10.5308115,2.72654972 C8.12874516,0.324483427 4.22861601,0.324483427 1.82654972,2.72654972 C-0.575516573,5.12861601 -0.575516573,9.02874516 1.82654972,11.4308115 C3.01466853,12.6189303 4.61604606,13.2388183 6.19159492,13.2388183 C7.61217176,13.2388183 9.00691993,12.7480736 10.1692101,11.7924128 L14.3276259,15.9508287 L15.025,15.2017972 Z M2.54975248,10.7076087 C0.560944899,8.71880112 0.560944899,5.46438872 2.54975248,3.47558115 C3.5570706,2.46826302 4.84850409,1.9775183 6.16576625,1.9775183 C7.48302841,1.9775183 8.80029057,2.46826302 9.78178003,3.47558115 C11.7705876,5.46438872 11.7705876,8.71880112 9.78178003,10.7076087 C7.79297245,12.6964163 4.53856005,12.6964163 2.54975248,10.7076087 Z"/>
</svg>

如何在base 64中对其进行编码并在html文档中使用它？

Answer 1

1. 如果还没有，请通过将svg代码复制到另存为myFile.svg的文件中来创建.svg文件。 确保前三行（xml，DOCTYPE和svg带有其属性，否则将中断-可以修改视图框的大小）
2. 将文件拖放到http://jpillora.com/base64-encoder/
3. 复制以data：image / svg + xml; base64开头的代码，并将其img标记的src属性粘贴到您的html代码中：

 <img id="myId" width="16px" height="16px" alt="search button" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI++DQo=" />