What are some options for optimizing SVG?

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.

Answer 3

I've recently started to make a Python program to optimise SVGs, which you can find at: https://github.com/petercollingridge/SVG-Optimiser

There's a very preliminary online version at: http://petercollingridge.appspot.com/

With more information at: http://www.petercollingridge.co.uk/blog/svg-optimiser

It's far from complete and probably highly buggy, but it deals with some of the issues Chasbeen mentioned such as removing unnecessary precision and default style attributes. It can also strip out unnecessary attributes and namespaces if you know what you're looking for, and will convert styles to CSS which makes it easier to see how they could be improved.

I don't really understand what you mean about embedding fonts. If you paste an example fragment of the SVG showing the gyphs and multiple character elements, I might be able to include a method to combined them.

Answer 4

https://github.com/svg/svgo

sudo npm install -g svgo

to optimize all svgs in the current directory:

svgo -f .

If you don't have npm, you can install it on Ubuntu like so:

sudo apt-get update && sudo apt-get install nodejs-legacy npm

Answer 5

I think your converted SVG is probably very bloated from what it could be. I'm not sure if Inkscape will take it! There are menu options such as "Convert to Text" but these do not necessarily work.

You can do search and replace on your file to remove references to default SVG attribute values such as.. stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; A lot of these are default anyway so search and replace with nothing for those.

Also it's amazing how you can reduce unnecessary precision. On your conversion for that particular file you might well find a decimal ending .0000001 or .99999675 all these repetitions can also be removed/reduced

Answer 6

May be you can use a Free Web Service for that.

Try this site: https://online-converting.com/svg-optimizer/

Answer 7

Using the python library feedparser, which includes SVG sanitization, I wrote this function which annoyingly wraps svg in a single RSS item in order to parse it.

import feedparser
def sanitize_svg(svg):
    feed = """<?xml version="1.0" encoding="UTF-8" ?><rss><channel><item><description>""" + svg + """</description></item></channel></rss>"""
    parsed = feedparser.parse(feed)
    return parsed.entries[0].description.encode('utf-8')

Although made for whitelisting elements with security in mind, it also reduces the svg size a fair bit.