What are some options for optimizing SVG?

Question

I have several SVGs, some of them are quite large (11 MB), and they are created from PDF using pdf2svg .

The problem is that the SVG is too large, it takes a long time to open and is unnecessarily complicated. It mainly contains text and some images (I think a newspaper), and the text is divided into small fragments of characters, even words.

I need to optimize it, first reduce the size, and also reduce the number of elements in order to speed up the download. The only thing I've been thinking so far is to look at the characters that are on the same line and join them in the same <tspan> .

This should significantly reduce the number of text elements, since it looks mainly in groups of 1-5 letters.

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

Is it possible to simply insert a font, so the text is displayed as text, and not as shapes?

Also, if you know any better library for converting PDF files to SVG, I would appreciate any input. The only requirement is that it should look the same as in PDF.

I would also like to note that speed is not very important. It doesn't matter how long the conversion takes if it gives the desired result.

Answer 1

SVG-Cleaner seems to work just fine: much faster than others, better compression, reliability in my tests, processing folder folders for packages and hey! window installer for us lazy people!

My attempt: Original file size: 241 KB, after removing InkScape links: 149 KB, cleaning with the tool: 38 KB, cleaning and compression: 5 KB (.sgvz file extension).

I tried to open the latter, expecting an empty drawing ... But my graphics were still there!

Download it here (Windows, Ubuntu or Source)

Answer 2

I recently started creating a Python program for optimizing SVG, which you can find at: https://github.com/petercollingridge/SVG-Optimiser

There is a very preliminary online version: http://petercollingridge.appspot.com/

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

This is far from complete and probably very buggy, but it addresses some of the issues Chasbeen mentioned, such as removing unnecessary precision and default style attributes. It can also highlight unnecessary attributes and namespaces if you know what you're looking for and convert styles to CSS, making it easier to see how they can be improved.

I don’t quite understand what you mean by embedding fonts. If you insert an exemplary SVG snippet showing gifs and a few characters, I could include a method to combine them.

Answer 3

I can recommend Scour , because I used it a lot when I removed junk from SVG files, which are something like my hobby.

An example scour command line that may serve you well (and with which I am starting to start):

 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 that it hasn’t destroyed anything and try to reduce the decimal precision of -p (the default is 5 if you don’t); at some level, he probably starts to distort things pretty badly, but one or two decimal places above should look good.

If you want to use a more manual approach, there are many trading tricks compiled in the Kilobyte SVG Challenge changeets , which are meant as a kind of combined training and learning place for these kinds of things.

Yes, you can embed the font in the SVG file or link the external one, as Mike Bostok showed, to the WebPlatform.org Logo ( non-html-wrapped version here ).

Of course, this is much easier to do if you have detailed knowledge of which fonts are used than if you select an arbitrary pdf file and convert it; I do not know of any tools that create a font without a name from any glyphs that are inserted into the original pdf version, without the fact that you do most (or all) of this work yourself.

In addition, there is an extended list of SVG optimization tools in the Kilobyte SVG Challenge README section.

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 this:

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

Answer 5

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

You can search and replace in your file to remove references to default SVG attribute values, such as .. move: # 000000; Bar Width: 1px; bar-linecap: butt bar-linejoin: miter; Stroke-Opacity: 1; Many of them are by default in any case, so finding and replacing them gives nothing.

It is also amazing how unnecessary accuracy can be reduced. When converting for this particular file, you can find the decimal ending .0000001 or .99999675, all these repetitions can also be deleted / reduced

Answer 6

Using the python feedparser library, which includes SVG sanitation , I wrote this function, which annoyingly wraps svg in a single RSS element for ordering 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 for security whitelisted items, it also reduces svg size by an honest bit.

Answer 7

Maybe you can use a free web service for this.

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