1

I need help. My download button:

<button type="button" download="logo.svg" href="[SVG_URL]">Download SVG</button>

it is supposed to download an .svg file, but the download attribute is not working. It only opens the file in a new tab. It happens with firefox and chrome also.

Here's the problem live.

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Adam5
  • 57
  • 1
  • 11

1 Answers1

1

You need to use an anchor tag to make something downloadable. Like 

<a href="/images/myw3schoolsimage.jpg" download>Click to Download</a>

But in case you want a button with a downloadable link, here is it

<button><a href="/images/myw3schoolsimage.jpg" download>Chick Here</a></button>

Just put the anchor tag with an attribute "download" inside a button.

To read more about anchor tags w3schools

In your case, as I saw from your site, use the code snippet below

<a type="button" class="btn btn-primary" download="https://cdn.glitch.com/63be2122-7b8d-4d1e-85a5-7d557ae54cc5%2FUPS.svg?1555285173725" href="" target="_blank">Download SVG</a>

Here, instead of putting the URL in href we are giving it to the download attribute.

Adnan Sabbir
  • 181
  • 1
  • 13
  • It still opens in a new tab. I edited my post and added a link to the problem live. – Adam5 Apr 15 '19 at 00:02
  • Please check my last edit, I added a new code snippet that will work for you. – Adnan Sabbir Apr 15 '19 at 17:14
  • Thanks, that worked, but how do I give it a new filename when the download attribute is taken? My browser calls it an .html file when it is really a .svg file. – Adam5 Apr 15 '19 at 19:49
  • I am afraid you can do that. Because the download works on same-origin URLs. To change the name with download attribute you need to give the link inside href tag. But that not possible for your case as you are using URL. – Adnan Sabbir Apr 16 '19 at 09:14