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

Question

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

目前我喜欢<object data="foo23.svg">用来插入图像。上面的东西还能用<object>吗？

我的问题的扩展来自也有foo23.pdfand 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文件。