mirror of
https://github.com/lipis/flag-icons.git
synced 2026-04-26 09:25:50 +03:00
[GH-ISSUE #315] Large filesize due to complex vector shapes #194
Labels
No labels
3rd-party
3rd-party
bug
code
documentation
enhancement
fixed-in-master
flag-request
help needed
missing-flag
missing-flag
pull-request
wrong-flag
wrong-flag
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
starred/flag-icons#194
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @generator85 on GitHub (Oct 19, 2016).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/315
A few of the flags have a pretty large file size due to overly complex vector shapes (especially the the flags of Serbia and the Dominican Republic, both almost 500kb). If look at this close-up of the Serbian flag you notice that there are way to many vector points and it can be dramatically simplified.
@lipis commented on GitHub (Oct 29, 2016):
What we can do for that?!
@sandstrom commented on GitHub (Dec 5, 2016):
This would be great. Trimming the largest ~10 flags would drastically reduce the total file size. I guess a vector tool can be used to manually shrink them, or perhaps some tracing functionality to automatically simplify (though this may not work that well).
@lipis commented on GitHub (Dec 5, 2016):
It's in my plans for x-mass to reduce the size and other updates! stay tuned..
@sandstrom commented on GitHub (Dec 5, 2016):
@lipis Awesome! ⛵️
You probably already know about these things. But just in case, I'd try the following two things:
Some links:
@anho commented on GitHub (Dec 11, 2016):
@lipis another possibility would be to provide the civil flags instead of the national ones for the countries with more complex shapes (as additional set or whatever). A very good example is the spanish flag.
@TunaFish2 commented on GitHub (Dec 27, 2016):
SVGo
@sandstrom commented on GitHub (Dec 27, 2016):
Using civil flags is a great suggestion! Set a threshold and use the civil version (where available) for all flags above the threshold size: https://en.wikipedia.org/wiki/State_flag
@generator85 commented on GitHub (Dec 27, 2016):
I agree, it's a good idea. But I think it's better to be consistent and use the civil version for all flags.
@maxlibin commented on GitHub (Mar 10, 2017):
I have replaced large svg with civil version, checkout here
@sandstrom commented on GitHub (Mar 10, 2017):
@maxlibin Awesome! Seems like overall size for the 4x3 directory is ~4 MB -> ~2 MB, so roughly half. The largest flag is down to 74 kb from 467 kb.
@lipis Is this anything you are willing to consider for this repo?
@Clement-TS commented on GitHub (Mar 10, 2017):
Also the file size can be checked online: https://jakearchibald.github.io/svgomg/
Or dynamically via a tool provided within your package: https://github.com/svg/svgo
I'm also interested in lowering the size of flag-icon-css, it nearly doubles my application size.
@ritcheyer commented on GitHub (Sep 21, 2017):
@Clement-TS I just submitted a PR that uses svgo to minify the flag icons to 1 precision point. see here: https://github.com/lipis/flag-icon-css/pull/393
@ritcheyer commented on GitHub (Sep 21, 2017):
@maxlibin PRed to you too!
https://github.com/maxlibin/lite-flag-icon-css/pull/1
😄
@scottkellum commented on GitHub (Sep 21, 2017):
The point structure here looks like it’s unsuitable for production use. It could be that in expanding a stroke a design program added a huge number of extra points that are unnecessary. Vector art should have one point per every 90° turn in the path on a curve. Occluded points don’t need to be curved. Simply by having a clean source file you can probably cut 90% of the file size and on paths this bad adjusting precision might even make things worse because the points are so close together the paths are prone to become lumpy as they are placed on a more coarse grid but test this last point instead of taking my word for it as you want precision as coarse as possible without visual regression.
If you can find cleaner source files of flags like these you’ll find significantly smaller file sizes. As a designer this looks like a bad source SVG and I wouldn’t want to send it into production looking like that no matter how good the SVG optimization engine is.
@ritcheyer commented on GitHub (Sep 22, 2017):
@scottkellum are there any tools that can help us to clean up these icons? I'm looking to use this project in production at work and I cannot justify a 456kb svg (4x3 do.svg really is this big) 😬 Even the largest optimized flag in @maxlibin's repo being 41kb is still pretty large for production usage... is there anything in our disposal to optimize these further, like you're suggesting, without compromising the quality or the design on the flag(s)?
If no suitable SVG source file exists, would it be just a manual process of opening each flag in Illustrator or some such to clean up the points? (this sounds incredibly tedious and unfun, btw)
@lipis commented on GitHub (Sep 22, 2017):
#395
@scottkellum commented on GitHub (Sep 23, 2017):
@ritcheyer There is only so much you can do with a tool and the tools listed above in the thread are fantastic. Think of this like a book with a lot of repeated stuff, you could have a computer try to parse it down but what you clip out and the order in which you clip it out might change the meaning so this task is very hard for a computer to do well. Illustrator has a simplify path tool but because Illustrator doesn’t understand why points are in some places I haven’t had good luck with it or any similar tool.
@lipis commented on GitHub (Feb 27, 2018):
Is there anything we can do with some of the SVGO settings https://github.com/lipis/flag-icon-css/blob/master/svgo.yaml to reduce the size/complexity of the vectors?!
Using the civil flags will of course reduce the size, but I would like to keep the original ones :)
@sandstrom commented on GitHub (Feb 28, 2018):
@lipis I think that's what this PR did: https://github.com/lipis/flag-icon-css/pull/393
@lipis commented on GitHub (Mar 1, 2018):
#436 saved 13% more :)
@lipis commented on GitHub (Mar 1, 2018):
#437 even more.. :) 1.8MB
@sandstrom commented on GitHub (Mar 1, 2018):
Great! 😄
I still think some flags could be shrunk further. It's just a handful of flags that make up ~95% of the total file size. But for them, simplification of the vector may be beyond an automated tool (or atleast we'd have to use another, automated tool).
But anyway, this is still a nice improvement! 🏆
@lipis commented on GitHub (Mar 1, 2018):
I'll close this one for now because of #437, and if anyone wants to simplify manually some big flags I'm open for review..