如何以允许下载 PNG 版本的方式在 HTML 中使用 SVG 图像？答案

【问题标题】：How to use SVG images in HTML in such a way as to allow download of PNG version?如何以允许下载 PNG 版本的方式在 HTML 中使用 SVG 图像？
【发布时间】：2015-07-27 08:32:44
【问题描述】：

我有很多.svg 图像，例如foo23.svg。我也有对应的foo23.png。我想在我的 HTML 中使用 SVG 进行网页浏览，但我想拥有它，以便当您右键单击（或按住 Control 单击）图像时，您可以选择下载 PNG。这个可以吗？

目前我喜欢使用<object data="foo23.svg"> 插入图像。以上还可以使用<object>吗？

我的问题的扩展来自foo23.pdf 和foo23.eps。右击可以导致多个下载选项吗？

【问题讨论】：

标签： html svg download html-object

【解决方案1】：

这是未经测试的，但我的处理方法是：

HTML：

<img src="foo23.png" />

CSS（由 https://stackoverflow.com/a/21421125/5158636 提供）：

img {
    background-image: url(foo23.svg);
    background-repeat: no-repeat;
    height: 0;
    width: 0;
    padding: 35px 120px; // adjust that depend on your image size
}

这样显示的图像应该是 .svg 文件（不适用于所有浏览器：http://caniuse.com/#feat=svg-css），但系统提示您保存的文件应该是 .png 文件。

【讨论】：