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.
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