I'm wondering what I can do to make sure my SVG file sizes are as small as possible.
Thinking purely without any embedded images.

I'm wondering if grouping things together, convert something to a path etc.. will result in a smaller file size.

Any suggestions?

I notice in some of the PDF's I have done with SVG's the blurs are totally gone. Don't blur?

Many thanks for any replies.

I notice in some of the PDF's I have done with SVG's the blurs are totally gone. Don't blur?

No, this is because the SVG to PDF conversion process isn't very good as far as blurs. It's not a file size issue.

Beyond that, I'm not sure if I can answer your question. But I'm sure someone else will be along before too long with a better answer. For me, I'm not sure why you would want to change the way you create an image in Inkscape, just to reduce the file size. I guess most people are more concerned with getting their image to look how they want, despite file size. Especially if you're going eventually to PDF, because after you finish your image, you can File menu > Export Bitmap. This produces PNG version of your image, and as far as I know, PNG is the smallest file format available.

All that said, there's one more thing I could mention. After you finish your image, and before you Export Bitmap (or export whatever), do File menu > Vacuum Defs. This deletes a lot of info in the data file that you might have used while creating your image, changing your mind on colors, trying different gradients, etc., but that aren't used in the final image. But I'm not sure if Vacuum Defs reduces the file size......I assume it does, but I don't really know for sure.

Sorry, I wish I could be more help

Inky Hands wrote:I'm wondering what I can do to make sure my SVG file sizes are as small as possible.

If you need a small file size when publishing an SVG file, try one of these options:

• Experiment with the 'SVG output' settings in 'Inkscape Preferences'.
• Save a Copy as 'Plain SVG (*.svg)'
• Save a Copy as 'Optimized SVG (*.svg)' which uses the python script 'scour' to optimize the SVG file size.
• Save a Copy as 'Compressed (plain) SVG (*.svgz)'

Inky Hands wrote:I notice in some of the PDF's I have done with SVG's the blurs are totally gone. Don't blur?

Are the missing blurs clones of objects which are blurred (i.e. the original is blurred, not the clone)? Then it is a bug in Inkscape 0.47. Workaround: unlink the clones before saving as PDF.

brynn wrote:

All that said, there's one more thing I could mention. After you finish your image, and before you Export Bitmap (or export whatever), do File menu > Vacuum Defs. This deletes a lot of info in the data file that you might have used while creating your image, changing your mind on colors, trying different gradients, etc., but that aren't used in the final image. But I'm not sure if Vacuum Defs reduces the file size......I assume it does, but I don't really know for sure.

Sorry, I wish I could be more help

Played around , saved, file size 5.2kb, then used Vacuum Defs on the same file, which reduced it to 4.91kb. In the more complicated, worked on files you would probably get a decent reduction in size.


Thanks for tip Brynn

Thanks for the help guys. I am using 0.47.

I'm starting to make some head way into the problem.
Vacuum Defs reduces the sizes quite a bit.

I'm in the process of making buttons for a mockup LCD interface (for a synthesizer) and have been creating and assembling the SVG's into the final interface.

For instance, the buttons are 1 box with a gradient in them. Was 19kb, is now 4kb. Out of curiosity I took out the gradient and reduced it further to 2kb.(as an experiment).
To continue experimenting with files I created a new document with just a black box in it = 4kb. Seems large for 1 item.

Anyhow, I tried to use "Optimized SVG" (which i never even noticed before when saving) and all that happened was the python dos box popped up and sat there for 10 minutes doing nothing. I then closed it myself. So I was not able to access whether it would reduce the size.

I will have to follow up with the blurs - I did duplicate buttons (the blur on it is to simulate a LED light on it).

What led to all this was a large PDF document (in size). I then just put into PDF one page and it came out to around 380kb which seemed way to large for SVG's and a small amount of text.
Suspecting a rat in the file I went for the SVG's. There is a total of 4 of them in the page.
2 x Finger pointing SVG's (3kb)
1 x LCD interface SVG - which has 6 of the buttons I mentioned above on it but no blurs. (26kb)
1 x keypad SVG - which has 8 buttons with blurs on it.(89kb)

Looking back at what I wrote, I've learned a bit about reducing SVG file sizes. But it looks like my problem is associated with the PDF output and the size that is produced.
Again thanks for the help - I did learn more about SVG's through your suggestions.

I will pursue the PDF problem maybe in another thread after I have a play around with it more.

Just to update this a little more as it may help somebody else in the future.

I found that in one particular SVG I had designed a button (simple square with a gradient). I DUPLICATED that button 20 times.
What i did was delete all the buttons except for 1. I then CLONED that 1 button 19 times.

File with DUPLICATED buttons = 149kb.
File with CLONED buttons = 82kb.

Try opening the resulting PDF in Inkscape again and examine, Inky Hands. You are right that that size seems excessive and I would I suspect it if the PDF contained some bitmap information. I'm not sure if Inkscape 0.47 rasterises effects that can't be described as vector in PDFs, but if it does you'll be able to tell when you re-open the PDF and play with the shapes.

I'm wondering what I can do to make sure my SVG file sizes are as small as possible.

When you have a drawing with hundreds or thousands of single objects (path) combine them to a single path (provides they share the same style, of course). This reduces the file size a lot.

Although it's unlikely to help in this specific case, here are some tips that we've found to reduce file size while we've been creating The Greys:

1) Vacuum Defs. If the status bar says it removed some defs, repeat until it does nothing. Also try it on a freshly loaded copy of the file - sometimes that will flush out defs that otherwise are a bit persistent

2) Use simple primitives where possible - rectangles and circles. These can be specified in the SVG file using a single compact XML element, whereas paths and other more complex shapes tend to need more verbose XML elements.

3) Clone complex objects where possible, rather than copying. In our comics, for example, we often clone the basic characters with no mouth, then add the mouths as separate objects. That lets us clone the complex paths, while still being able to customise each one.

4) Keep an eye on gradients - they tend to propagate, especially if you copy and paste objects or move them between layers. I wish Inkscape had a better UI for resolving this - being able to order the gradients popup so that similar gradients are adjacent would help, as would a means to delete a gradient but automatically update all the relevant elements to use a different gradient. As it stands you need to re-map them by hand (or by search and replace in the SVG file itself, but I wouldn't recommend it).

5) Filters tend to pile up. Bear in mind that every time you blur an object it adds a filter. Sometimes it's better to attach an already existing filter to an object, rather than just blurring it in the Fill and Stroke dialogue, or picking it from the Filters menu again.

6) You can shave quite a bit off the file size by tweaking the SVG Output options in the Inscape Preferences dialogue. Enabling "Inline attributes" and setting "Indent, spaces" to 0 will reduce the file size at the expense of readability of the SVG source file itself. If you never read or edit the SVG file directly, then it shouldn't affect you. Setting the "Numeric precision" and "Minimum exponent" to lower figures will reduce file size at the expense of the accuracy of very fine details, but doesn't have as drastic an effect as you might expect.

7) If you're primarily interested in reducing file size to make downloads smaller, save as SVGZ - that's what we do with our downloadable Inkscape files.


By way of a comparison, here are some rough figures for the 3-panel comic I've been working on recently:

* PNG export - 1010KB
* PNG export after running through pngcrush - 930KB
* Inkscape SVG with default settings in Inkscape Preferences - 510KB
* Inkscape SVG with Inline Attributes and Indent=0 - 430KB
* Inkscape SVGZ with default settings - 175KB
* Inkscape SVGZ with Inline Attributes and Indent=0 - 145KB


We put the PNG file on our website (otherwise those poor IE users won't see anything), but make the SVGZ file available for download.

Xav wrote:4) Keep an eye on gradients - they tend to propagate, especially if you copy and paste objects or move them between layers. I wish Inkscape had a better UI for resolving this - being able to order the gradients popup so that similar gradients are adjacent would help, as would a means to delete a gradient but automatically update all the relevant elements to use a different gradient. As it stands you need to re-map them by hand (or by search and replace in the SVG file itself, but I wouldn't recommend it).

Inkscape does have an option so that multiple objects can share the same gradient definition, instead of duplicating gradients. You can find the option in Inkscape preferences. It's off by default because users didn't like that when you modify the gradient on one object, the change applies to all other objects also using that gradient.

microUgly wrote:

Xav wrote:4) Keep an eye on gradients - they tend to propagate...

Inkscape does have an option so that multiple objects can share the same gradient definition, instead of duplicating gradients. You can find the option in Inkscape preferences. It's off by default because users didn't like that when you modify the gradient on one object, the change applies to all other objects also using that gradient.

Good point. For keeping the file size down you might want to change that option ("Inkscape Preferences=>Misc=>Prevent sharing of gradient definitions" - uncheck it to prevent gradient propagation). I leave it enabled, though, because I would rather have too many gradients (then manually re-map and vacuum them later) than spoil the gradient on an existing object because I didn't notice it was shared with the one I'm editing now.

Xav wrote:
5) Filters tend to pile up. Bear in mind that every time you blur an object it adds a filter. Sometimes it's better to attach an already existing filter to an object, rather than just blurring it in the Fill and Stroke dialogue, or picking it from the Filters menu again.

Could this be clarified please.

I blur a patch of colour by using the blur slider in the fill and stroke dialogue box.

Then I make a new patch of colour and blur that through the fill and stroke dialogue box.

What should I be doing?

Thanks.

Love the greys, by the way!

Lillie wrote:

Xav wrote:5) Filters tend to pile up. Bear in mind that every time you blur an object it adds a filter. Sometimes it's better to attach an already existing filter to an object, rather than just blurring it in the Fill and Stroke dialogue, or picking it from the Filters menu again.

Could this be clarified please.

I blur a patch of colour by using the blur slider in the fill and stroke dialogue box.

Then I make a new patch of colour and blur that through the fill and stroke dialogue box.

What should I be doing?

You're not doing anything wrong as such - I do it that way all the time. But not everyone is aware that the blur slider in the Fill And Stroke dialogue is actually just a convenience for easily applying the most commonly used SVG filter, Gaussian Blur.

Try this little experiment:

1) In a new drawing, create an object of some sort
2) Copy & paste it twice, to give you three identical objects spread around the page
3) Open the Filters=>Filter Editor dialogue
4) Select one of the objects, and in the Fill And Stroke dialogue give it a blur of, say, 5
5) Note that a filter appears in the Filter Editor dialogue, called "filter1234" or similar
6) Select one of the other objects, and in the Fill And Stroke dialogue give that an identical blur (5 in this case)
7) Note that a second filter appears in the Filter Editor dialogue, called "filter1235" or similar
8) Select the last object - the one which isn't blurred yet - and in the Filter Editor dialogue click in the checkbox next to one of the existing filters (e.g. "filter1234")
9) Note that the selected object now has a blur which matches the other two

Steps 4 and 6 show what happens when you use the blur slider in the Fill And Stroke dialogue: a new SVG filter is added each time.

Step 8 shows that you can re-use an existing filter on more than one object.

Clearly creating more filters will lead to slightly larger file sizes. The difference isn't enough to be a problem for most people, but if you really want to keep the file size to a minimum then re-applying existing filters, rather than creating new ones, can help.

This doesn't just apply to blur - though that's the most common cause of "filter propagation". It can happen with any of the SVG filters. Try the experiment above, but instead of setting blur in the Fill And Stroke dialogue, pick a pre-defined filter from Inkscape's (0.48) Filter menu. The effect is the same - selecting from the Filter menu creates a new filter each time, rather than applying an existing filter.


I hope that clarifies what I was talking about a bit.

Lillie wrote:Love the greys, by the way!

Thanks - it's always nice to hear that people like what we're doing.

Thank you for that very clear explanation.

I had not realised that blur was a filter.
I will take it into account in the future.

And yes!
The greys are well cool!

Xav wrote:You're not doing anything wrong as such - I do it that way all the time. But not everyone is aware that the blur slider in the Fill And Stroke dialogue is actually just a convenience for easily applying the most commonly used SVG filter, Gaussian Blur.

Does "Vacuum Defs" clean up unused (blur, and other) filters?

Yes, that's my understanding.

brynn wrote:Yes, that's my understanding.

Thanks. On one recent large project, I saw a huge list of filters (mostly numbered) in the effects
editor (someday I'll understand that editro), and vacuum defs didn't seem to shorten it.

Kjohrf wrote:Thanks. On one recent large project, I saw a huge list of filters (mostly numbered) in the effects
editor (someday I'll understand that editro), and vacuum defs didn't seem to shorten it.

If they're mostly numbered, I suspect that they're the result of applying blur to objects. Check them in the filter editor - if the only effect listed in the panel on the right is "Gaussian Blur" then that's the cause. If you add blur to lots of separate objects then you end up with lots of separate filters. You can select an object to see what filters are attached to it in the filter editor (attached filters will have a check next to them), but there's no way to click on a filter and discover what objects it's applied to.

In theory you could re-map all the objects using similar filters to just use a single filter. E.g. all of the objects with a blur of 5 use one filter, all those with a blur of 10 use another. Unfortunately the lack of a reverse-mapping from filters to objects makes this a very time-consuming task. The same problem arises for gradients (my pet bugbear, as we use a lot of them in The Greys) - if it was easy to find the objects that use a particular gradient, it would be far simpler to re-map all the similar gradients down to just one.

If you do take the time to re-map filters or gradients to a few common "base" versions, then a vacuum defs will indeed clear the now-unused ones out of the list. When I've taken the time to do this with gradients, I've been able to reduce file size significantly.

Thanks... The filter editor is one dialog I haven't figured out much yet. I do apply blurs
to many objects (what else can you apply them to?). Not sure how to "re-map" filters.

At least now that I figured out (from the help above) that I have to apply filters
individually to every object to get the same blur number, maybe that will help for
the future.

Kjohrf wrote:Not sure how to "re-map" filters.

By "re-map", I just mean making all the objects with similar filters use a single copy rather than a separate copy for each object.

In other words, if you have two objects both with a blur of 5 applied, "re-mapping" is just my term for selecting one of the objects, opening the filters dialogue, un-checking the filter that's being used and then checking the other filter instead. Now both objects are using a single filter, and "Vacuum Defs" will remove the unused one. The same applies to gradients, where "re-mapping"just means reducing several similar gradients down to a single shared gradient.

I hope that clarifies what I was talking about.