How to save SVG html to SVG file

3 min read

•

Jan 8, 2026

Hi, today I will share with you how to download SVG html tag to SVG file.

There will be 3 steps to achieve this:

Get html string of SVG tag
Convert html string from step 1 to blob object
Download blob object to file

Alright, let’s go into the coding. Before we jump into the logic of download function, I will initialize project source code using NextJS and Typescript. You can use other frameworks such as create-react-app, or gatsby, etc…

Next, I’ll add a simple svg image:

1<div
2  style={{
3    display: "flex",
4    flexDirection: "column",
5    alignItems: "center",
6    justifyContent: "center",
7    height: "100vh",
8  }}
9>
10  <h1>Demo SVG download</h1>
11  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
12    <circle
13      cx="50"
14      cy="50"
15      r="40"
16      stroke="green"
17      stroke-width="4"
18      fill="yellow"
19    />
20  </svg>
21</div>

Let’s start the web and see the result:

Press enter or click to view image in full size

Now, let’s write the logic of download function

Step 1:

I will get the HTML string of the SVG tag. This step is simple, you can use “useRef” to get node element of svg or getElementById. I will use “ref” for simplicity, and then you just need to get the outerHTML field to obtain the HTML string of the SVG tag.

Press enter or click to view image in full size

Step 2:

We will create a blob object from the html string. If you don’t know what blob object is, you can read about it at mdn docs and wikipidia. A blob object contains binary data of a file, such as an image, audio, video, PDF, etc… It helps us to deal with files easily, such as sending or receiving files or downloading files to your computer.

Step 3:

After having the blob object. We will use <a> tag to trigger browser download. If you don’t know yet, <a> tag has an attribute download=”[filename]”. When you set this attribute, the link in “href” attribute will be downloaded when user clicks it.

Press enter or click to view image in full size

We use URL.createObjectURL to create a url linked to the blob object.

Let’s try it now!

That’s it!

You can pull the demo code with the link below to quickly run and see how it works: https://github.com/alanng2050/medium-demo-download-svg

Thanks for your reading!