What are some options for optimizing SVG? [closed]

Question

I have multiple SVGs, some of them rather large (11MB) and they're created from a PDF using pdf2svg.

The problem is, that the SVG is too big, takes long time to open, and is unnecessarily complex. It contains mostly text and some images (think newspaper), and the text is split into little chunks of characters, not even words.

I need to optimize it, first to reduce size, and also to reduce the amount of elements to make it load faster. The only thing I thought of so far is looking at characters which are at one line, and join them in a single <tspan>.

This should reduce the amount of text elements by quite a significant margin, because it looks like it's mostly groups of 1-5 letters.

But I am looking for some more things I can do to the SVG to reduce the size. There's also a main font, which is used for about 95% of the text, but as it is right now, all of the text is defined as glyphs (rendered shapes).

Is it possible to just embed the font, so the text is rendered as text, and not as shapes?

Also if you know of any better library for converting PDFs to SVG, I'd appreciate any input. The only requirement is that it the SVG output should look exactly the same as the PDF.

I'd also like to note that speed isn't really important. It doesn't matter how long the conversion takes, as long as it produces the required result.

Answer 1

SVG-Cleaner seems to work perfectly: much faster thanb others, better compression, robust in my tests, batch folder proccessing, and hey! a windows installer for us lazy people!

My try: Original file size: 241 KB, after InkScape delete refs: 149K, cleaned with the tool: 38 KB, cleaned and compressed: 5 KB (.sgvz file extension).

I tried to open the last one, expecting a blank drawing... But my graphics were still there intact!

Download it here (Windows, Ubuntu, or Source)

Answer 2

I can recommend Scour as I have used it a lot myself when cleaning off unnecessary cruft from SVG files, which is something of a hobby of mine.

An example scour command line which might serve you well (and which I tend to start from):

scour --enable-viewboxing --create-groups --shorten-ids --enable-id-stripping --enable-comment-stripping --disable-embed-rasters --remove-metadata --strip-xml-prolog -p 9 < old.svg > new.svg 

Be sure to compare the old with the new to make sure it didn't wreck anything and try lowering the -p decimal precision (the default is 5 if you don't give one); at some level it probably starts distorting things pretty badly, but one or two decimals higher should look good.

If you want to take on a more manual approach, there are lots of tricks of the trade gathered in the Kilobyte SVG Challenge changesets, which are meant as a kind of combined learning and teaching place for this kind of thing.

Yes, you can embed a font in the SVG file, or link an external one, as demonstrated by Mike Bostock's take on the WebPlatform.org logo (non-html-wrapped version here).

It is of course far easier to accomplish this if you have detailed knowledge of what fonts are used than if you pick an arbitrary pdf and convert it; I do not know of any tools that create a no-name font from whatever glyphs the original pdf embedded without you doing most (or all) of that work yourself.

Furthermore there is a growing list of SVG optimization tools in the Kilobyte SVG Challenge README's Tools section.