Blog

How to get the code from an SVG file

An .svg file is plain XML. Open it in a text editor, or upload it so the markup loads in the editor.

Snipsco Team·· 3 min read

An .svg file is already code. Open it and you get XML, from the opening <svg tag through the closing </svg>.

Open the .svg in a text editor

Open the file in VS Code, Notepad, or TextEdit set to plain text. You see markup, not a binary image. Copy from <svg to </svg> when you need the code somewhere else.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#111827" />
</svg>

Upload the .svg to the SVG tool

On the SVG code to image page, click Upload .svg file and pick the file. The tool reads it as text, loads the markup in the editor, and formats it.

Files can be up to 500 KB. It runs in your browser, with no account.

This reads SVG markup only. It does not turn a PNG or JPG into an SVG.

Copy as SVG in Figma

Select the object in Figma. Right-click and choose Copy as > Copy as SVG. Paste that markup into a text editor, or into the SVG code to image converter, to read and edit it.

Questions

Does this turn a PNG or JPG into SVG code? No. The tool only reads SVG markup. It does not vectorize a PNG or JPG.

Can I get the code without a design tool? Yes. Open the .svg file in any text editor. The markup is the code.

Does the upload need an account? No. The SVG tool reads the file in your browser, and there is no account.

Related

Try the tool

Paste code, pick a theme, and export a PNG in 16:9, 1:1, 4:5, or 9:16.