SVG Code to SVG Image: Save Markup as an .svg File

SVG code already is an SVG image. An .svg file is plain text: the same <svg>…</svg> markup you copied from a website, a design tool, or an AI chat. To turn the code into an image file, you only need to save that text with the right extension. Here's how, plus how to check that it renders.

How to save SVG code as an .svg file

1. Copy the whole SVG, from <svg to the closing </svg>.
2. Open a plain text editor: Notepad on Windows, TextEdit on Mac (choose Format → Make Plain Text first), or VS Code.
3. Paste the code.
4. Save the file as image.svg. Pick All files as the type and UTF-8 as the encoding so the editor doesn't add .txt.
5. Double-click the file. It opens in your browser and shows the image.

Or paste the code into the SVG code to image converter and click Download SVG.

That's the whole conversion. The file is a real SVG image: it scales to any size and opens in Figma, Illustrator, Inkscape, and every browser.

Make sure the file renders

If the browser shows a blank page or an error, check these first:

• The xmlns attribute is there. A standalone file needs xmlns="http://www.w3.org/2000/svg" on the <svg> tag. Inline SVG copied from HTML often leaves it out.
• It has a viewBox. Without one, the image may be cropped or tiny. Example: viewBox="0 0 24 24".
• Nothing is cut off. You need the full markup, including the closing </svg>.
• It doesn't depend on page CSS. Icons copied from a site sometimes use currentColor or classes from the site's stylesheet. Replace them with real colors like fill="#111827".

Preview the code before saving

To see what the code draws without creating a file, paste it into the SVG code to image converter. It renders a live preview in your browser. Nothing is uploaded, and there's no sign-up.

When you need PNG or JPG instead

Many places don't accept .svg uploads: social networks, some CMSs, email tools, and office documents. In that case, convert the code to a raster image:

• PNG keeps transparency. Use it for logos and icons. See how to convert SVG code to PNG.
• JPG puts the image on a white background. Use it where only JPG is accepted. See SVG code to JPG.

The converter exports both at 500 to 2000 px on the longest edge.

FAQ

Is SVG code the same as an SVG image? Yes. An SVG image is a text file that contains SVG code. Saving the code with an .svg extension makes it an image file.

Why does my saved file open as text? The editor probably saved it as image.svg.txt, or as rich text. Save it again as plain text with the type set to All files.

Can I convert SVG code to an image online? Yes. Paste it into the SVG code to image converter to preview it and download a PNG or JPG. It's free and runs in your browser.

Will the SVG lose quality when resized? No. SVG is vector, so it stays sharp at any size. Only PNG and JPG exports have a fixed pixel size.