const img = new Image(); // 创建图片容器
      img.src = imageBase64; //imageBase64 为svg+xml的Base64 文件流
      img.onload = () => {
        // 图片创建后再执行，转Base64过程
        const canvas = document.createElement('canvas');
        canvas.width = 660;  //设置好 宽高  不然图片 不完整
        canvas.height = 300;
        const context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);
        let ImgBase64 = canvas.toDataURL('image/png');
        console.log(ImgBase64, 'Svg 转 png');
        //ImgBase64 为转换后的 png ImgBase64 文件流
                    const img = new Image(); // 创建图片容器      img.src = imageBase64; //imageBase64 为svg+xml的Base64 文件流      img.onload = () => {        // 图片创建后再执行，转Base64过程        const canvas = document.createElement('canvas');        canvas.width = 660;  /...
				
有时我们为了减少对图片的html请求,可以讲图片编码成base64的格式,直接在html中展示图片.讲base64编码后的图片解码我们发现,svg标签,,使用一个浏览器可以解读的标签对图片进行了解析.
格式如下
<img src="data:image/svg+xml;base64,图片的base64编码字符串">
谷歌logo的base64解码
<svg xmlns="http...
使用 SVG 的各种姿势
https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0af5717715124f6dbd765b9c99fb3de6~tplv-k3u1fbpfcp-zoom-1.image
都 2020 了如果你还没有在项目中使用过 SVG，就好比你没有在项目使用过 REACT 或 VUE 一样。
在不考虑兼容性（IE8+）的情况下，SVG
 随时随地将SVG转换为base64
如果像我一样，在开发时使用了大量的SVG，则可能已经到了需要将SVG用作背景图像或嵌入到javascript文件中的地步。 唯一的方法是将SVG文件转换为base64字符串，然后在需要时使用它。 该软件包正是这样做的-将SVG转换为base64。
 该软件包可在浏览器和Node环境中使用。 请继续阅读以了解操作方法。
npm i svg64
yarn add svg64
只需下载此存储库并使用dist文件夹中的文件
或从unpkg.com取消设置
< script src =" https://unpkg.com/svg64 " > </ script >
在浏览器中：
 // This is your SVG DOM element
const svg = document . getElementByI
				
百度地图上有很多标注点(小图标)，有大有小，如果开发自己的项目可能需要把这就默认标注点换成自己的，这就涉及到用图片还是用svg亦或是canvas，那我们想的是用svg来画这么一个图标出来，可能是svg的兼容性比较好吧。
废话不多说，先看效果
这里是通过js把画好的svg动态添加到div容器里 
.box {
    width: 500px;
    height:
我的吾爱破解帖子：XSS新思路-----XSS+SVG漏洞复现
https://www.52pojie.cn/thread-1554237-1-1.html
(出处: 吾爱破解论坛)
调整靶场难度为low
选择文件上传关卡，选择一个图片或者其他文件均可，本关是任意文件上传。我使用的是一个png图片。
打开代理，使用burpsuite进行抓包
    background : url ( 'data:image/svg+xml;utf-8,<?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" xml:space="preserve"><cir
当时就想这个改怎么做呢，经过一番考虑我决定用SVG图，但是TB里边不能直接用，所有就像是不是可以一个DIV 指定一个背景，背景就用SVG转base64的数据来做。
1、首先去阿里那边搞一个SVG 过来：
https://www.iconfont.cn/search/index?q=device
				
写这篇文章的缘由是因为做dashboard的项目，图形是svg的项目,参考的项目使用div写的，然后为了改样式一直在套样式，结果套不出来，也是醉了，整理了一下svg的基本格式，从w3c上整理的，详细的列子参考https://www.w3school.com.cn/svg/svg_rect.asp
svg形状
SVG ...
1、SVG 是一种绘图技术，SVG 的全名叫可缩放矢量图形（Scalable Vector Graphics）。
2、SVG 使用 XML 格式定义图像。
3、可伸缩，不失真。
简单示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" s...
作为一名前端工程师，我们经常会在 H5, 或者小程序中，使用 Canvas 来处理或生成图片。
不过在有些禁用 javascript 场景下，我们往往需要在服务端，预先把图片处理好，再返回给不同的前端进行使用。
这篇文章，主要借用一个自定义装饰 Github markdown 文件的函数， 来给大家介绍，如何在腾讯云SCF上，多快好省的搭建一个图象处理函数。
Requirements
看这篇文章之前，建议同学们可.