Any svg should be downloaded on pressing the button I want to download both svg and png so how to do it with javascript

<div id="container">
<img src="./svg/accessibility.svg" id="download">
<label>accessibility</label>
<button id="dwnpng">PNG</button>
<button id="dwnsvg">SVG</button>
</div> 
<div id="container">
<img src="./svg/accessibility-outline.svg" id="download">
<label>accessibility-outline</label>
<button id="dwnpng">PNG</button>
<button id="dwnsvg">SVG</button>
</div> 
<div id="container">
<img src="./svg/accessibility-sharp.svg" id="download">
<label>accessibility-sharp</label>
<button id="dwnpng">PNG</button>
<button id="dwnsvg">SVG</button>
</div> 
<div id="container">
<img src="./svg/add.svg" id="download">
<label>add</label>
<button id="dwnpng">PNG</button>
<button id="dwnsvg">SVG</button>
</div>

CodePudding user response：

First, you can't have multiple 'download' id's; id's should be unique. Then you don't need javascript to accomplish this. Just wrap the images with a link like <a href="./svg/accessibility-outline.svg" download><img src="..."></a> Check this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=nl

Choosing a folder for download destination will be presented to you by the OS.

CodePudding user response：

still not working
<div id="container">
<a href="./svg/accessibility.svg" download>
<img src="./svg/accessibility.svg">
</a>
<label>accessibility</label>
</div>
<div id="container">
<a href="./svg/accessibility-outline.svg" download>
<img src="./svg/accessibility-outline.svg">
</a>
<label>accessibility-outline</label>
</div>
<div id="container">
<a href="./svg/accessibility-sharp.svg" download>
<img src="./svg/accessibility-sharp.svg">
</a>
<label>accessibility-sharp</label>
</div>
<div id="container">
<a href="./svg/add.svg" download>
<img src="./svg/add.svg">
</a>
<label>add</label>
</div>