TodayTools

SVG export

Clean SVG files for websites, T-shirts and signboards, at any size.

PrivateNo uploadsRuns in your browser

Donate

Waiting for markup

Preview

The rendered SVG appears here once the markup is valid.
.svg

Opens in any browser or design app. Any missing file details (xmlns) are added for you.

Hands working on a laptop next to a notebook

For logos that travel

Your logo, sharp on a mug or a billboard.

The team T-shirts. Print the logo at any size.

BeforeBlurry logos when enlarged

With sdevClean SVG at any size

  • A man working at a desk in a bright office

    The new shop board

    Clean edges, even three metres wide.

  • Sparks flying in a dark workshop

    The workshop sign

    Ready for cutting and printing.

How to export an SVG file

  1. Paste the markup

    Paste an SVG copied from a design tool, an icon set or a page's source, or press Sample to see one. The size and line count appear under the editor, and any error shows at once.

  2. Check and tidy

    The preview sits on a checkerboard so transparent areas are easy to spot. Press Format to lay the markup out neatly, or Copy to take the text as it is.

  3. Name and download

    Type a file name and press Download SVG. The .svg extension is added for you, and so is a missing xmlns attribute.

Good to know

  • Exports from Illustrator, Figma or Inkscape often carry editor metadata, comments and inline styles. They validate fine and nothing is stripped here; run an optimiser if you need the smallest file.
  • The preview is an image element rendered from the markup, so scripts never execute. It is safe to paste SVGs from sources you do not trust.
  • The formatter is downloaded the first time you press Format, so the first run takes a moment longer.
  • The size shown is the UTF-8 byte count of the editor text, which is what the saved file will be.
  • You can paste an SVG without an xmlns line and still preview it. The attribute is only required when the file stands on its own.
  • Everything runs in your browser. The markup is never sent anywhere.

Where people use it

  • Save an icon from code

    Copy SVG code from a design tool or a web page and save it as a real .svg file.

  • Check it looks right

    See a live preview before you put the SVG in your site or app.

  • Tidy messy markup

    Format long SVG code so it is easy to read and edit.

  • Need a PNG?

    Turn the saved SVG into a PNG or JPG next.

    Image converter and compressor

Why this one

It turns pasted SVG code into a clean file in seconds, with a preview so there are no surprises.

  • Live preview as you paste.
  • Neat formatting in one click.
  • Runs in your browser.

What you can change

  • File name

People find this page by searching

  • svg viewer online
  • svg code to file
  • svg formatter
  • preview svg code
  • save svg file
  • svg editor online
  • convert svg code to svg file
  • svg beautifier
Cite this tool
  • APA
    sdev.in. (n.d.). SVG viewer and formatter [Web tool]. https://www.sdev.in/tools/svg-export
  • MLA
    "SVG viewer and formatter." sdev.in, https://www.sdev.in/tools/svg-export.
  • Chicago
    sdev.in. "SVG viewer and formatter." https://www.sdev.in/tools/svg-export.
  • BibTeX
    @misc{sdev-svg-export,
  title = {SVG viewer and formatter},
  author = {{sdev.in}},
  howpublished = {\url{https://www.sdev.in/tools/svg-export}},
  note = {Web tool}
}

Questions people ask

What does the validation check?

That the markup is well-formed XML, using your browser's own parser, and that the root element is svg. The first line of any parse error is shown under the editor. It does not check every attribute against the SVG spec; the preview shows you how the browser actually renders it.

Why is the preview empty?

The preview only renders once the markup is valid. It is shown through an image element, so scripts inside the SVG never run and external images or web fonts it references are not loaded.

Do I need the xmlns attribute?

Not for SVG inline in an HTML page, but a standalone .svg file without it will not display in a browser. The tool adds xmlns to the preview and the download if it is missing. The text in the editor and the Copy button are left exactly as you typed them.

What does Format do?

It tidies the markup with a line width of 100: consistent indentation, one attribute per line when a tag gets long, and nothing removed or renamed. It is not a minifier or an optimiser.

Can I turn the SVG into a PNG?

Not on this page. Download the .svg, then drop it into the Image converter on this site, which accepts SVG and outputs PNG, JPEG or WebP.

Donate