starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 17:35:54 +03:00

[GH-ISSUE #63] Optimize SVGs using SVGO #38

New issue

Closed

opened 2026-03-03 14:34:07 +03:00 by kerem · 10 comments

kerem commented

2026-03-03 14:34:07 +03:00

Owner

Originally created by @flekschas on GitHub (Apr 22, 2015).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/63

I would recommend optimizing SVGs using SVGO.

I've done this for all 4x3 SVGs and saved quite a lot of bits:

Average size saved per file: 50.61%
Total size saved: 33.29%

Total file sizes before:
Before: 4690.31 KiB
After: 3128.94 KiB

Average file size:
Before: 18.84 KiB
After: 12.57 KiB

(Strangely I should mention that aw.svg and ms.svg got bigger!)

This could me included in the build process using grunt-svgmin, which internally uses SVGO.

Originally created by @flekschas on GitHub (Apr 22, 2015). Original GitHub issue: https://github.com/lipis/flag-icons/issues/63 I would recommend optimizing SVGs using [SVGO](https://github.com/svg/svgo). I've done this for all 4x3 SVGs and saved quite a lot of bits: Average size saved per file: **50.61%** Total size saved: **33.29%** Total file sizes before: Before: 4690.31 KiB After: 3128.94 KiB Average file size: Before: 18.84 KiB After: 12.57 KiB (Strangely I should mention that `aw.svg` and `ms.svg` got bigger!) This could me included in the build process using [grunt-svgmin](https://github.com/sindresorhus/grunt-svgmin), which internally uses SVGO.

kerem closed this issue

2026-03-03 14:34:07 +03:00

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@lipis commented on GitHub (Apr 22, 2015):

I've done that in the past.. but unfortunately some of the flags are ruined because of that...

https://github.com/svg/svgo/issues/162

@lipis commented on GitHub (Apr 22, 2015): I've done that in the past.. but unfortunately some of the flags are ruined because of that... https://github.com/svg/svgo/issues/162

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@lipis commented on GitHub (Apr 22, 2015):

Will follow up after I'm back from my vacations.. I'm totally up for SVGO if flags are not breaking.. or at least if we know for sure which ones are breaking.. (like 100% sure)

@lipis commented on GitHub (Apr 22, 2015): Will follow up after I'm back from my vacations.. I'm totally up for SVGO if flags are not breaking.. or at least if we know for sure which ones are breaking.. (like 100% sure)

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@flekschas commented on GitHub (Apr 23, 2015):

Sounds great thanks! Maybe I find out how to avoid breaking some flags by disabling certain SVGO plugins.

@flekschas commented on GitHub (Apr 23, 2015): Sounds great thanks! Maybe I find out how to avoid breaking some flags by disabling certain SVGO plugins.

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@lipis commented on GitHub (Apr 23, 2015):

or somehow identifying which flags are breaking is also good for me

@lipis commented on GitHub (Apr 23, 2015): or somehow identifying which flags are breaking is also good for me

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@petethepig commented on GitHub (May 25, 2015):

@petethepig commented on GitHub (May 25, 2015): +1

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@petethepig commented on GitHub (May 25, 2015):

Another possible improvement would be to get rid of duplicates.
us - um pair for example

@petethepig commented on GitHub (May 25, 2015): Another possible improvement would be to get rid of duplicates. `us` - `um` pair for example

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@lipis commented on GitHub (May 26, 2015):

@petethepig lol.. so lets delete the US flag..

@lipis commented on GitHub (May 26, 2015): @petethepig lol.. so lets delete the US flag..

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@petethepig commented on GitHub (May 30, 2015):

@lipis I'm saying that this:

.flag-icon-um {
  background-image: url(../flags/4x3/um.svg);
}

could potentially look like this:

.flag-icon-um {
  background-image: url(../flags/4x3/us.svg);
}

Thus, if you have both flags (us and um) on one page you would only have to download one image.

@petethepig commented on GitHub (May 30, 2015): @lipis I'm saying that this: ``` css .flag-icon-um { background-image: url(../flags/4x3/um.svg); } ``` could potentially look like this: ``` css .flag-icon-um { background-image: url(../flags/4x3/us.svg); } ``` Thus, if you have both flags (_us_ and _um_) on one page you would only have to download one image.

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@lipis commented on GitHub (May 30, 2015):

@petethepig This repo is used not only via CSS and this is a very small optimisation that I don't see any reason to modify..

@lipis commented on GitHub (May 30, 2015): @petethepig This repo is used not only via CSS and this is a very small optimisation that I don't see any reason to modify..

kerem commented

2026-03-03 14:34:08 +03:00

Author

Owner

@lipis commented on GitHub (Dec 26, 2015):

Many flags were optmized.. and from now on it will happen on per flag basis..

@lipis commented on GitHub (Dec 26, 2015): Many flags were optmized.. and from now on it will happen on per flag basis..

kerem referenced this issue

2026-03-03 14:34:25 +03:00

[GH-ISSUE #122] Wrong flag for Cocos (Keeling) Islands (CC) #73