Add SDG icons in SVG format #4675

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add SDG icons in SVG format #4675

Add SDG icons in SVG format #4675

Commits on Sep 30, 2021