Reduce SVG icon file size #2799

Merged
merged 1 commit into from Feb 26, 2017

Projects

None yet

2 participants

@Kissaki
Member
Kissaki commented Jan 31, 2017

Use Inkscape File -> clean up document functionality to remove SVG bloat.
This does not even remove all Inkscape specific metadata, but already
hugely reduces file size (and complexity).
before: 1.432.192 bytes, after: 633.535 bytes

It seems this function was previously called "Vacuum defs" in Inkscape,
and the savings we see are in large part due to removal of unused defs.

In some files it also changes the way paths are defined, but without
obvious visible changes.

The files still contain Inkscape metadata like the window size, version
and workspace position that could be removed without losing useful SVG
information.

Also note that for the file publicdomain/Information_icon.svg as well as
the layout_* files this process would actually increase file size as
Inkscape adds additional metadata. Hence that file is not changed.

@Kissaki Kissaki Reduce SVG icon file size
Use Inkscape File -> clean up document functionality to remove SVG bloat.
This does not even remove all Inkscape specific metadata, but already
hugely reduces file size (and complexity).
before: 1.432.192 bytes, after: 633.535 bytes

It seems this function was previously called "Vacuum defs" in Inkscape,
and the savings we see are in large part due to removal of unused defs.

In some files it also changes the way paths are defined, but without
obvious visible changes.

The files still contain Inkscape metadata like the window size, version
and workspace position that could be removed without losing useful SVG
information.

Also note that for the file publicdomain/Information_icon.svg as well as
the layout_* files this process would actually increase file size as
Inkscape adds additional metadata. Hence that file is not changed.
b9e9ee9
@Kissaki Kissaki requested review from mkrautz and hacst Jan 31, 2017
@Kissaki
Member
Kissaki commented Jan 31, 2017

GitHub allows displaying the SVG side by side, which I checked for all icons. I also used the swipe on some of them to verify they are visually equal.

@Kissaki
Member
Kissaki commented Jan 31, 2017 edited

This is intended to be a first step to reduce them in size, that does not require additional tooling or further analysis whether we lose anything valuable as discussed in #2017.

As the files still contain (a lot of) useless metadata I would expect we can still save a sizeable amount. That would be the next step/a follow up.

@Kissaki
Member
Kissaki commented Jan 31, 2017 edited

I doubt this has noticable influence on performance though… 1MB is not that much anyway. But reducing the complexity still seems like a good idea.

@mkrautz
Member
mkrautz commented Jan 31, 2017

I haven't really reviewed in depth, but I worry that this might remove important metadata for editing. Are we sure it doesn't?

@Kissaki
Member
Kissaki commented Feb 1, 2017

What kind of data are you thinking about?

The SVG has a <defs> "head" section with definitions that can be used/referenced in multiple places by ID. This is used for example for gradient declarations, which is then used in the <path> content elements via ID style="fill:url(#radialGradient3708);.

Would there be any use case for editing the SVG and wanting to have gradients previously used when editing the file, which are not actually used in the current file/content/image though?

If we want to edit the image, we want to edit the current image, no?

The default_avatar.svg file has comparatively small changes and may be a good example to look at.

There’s an <inkscape:perspective> which I do not know what it is, but it is not used. If this were usable by Inkscape to reproduce the image we would want to keep it? Also if it is not Inkscape editable but reading the parameters of a perspective?

I mean, we can leave the bloated SVGs, but I would think if we were to edit them we would edit the current content. I won’t say I’m sure this is metadata of no use whatsoever, in inkscape or as parameters to reproduce these icons from fresh - maybe there’s Inkscape features or extensions I am not aware of. Personally, I would minify them, even to the point of the original PR. I do not see what we would edit if not the paths that are what makes out the content as it is.

@mkrautz
mkrautz approved these changes Feb 1, 2017 View changes

Trusting your judgment on this one. :-)

@Kissaki Kissaki merged commit 6a9f491 into mumble-voip:master Feb 26, 2017
@Kissaki Kissaki deleted the Kissaki:svg-size branch Feb 26, 2017
@Kissaki Kissaki referenced this pull request Feb 28, 2017
Open

svgclean *.svg #2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment