转换后台返回的的svg

this.workflowService.getProcessInstanceSvgById(this.processInstanceId).subscribe(res => {
    this.myImg = `data:image/svg+xml;base64,${window.btoa(res)}`;
});
 const myImg = document.getElementById('myImg'); // 获取Img
 // #### Canvas 转 Base64
 function canvasBase64() {
   const canvas = document.getElementById('myCanvas');
   const ImgBase64 = canvas.toDataURL('image/png');
   console.log(ImgBase64, 'Canvas 转 Base64');
   myImg.src = ImgBase64;
 // #### Svg 转 Base64
 function svgBase64() {
   const svg = document.getElementById('mySvg');
   const s = new XMLSerializer().serializeToString(svg);
   const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`;
   console.log(ImgBase64, 'Svg 转 Base64');
   myImg.src = ImgBase64;
 // #### Svg 转 png
 function svgPng() {
   const svg = document.getElementById('mySvg');
   const s = new XMLSerializer().serializeToString(svg);
   const src = `data:image/svg+xml;base64,${window.btoa(s)}`;
   const img = new Image(); // 创建图片容器承载过渡
   img.src = src;
   img.onload = () => {
     // 图片创建后再执行，转Base64过程
     const canvas = document.createElement('canvas');
     canvas.width = img.width;
     canvas.height = img.height;
     const context = canvas.getContext('2d');
     context.drawImage(img, 0, 0);
     const ImgBase64 = canvas.toDataURL('image/png');
     console.log(ImgBase64, 'Svg 转 png');
     myImg.src = ImgBase64;
                    转换页面上的svg代码svgBase64(): void {     // 找到页面上面的svg元素     const svg = document.getElementById('svg');     // 将整个 document 对象序列化为一个 XML 字符串     const s = new XMLSerializer().serializeToString(svg);     // 通过window.btoa() 方法用于创建一个 base-64 编码的字符串     con.
转换链接：https://www.sojson.com/image2base64.html
2、使用两者区别
（1）使用一个63.8k的svg与使用转base64之后的两个文件
a、使用svg
b、使用base64
（2）使用一个225k的svg与使用转base64之后的两个文件
a、使用svg
b、使用base64
3、svg转base64有什么好处吗？
（1）减少http
一个简单的工具，可以将SVG转换为Base64。
它是基于开放源代码的波纹管开发的，并添加了“浏览文件”功能。
https://github.com/yoksel/url-encoder/ *用法：1.插入SVG代码或浏览SVG文件。
2.复制代码并使用。
3.享受！
您也可以将编码的SVG放在“接受编码”字段中，以将其解码回去。
*注意：安装扩展程序后，不要忘记将图标固定在浏览器工具栏上。
				
文章目录SVG 简介什么是SVGSVG有哪些优势SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG展示效果
SVG 简介
什么是SVG
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。
SVG有哪些优势
SVG 可被非常多的工具读取和修改
SVG 与JPE
我们需要获取目标SVG： 
 var svg = document . querySelector ( 'svg' ) ;
 比我们必须创建宽度和高度完全像我们要转换的svg的画布： 
 var canvas = document . createElement ( 'canvas' ) ;
canvas . width = svg . getBoundingClientRect ( ) . width ;
canvas . height = svg . getBoundingClientRect ( ) . height ;
body . appendChild ( canvas ) ;
 ...魔术来了：
 XMLSerializer.serializeToSt
				
令人发指的构建包
看了很多相关的技术文章，大多数用 html2canvas.js 和 canvas.js 第三方包实现，有些用了像 D3.js 这样更大型的构建包，而实际用到的功能，却只是其中 1% 都不足，简直就是令人发指。
综合文章中转换过程的设计思想，自己干，10行代码搞定！
svg 先转 canvas 再转 base64
一：了解一下 canvas 转 Base64
 con...
public static void saveSvgToPng(String content, String path) {
        InputStream svgFileStream;
这个插件需要~0.4.5
 如果您以前从未使用过 ，请务必查看《指南》，因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后，可以使用以下命令安装此插件： 
npm install grunt-base64-encode-images --save-dev
 插件安装完成后，可以使用以下JavaScript代码在您的Gruntfile中启用该插件：
 grunt . loadNpmTasks ( 'grunt-base64-encode-images' ) ;
“ base64_encode_images”任务
在项目的Gruntfile中，将名为base64_encode_images的部分添加到传递给grunt.initConfig()
				
我们在开发系统时，处理图片上传是不可避免的，例如使用thinkphp的肯定很熟悉import(“@.ORG.UploadFile”);的上传方式，今天我们来讲一个使用html5 base64上传图片的方法。
主要是用到html5 FileReader的接口，既然是html5的，所支持的浏览器我就不多说啦
可以大概的讲一下思路，其实也挺简单。选择了图片之后，js会先把已选的图片转化为base64格式，然后通过ajax上传到服务器端，服务器端再转化为图片，进行储存的一个过程。
咱们先看看前端的代码。
html部分
<input type=”file” id=”imagesfile”>
 图片到base64编码的字符串批量转换器。 加快CSS开发速度，使用base64编码图片准备背景图像属性。 
 允许批量转换在给定路径下找到的图片，并在CSS或CSV中打包base64编码的字符串
支持png，jpg，gif（还包括动画gif），svg的转换
具有文档化界面的控制台应用程序（包括--help ）
 跨平台：使用Python，可以在Linux，Windows和Mac上运行
仓库结构：
 源文件夹包含Python源代码。
 这段代码可以同时由Python 2.x和Python 3.x执行。
 源文件夹还包含一个与一起使用的setup.py文件，用于生成可执行文件。
 docs文件夹包含用于本文档的信息。
-h --help显示控制台应用程序的帮助
-p / --path路径[-m / --mode模式{css，csv} ]从给定的文件夹路径开始，
Include the following files in your page:
script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js">script> 
script type="text/javascript" sr
# 获取SVG的宽度和高度
width = float(root.get('width').strip('px'))
height = float(root.get('height').strip('px'))
# 修改SVG的缩放比例
scale = 2.0
root.set('width', str(width * scale) + 'px')
root.set('height', str(height * scale) + 'px')
# 保存修改后的SVG文件
tree.write('example_scaled.svg')
这段代码可以将SVG文件的宽度和高度缩放两倍，并保存为新的文件。
      let left = document.getElementById('left');
      // 获取 移动区域 的 宽度
      let line = document.getElementById('line');
      // 获取 右边区域 的 宽度
      let right = document.getElementById('right');
      // 移动区域鼠标移入事件
      line.onmousedown = function(e) {
        // 移动的距离
        let lineLeft = e.clientX;
        document.onmousemove = function(e) {
          // 移动的位置 （侧边栏的宽度 + 移动的宽度）
          let diffVal = 276 + (e.clientX -lineLeft);
          // 移动区间的范围 [276, 740]
          if(diffVal >= 276 && diffVal <= 840) {
            // 移动区域距离左边的距离
            line.style.left = diffV