Optimizing SVGs for import into Penpot

[DougalMGU]

I apologize in advance if I am posting this in the wrong section, the contributions section might be more appropriate but I am unsure. This is my way of helping out and giving back to the community, but does not fall into the assets, templates or made-with-penpot categories…

How to Optimize SVGs for Web / Import to Penpot

SVGs are powerful, but they can also give headaches. There aren’t any tutorials out there like this one that I am aware of, so I decided to share this process for anyone who is struggling like I was. If you import SVGs into Penpot and you either a) get a error, b) see an invisible svg object, or c) end up with a messed up SVG, this this tutorial is for you. (Disclaimer: I still cannot guarantee this will fix your issue though, but its worth trying).

Step 1: Open your SVG on a web browser. Any browser should do, but I used Chrome & Firefox.

Step 2: Right click your SVG and select “View Source”. The name of the option may vary depending on browser, but essentially you want to see the code of the SVG.

Step 3: If you exported your SVG from Adobe Illustrator, chances are you will see an unnecessarily big amount of code lines. For example, my SVG here has over 5 thousands lines of code:

Step 4: A lot, if not most, of the stuff here is particular to Adobe / Illustrator.

That code is deadweight / junk that serves no purpose outside of Adobe, usually. The SVG does not have to have such long and complex code. Here I will show you how to simplify it and remove all the conflicting junk code, no coding experience required.

Step 5: Select all (CTRL+A or CMD+A) the lines of code and copy them.

Step 6: In another browser tab, open / go to www.svgviewer.dev

I have no idea who made svgviewer.dev but they are a lifesaver and kudos to them. Hope they keep their web app available because boy it is helpful, as you will find out.

Step 7: By default, svgviewer has placeholder SVG code in it already. Click the clear button to remove it;

Step 8: After pressing the clear button on the bottom (at the time of writing this tutorial it was located on the bottom, that could change) – you should see an empty canvas;

Step 9: Paste all the code from your SVG there;

You should see your SVG load on the right side. If it doesn’t load or loads incorrectly then you may have a different issue than what I’ve experienced.

Step 10: Press “Optimize” on the top left. This should shorten the code significantly, removing almost all the junk. Your SVG should still be visible without issue on the right side.

You just need to make a few edits to the “optimized” code and you’re all set.

Step 11: Remove the part that says style=” “ (including everything in the double quotes)

Step 12: Remove the part that says <foreignObject requiredExtensions=” “/> (including everything within the double quotations. This one is especially problematic, get rid of it! In some cases your SVG might work by just removing this part alone.

Step 13: Remove and – along with their closing parts and – these might not break your SVG, but it is deadweight you probably don’t need.

Step 14: This might not be necessary, but I find that it sometimes helps depending on what you want to do with your SVG. Add a line of code above everything and type this: <?xml version=”1.0” encoding=”UTF-8”?>

You should still see your SVG preview on the right without issue.

Step 15: Click the Download SVG button on the top right.

Done!
Your SVG should be significantly smaller (hopefully under 25kb since that is usually the limit on web apps), and it should work fine when imported into Penpot or other web apps.

Extra (Optional) Step: The SVG gets named automatically by svgviewer. Rename it so it is clear that it has been optimized.

Hope this helped!
Happy SVGing and Penpotting

[jdittrich]

Thanks!
I probably would have opened in inkscape, clean it (file menu) and then stored as “normal svg” (instead of Inkscape SVG). No idea how it compared to your approach, though.

[DougalMGU]

Oh, I was not aware that Inkscape had that feature for SVGs.
Perhaps that is easier, thanks for sharing!

[Garrett]

I usually use SVGOMG for optimzing SVGs.

SVGOMG - SVGO's Missing GUI

It’s a web-based interface for SVGO with lots of features. It supports drag and drop of files as well as copy/paste (including both the SVG object and markup too).

For what it’s worth Inkscape has “optimized SVG” in its save as dialog, which also uses SVGO. But I prefer to save Inkscape SVGs as source documents and treat optimized SVGs separately, as to not lose editability and such, so I run individual SVGs through SVGOMG for individual SVGs or I use SVGO at the command line (in Linux) if I have a lot of SVGs.

[AlexeyAdamitsky]

Very useful discussion. I am sometimes struggling with getting SVG to work as well. Good suggestions to clean up SVG.

Ideally, though, Penpot would do all these garbage code removal automatically on import. Hopefully, such functionality will come eventually. It’ll save a lot of time for users.

[jdittrich]

@AlexeyAdamitsky: I would assume/hope that it parses the svg and does not reuse not-parsed non-standard parts, since otherwise you have some sort of unknown mess of user created input in the mockups?

[DougalMGU]

I was thinking the same thing, I can see Penpot having improved SVG import and export functionality in the future. But there are other more critical things they need to do atm, so that’s why all these suggestions are great for the community to work with SVGs for now.

[candidexmedia]

This is incredibly useful, thank you! I’ve had similar issues with Inkscape SVGs and SVGs exported from Figma.