将SVG转换为SVG base64并嵌入HTML文档中。

Question

将SVG转换为SVG base64并嵌入HTML文档中。

3

给定以下一些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>

我该如何将这个内容转换成base64格式并在我的html文档中使用？

- Lauraponi

你的问题就是我的答案，谢谢！ - jfunk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lauraponi · Accepted Answer

如果您还没有，需要创建一个 .svg 文件，将您的 svg 代码复制到一个文件中并保存为 myFile.svg。确保前三行（xml、DOCTYPE 和 svg）及其属性都存在，否则会出错 - viewbox 的大小可以修改。
将文件拖放到 http://jpillora.com/base64-encoder/
复制以 data:image/svg+xml;base64 开头的代码，并将其粘贴到 html 代码中 img 标签的 src 属性中：

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