I would like to provide functionality for a user to export (save locally) an image (svg) that is in a webpage but, unsure how that can be done. I have see that you can do this with canvas but not regular images.
Example Code:
<html>
<body>
<img src="/path/to/image.svg">
<button>Export and Save</button>
</body>
</html>
You can use a link to the file:
<a href="/path/to/image.svg" download>Export and save</a>
You can also set download="Filename.svg" if you want another filename for the download.
Alternatively, if you'd like to use something other than an <a> element (i.e. a button) then you could use this:
<img id="myImage" src="/path/to/image.svg">
<button onClick="window.open(document.getElementById('myImage').src)">Export and Save</button>
On the server-side, you would have to send the appropriate headers to force a download on the client side, for example:
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="image.svg"
