Create blurred images of flags per #220

[ukanuk]

All images generated from SVGs using Inkscape's Gaussian blur, available in "Filters > Blurs > Blur...". A different amount of blur was applied depending on the flag:

Country, Blur value (both horizontal and vertical)
Bali, 3.5
Bolivia, 3.5
El Salvador, 3
Guam, 5
Nicaragua, 3.5
Paraguay, 1.5

[ukanuk]

Adding per issue #220

[aplaice]

These look lovely! Thanks!

Differences between blurred and unblurred flags

One issue is that the Wikipedia flags for Bolivia and El Salvador have apparently changed between the time they were added to anki-ultimate-geography and now. Hence, considering that you (logically) used the current versions of the flags for the blurred versions, there's a mismatch between the blurred and unblurred versions.

The Bolivian flag that we had been using was Flag of Bolivia (state).svg (sources.csv unfortunately points at the wrong file). The flag to which Wikipedia's articles about Bolivia and Bolivia's flag point, is Bandera_de_Bolivia_(Estado).svg. The two articles were both edited to make the change very recently (on 13 March (Bolivia, Flag of Bolivia)), and without digging into the topic deeper, I'm not fully convinced that the change was justified. As a result, I'm not sure which file we should use. Using the "new" version has the advantage of avoiding repeating the blurring.

In the case of El Salvador's flag, it seems to be a case of a new, corrected version of the same Wikimedia file, and the changes were made last year, so if there was scope for reverting a misguided edit, it probably would have been done. Again, without reading into the relevant laws I can't be 100 % certain, but here, I think, we should stick to the latest version (and update src/media/ug-flag-el_salvador.png).

File-size Optimisation

In general, we try to keep the image file sizes as small as possible (many people use this deck on mobile devices with limited storage, and while the difference between a single 50 kB and 40 kB file isn't critical for anybody, it does add up).

If you have access to PNGGauntlet or just optipng, then please run it on the blurred PNGs. If you don't then it's not a big deal — I could do it instead.

sources.csv

From a book-keeping perspective, we keep the "sources" of all the media files in sources.csv for licensing and reference purposes. The format of the rows is File,Source (URL),License (e.g. Public Domain,, CC BY etc.),Modfications (Brief description). It's just a matter of copying/editing a couple of lines, so don't worry about this too much, either.

[ukanuk]

Awesome, thanks for the feedback on how you process/document images, I can easily do all of it.

The only question is whether to use the older Bolivia flags or newer ones. Adding the blur effect is easy, so "avoiding repeating the blurring" is not a big deal from that perspective. We just need to figure out what image we think Wikipedia is most likely to use long-term.

[ukanuk]

Concerning the flag of Bolivia, I found this archived talk thread which casts even more doubt on what the correct flag version is. On the other hand, this Boston Globe article shows that in the 2018 Olympics, Bolivia used the flag currently in the deck.

So that this PR can be accepted expediently, I'll commit a version based on the existing deck flag (so ignoring that Wikipedia was updated). If the Wikipedia change sticks for long enough, a new issue can be opened to update both flag images.

[aplaice]

Bolivia's flag

The difference between the two flags is in the coat of arms. The official document defining it is here (in Spanish). Comparing the description with the two Wikimedia images, I think that "Bandera_de_Bolivia_(Estado).svg" is slightly more accurate. For instance, it includes the yellow internal lining of the main oval, while "Flag of Bolivia (state).svg" doesn't. (OTOH, to the extent that I can tell, the blue colour of the oval is slightly more accurate in "Flag of Bolivia (state).svg" — unfortunately Pantone seems to have deprecated its old CVU (and CVC (uncoated and coated, whatever it means)) colours and switched to just C, so I can't find an entirely trustworthy source of what exactly "Blue 2995 CVU" is.)

Comparing the images with those on Bolivia's governmental sites (a high-quality modern version of the coat of arms and a painting of the coat of arms), it also seems that "Bandera de Boliva (Estado)" is closer.

From a Wikimedia history point of view, it looks like "Bandera de Boliva (Estado)" was created because "Flag of Bolivia (state).svg" was locked.

On the whole I think that "Bandera de Boliva (Estado)" (the newly linked flag) is better.

I could open discussions on the relevant Wikipedia talk pages, but since I agree with the current state of the articles, I don't think that it's worth it.

(Ideally, "Flag of Bolivia (state).svg" would be updated, but looking at the Talk page where the suggestion was already declined once, I don't have much hope.)

[aplaice]

So that this PR can be accepted expediently, I'll commit a version based on the existing deck flag (so ignoring that Wikipedia was updated). If the Wikipedia change sticks for long enough, a new issue can be opened to update both flag images.

That also works and is arguably better from the point of view of not bundling significant (the change in the flag of El Salvador is insignificant enough :)) unrelated changes in a single PR!

[ukanuk]

I believe I've addressed all the feedback from @aplaice, please let me know if I missed anything!

[aplaice]

Thanks!

You have a copy-pasted typo in sources.csv Guassian instead of Gaussian!

Also, I'm not quite sure why*, but there's still a very slight discrepancy between our current unblurred flag of Bolivia and the blurred version — the colour of the clump of wheat in the lower right of the coat of arms is different.

* I think it's a conversion artefact — all of the old versions of Flag_of_Bolivia_(state).svg that have the same design, have the same colour of the wheat as the current version. None of the old versions of Flag_of_Bolivia.svg matches either. When I convert Flag_of_Bolivia_(state).svg with inkscape (wget https://upload.wikimedia.org/wikipedia/commons/d/de/Flag_of_Bolivia_%28state%29.svg; inkscape -h 250 --export-png=ug-flag-bolivia.png Flag_of_Bolivia_\(state\).svg) I get the same colours as you do. OTOH I think that the colours in the current unblurred version are more "accurate" (similar to the SVG itself).

Hence, we need to either update ug-flag-bolivia.png (anyway...) or figure out how to change inkscape's colour space (?), and change the blurred version (and then probably most of the other PNGs in the deck, since most were converted with inkscape).

(Obviously, I recommend the former, at least for the time being.)

[axelboc]

I can't remember where the PNGs come from. I feel like perhaps I downloaded them as 500px PNGs from Wikimedia and then scaled them down to a height of 250px in Photoshop, which would have been stupid of me. Or perhaps I did export them from Inkscape, but an old version...

Either way, I agree, @ukanuk would you mind updating ug-flag-bolivia.png as well? And while you're at it, could you please add the blurred images to data.csv? May as well do it all in this PR, I reckon. Thanks!

[ukanuk]

It sounds like you are both saying that Wikipedia's PNGs are bad, and the one exported with Inkscape is good. This is true in general, Wikipedia has many SVG to PNG conversion issues from using librsvg, documented at Wikipedia:SVG help, Help:SVG, Librsvg bugs, Category:Pictures showing a librsvg bug, Commons:Transition to SVG, and Commons:Commons SVG Checker.

However in this particular case, the problem actually is Inkscape because of a bug with fine lines when zoomed out (and original launchpad bug). You can see this directly in Inkscape, just start zooming in/out and you will see the wheat suddenly change color. On my system, the wheat is dark at 71% zoom but light at 70% zoom. When zoomed out, those fine black lines blur together making the wheat appear darker. Inkscape stops rendering lines at all at certain zoom levels, making the wheat appear as just the background color with no black lines darkening it.

Note this same color change is happening to the church on the hill, although it's much less noticeable because it's so much smaller.

Inkscape 71% zoom (correct darkness):

Inkscape 70% zoom (incorrect due to hidden lines)

Inkscape 1200% zoom:

Therefore, ug-flag-bolivia.png is already correct and should not need updating. I've manually hacked together a corrected ug-flag-bolivia-blur.png. I first tried exporting a large PNG (height=750px) from Inkscape, then using Paint.NET to scale down to 250px, but this uses a different resampling algorithm so the edges appear different from ug-flag-bolivia.png. So instead, I've copied the blurred BOLIVIA pixels from ug-flag-bolivia-blur.png as generated from Inkscape when outputting to 250px, and pasted it over the top of the original ug-flag-bolivia.png image.

If/when the Inkscape bug is fixed, we should convert all the PNGs in the deck with Inkscape. Ideally this would be automated with a script, taking a folder of all the source SVG images (from Wikipedia and manually blurred with Inkscape) and automatically exporting everything to PNG with height=250px using Inkscape, then compressing everything with PNGGauntlet.

[axelboc]

Makes a lot more sense, now, thanks for investigating. Since both Inkscape and Wikimedia ouptut the wrong saturation, I don't get why ug-flag-bolivia.png has the correct one... Perhaps librsvg or Inkscape used to behave correctly in previous versions? Anyway, thanks for hacking together a fix!

[axelboc]

Fixes #220