Basically, a lot of SVG editors, even Inkscape, insert tons of random stuff into the file that is not needed to render it correctly inside an HTML.

I want to be able to copy the source of the file, and paste into my HTML source without making a mess.


I would strongly recommend SVGOMG.

It's a great (open source) tool and it allows you to really fine tune the level of cleaning up / optimization it performs.

They obviously allow you to easily strip out the unnecessary info, but they also allow you to easily optimize other portions of the SVG.

  • Agree 100% and it's what I do. I export SVG from Figma, get files from other people using Xd / AI / whatever, all go through SVGOMG before putting it online – Luciano Jul 21 '20 at 13:43

TLDR: I would recommend Inkscape (although this is just my own personal preference). I don't want to denigrate other capable software such as Adobe Illustrator,Sketch, Affinity Designer, etc.

The "random stuff" isn't random stuff. Let me explain further:

In Inkscape when you save an "Inkscape SVG" it contains Inkscape specific XML. This is Inkscape's own native file format, and you would use this to save your source file so that's it's fully editable in Inkscape when re-opened. This format is not intended for general SVG output. Although in many cases browsers would simply ignore the Inkscape specific XML and render the SVG anyway.

Outputting a clean SVG (without the Inkscape XML) is entirely possible right inside Inkscape, without the need to use other software. Here are two methods:

  1. Save your file and choose "Plain SVG" in the file type dropdown. This will remove almost all of the Inkscape specific XML, except the Metadata and possibly some unused IDs and attributes. You could easily manually delete the Metatdata in any text editor, since it's not required for a working SVG. In most cases, this method is the easiest and quickest.

  2. For more advanced control, you can also choose "Optimized SVG" in the file type dropdown. This gives much more control over what you can strip out of the SVG. In the options which pop up during the save process, you can remove things such as Metadata, other unnecessary tags, and set the number of significant digits, collapse unnecessary groups, and remove unused IDs, etc. You can also remove other things in the XML editor in Inkscape, such as Transforms, and attributes you don't need.

To copy and paste SVG code, you can open an SVG in any text editor, and simply copy and paste it from there. Obviously, you can also manually edit the code in any text editor.

Here is an example of the kind of output that is possible in Inkscape. This is an Optimized SVG generated by Inkscape. It's just a couple of filled and stroked ellipses.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="70.1mm" height="42.7mm" version="1.1" viewBox="0 0 70.1 42.7" xmlns="http://www.w3.org/2000/svg">
<g fill="#4d4d4d" stroke="#2ca02c" stroke-width="3.4">
<ellipse cx="27.8" cy="19.2" rx="23.4" ry="14.8"/>
<ellipse cx="49.1" cy="30" rx="15.2" ry="9.44"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.