如何在HTML中使用SVG图像，以便允许下载PNG版本

Question

我有很多像foo23.svg的.svg图像。也有相应的foo23.png。我想在我的HTML中使用SVG进行网页浏览，但是我希望当您右键单击(或control-click)图像时，可以选择下载PNG。这能做到吗?

目前我喜欢使用<object data="foo23.svg">插入图像。

还能用<object>吗?

我的问题的延伸来自也有foo23.pdf和foo23.eps。点击鼠标右键可以跳转到多个下载选项吗?

Answer 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文件