Add SDG icons in SVG format #4675
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javierm
force-pushed
the
sdg_svg_en
branch
3 times, most recently
from
49d72f0
to
5f14606
Compare
The method name was a bit confusing because it returned a locale.
SVG files are smaller than PNG files, can be compressed, and are scalable. We're choosing to render SVG files as images instead of inline because inline SVGs aren't cached nor compressed, and they might appear several times on the same page, making the generated HTML much larger. We could also load them with an SVG sprite, using `<use>`, which would reduce the number of HTTP requests when several icons are present on the page (like in the index of most sections). However, using SVG inside an `<img>` tag is universally supported, while the `<use>` tag doesn't work in Internet Explorer when using an external URI and support in Opera Mini and UC Browser is unknown.
These icons have been downloaded from The Global Goals page [1]. English is the official language of this page and the only one containing all the information. Since SVG icons are smaller and can be compressed, users browsing the page in English will have to download about 45KB for the SDG icons, instead of the 250KB they needed to download when using PNGs. [1] https://globalgoals.org
Based on an EPS file downloaded from The Global Goals page [1]. Although in that page there are icons for other languages we support and that we've only got in PNG format, the Spanish ones are the only ones which are similar to the official PNG ones provided by the UN or UN-related organizations like UNRIC. Icons in other languages (like Chinese, French or Russian) are not that similar to the official PNG icons and their quality is (in my humble opinion) lower. Since SVG icons are smaller and can be compressed, users browsing the page in Spanish will have to download about 80KB for the SDG icons, instead of the 240KB they needed to download when using PNGs. [1] https://www.globalgoals.org/resources
Based on an EPS file downloaded from The Global Goals page [1]. We didn't have Indonesian SDG icons in any format. [1] https://www.globalgoals.org/resources
These icons have been converted from EPS pages found at their respective language UNRIC sites [1, 2, 3]. Since SVG icons are smaller and can be compressed, users browsing the page in these languages will have to download way less data for the SDG icons than when using PNGs. Users browsing the web in Italian will have to download about 70KB for the SDG icons instead of the 575KB. Users browsing the page in Greek will have to download about 75KB for the SDG icons instead of 720KB. And users browsing the web in Dutch will have to download about 115KB for the SDG icons instead of 230KB. [1] https://unric.org/it/agenda-2030/ [2] https://unric.org/el/17-στοχοι-βιωσιμησ-αναπτυξησ/ [3] https://unric.org/nl/duurzame-ontwikkelingsdoelstellingen/
The icons were a bit hard to click on small screens, even for people without any motion disabilities. We might increase the size or the space between icons again in the future; right now it's hard for users with certain motion disabilities to click on the right icon. Coincidentally, the minimum size of the icon is now barely over the 44px established as minimum required size by the WCAG guideline 2.5.5 (level AAA) [1]. Also coincidentally, at a screen 320px wide (the minimum screen size we support), six icons appear on each row, just like in the UN logo. [1] https://www.w3.org/TR/WCAG21/#target-size
This way titles look a little less broken during the time the font is downloaded.
taitus
approved these changes
Sep 30, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
References
Objectives