base64 格式的 SVG 衍生出来的一些问题

1、SVG 文件如何转成 base64

原理很简单，其实是借助了 FileReader 里的 readAsDataURL 将文件读取成 base64 的 URL 路径

代码：

<input type="file" accept=".svg"/>
<script>
  window.onload=function(){
      document.querySelector('input').onchange=function(event){
            const files = event.target.files;
          if(files && files.length){
          // https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/FileReader
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                  console.log('base64Url：', reader.result);
            }
        }else{
             console.log("没有选取文件")
        }
    }
  }
</script>

以上将文件转成 base64 图片路径的，方法适用于任何格式的图片

2、svg 转成的 base64 如何展示在页面

2.1、无所谓页面展示什么标签

使用 img 图片将 src 的值设置 base64 就可

2.2、必须使用 svg 标签

const base64Url = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMMCwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgIE01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K'
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL);
xhr.addEventListener('load', function (ev) {
    const xml = ev.target.response; // 由浏览器得到了svg 的字符串
      // 创建一个解析器，将svg 的字符串转成dom 元素
    const dom = new DOMParser();
    const svg = dom.parseFromString(xml, 'image/svg+xml');
    // 设置主题色，或者设置其他的属性
     svg.rootElement.setAttribute('fill', '#478aee');
  console.log(svg.rootElement);
});
xhr.send(null);

3、如何设置 svg 转成的 base64 的主题色并且不通过请求

因为base64格式的图片路径分为：【Data URL scheme Type】+【base编码之后的字符】

思路：

1. 拿到 base64Url 中的经过 base64 编码之后的数据
2. 将拿到的数据进行 base64 解码反编译
3. 动态创建一个元素，将解码之后的字符串，通过 innerHTML 解析。
4. 解析完拿到 svg 元素，通过 setAttribute 设置 fill 填充色（同样也可以设置其他的属性）
5. 通过 outerHTML 拿到完整的 svg 字符串
6. 再将 svg 字符串渲染到页面

   const dataURL = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMMCwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgIE01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K';
   const encoded = img.src.substring(26);
   const wrapper = document.createElement('div');
   wrapper.innerHTML = atob(encoded);
   const newSvg = wrapper.querySelector('svg');
   newSvg.setAttribute("fill", "#478aee");
   console.log(newSvg.outerHTML);