在一些情况下，我们想要将类似d3.js之【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net类的框架渲染的svg保存到本地，这要怎么未经授权，禁止复制转载。【版权所有，侵权必究】实现呢？其实非常简单。

首先，让我们创建一个用来下载的函数，这个【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。函数不仅仅支持svg，甚至可以支持任意内【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。容。

function download(href,  name) {
    var a = document.createElement('a');

    a.download = name;
    a.href = href;

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

我们创建了一个通用的下载函数，但是这个h本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ref只支持url，所以，我们要创建一个【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】函数来获得svg的url。

function createObjectUrl(content, type) {
  return window.URL.createObjectURL(new Blob(content, { type: type }))
}

这个函数的content是可以支持多个类【原创内容，转载请注明出处】原创内容，盗版必究。型的，因为它会被传入new Blob中，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。但是需要注意，如果传入字符串，要传入一个本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net数组。

download(createObjectUrl(['<div></div>'], 'text/html'), 'index.html')

现在就好办了，我们只要把svg元素的ou本文版权归作者所有，未经授权不得转载。【作者：唐霜】terHTML读出来，然后传给downl【转载请注明来源】【作者：唐霜】oad函数就可以了。

download(createObjectUrl([document.querySelector('svg').outerHTML, 'image/svg'), 'some.svg')

对上面操作进行简单封装【未经授权禁止转载】

function downloadSvg(svg, name) {
  download(createObjectUrl([document.querySelector(svg).outerHTML, 'image/svg'), name)
}

如果要下载为其他类型的图片，那在down原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。load之前，要进行一个转码，我们用ca著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。nvas作为中转，把svg放到一个can未经授权，禁止复制转载。【未经授权禁止转载】vas中之后在下载。

function downloadSvgAsPng(svg, name) {
  const text = document.querySelector(svg).outerHTML
  const { width, height } = svg // 或者通过其他方式也可以获得宽高
  const image = new Image()
  image.onload = () => {
    const canvas = document.createElement('canvas')
    canvas.width = width
    cnavas.height = height
    const context = canvas.getContext('2d')
    context.fillStyle = context.createPattern(image, 'repeat')
    context.fillRect(0, 0, width, height)
    download(canvas.toDataURL('image/png'),  name)
  }
  image.src = 'data:image/svg+xml;base64,' + btoa(text)
}

此处我们没有用到createObject【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。Url，因为我们直接将svg转化为bas【本文受版权保护】本文版权归作者所有，未经授权不得转载。e64然后渲染到canvas里面，变成了著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net位图。

最后，需要注意的是，使用这种方法，我们必【作者：唐霜】【转载请注明来源】须在svg内完全定义自身的样式，如果你是转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。在svg之外定义了svg内部元素的样式，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net那么下载的svg就不包含这部分样式，那自未经授权，禁止复制转载。【本文首发于唐霜的博客】然就会有样式问题。