1

I have lots of .svg images like foo23.svg. I also have corresponding foo23.png. I'd like to use the SVG in my HTML for web browsing, but I'd like to have it so that when you right-click (or control-click) on the image, you have the option to download the PNG. Can this be done?

Currently I like using <object data="foo23.svg"> to insert the image. Can the above be done still using <object>?

An extension of my question comes from also having foo23.pdf and foo23.eps. Can right-clicking lead to several download options?

alex.jordan
  • 296
  • 2
  • 11

1 Answers1

3

This is untested but the way I would approach this is:

HTML:

<img src="foo23.png" />

CSS (courtesy of 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
}

That way the image that gets displayed should be the .svg file (won't work in all browsers: http://caniuse.com/#feat=svg-css) but the file you get prompted to save should be the .png file.

Community
  • 1
  • 1
tschumann
  • 2,776
  • 3
  • 26
  • 42