I'm a big fan of SVG's but in this case I'm not sure they provide any benefit over our current image strategies.

Our current strategies involves:
1.) serving highly compressed PNG's in <img> tags
2.) combining all non-essential images into image sprites, and using css background image to display them.

For retina images, in strategy 1 we use 'src-set' with a polyfill to serve 1.5x, 2x images
For strategy 2 we use media queries to serve a different 1.5x, 2x background image based on @media (-webkit-min-device-pixel-ratio: 2) property.

The css sprite strategy has the advantage that it significantly lowers the amount of HTTP requests required to download the images.

The second issue I have is that often SVG's are lighter than raster images. In this situation, that's not the case.

The wikipedia globe SVG weighs 162kb. https://commons.wikimedia.org/wiki/File:Wikipedia-logo-v2.svg
Our compressed PNG globe weighs only 13kb https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png
and only 34kb at 2x. https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2@2x.png

@Jdrewniak Using PNGs over SVGs on smaller images let's you run into a few problems:

1. Overhead of work needed to control the quality of the different versions of PNGs (1x, 1.5x, 2x) every time for a new image and
2. an overhead of data in comparison to SVGs. Moreover the HDPi-display train [[ https://stackoverflow.com/a/25781501/1696030 | doesn't stop at 2x ]], where 2x might already result in a tad blurriness.

The SVGs can either be inlined, so no HTTP request and immediate availability for rendering engine (possibly losing of caching ability if used elsewhere, but for portal currently not a problem)
Or combined in a sprite as well – in combination with using a mixin similar to core, you'll also have a fallback possibility to PNG 1x for non SVG supporting browsers.
You're using Gulp, so https://github.com/jkphl/gulp-svg-sprite might be your choice here. It features SVGO as well.

For the globe you might be better off with the PNG, that's right. For the wordmark I see SVG on the advance as well.

hi @Volker_E you bring up some very good points.

"the HDPi-display train doesn't stop at 2x" is the most salient in my opinion.
If we were to redo our images for @3x, we would have to resize all our images,
converting them from their original SVG anyway. This would double the number
of assets we manage, and we would have to repeat this process for every consequent pixel density.
https://www.noteloop.com/kit/display/pixel-density/
(As you mentioned, the iPhone 6 Plus is at 3x, but others are apparently already at 4x)

Given the work required to resize the images, the current workflow
(even when we scale down the images programatically) is still not 'future-friendly'.

Using SVGs would certainly eliminate this overhead and it would cut down
on the number of assets we require.

My main concern was size, and that some SVG's are just too big. I did some
research however, and I was able to compress the globe logo SVG with SVGO
from 162kb to 99kb. This is still large, but after GZIPing the file, it only weighs 36kb.
This brings it in line with our @2x PNG version.

There are of course concerns with browser compatibility, but only in the case of
<img> tags (the fallbacks for that require JS). I think it's worth investigating the
svg-sprite option as you mentioned, as CSS can easily fall back to png when necessary.

Moving this to the backlog for now.

moving to the new portal backlog board

Just a small update regarding SVGs on the wikipedia portal.
I've done some preliminary research and it looks like the SVGs - with a few exceptions*
are actually smaller than the current optimized PNGs.

*the wikinews logo is 233kb, and there's getting around that unless someone creates a simpler logo

@Jdrewniak Nice! So all of those SVGs are, according to the screenshot, SVGO optimized, right?

moving this to the backlog board for now

Change 384563 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] Replacing portal image workflow with SVGs

https://gerrit.wikimedia.org/r/384563

Change 387191 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] SVG Sprites - Adding new gulp tasks

https://gerrit.wikimedia.org/r/387191

Change 387192 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] SVG Sprites - Adding new SVG files

https://gerrit.wikimedia.org/r/387192

Change 387193 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] SVG Sprites - Replacing PNG images with SVG sprite in the HTML

https://gerrit.wikimedia.org/r/387193

Change 387194 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] SVG Sprites - Removing old gulp tasks & npm deps

https://gerrit.wikimedia.org/r/387194

Change 387195 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] SVG Sprites - Fixing IE8 issues

https://gerrit.wikimedia.org/r/387195

Change 387196 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] SVG Sprites - Deleting old PNG files

https://gerrit.wikimedia.org/r/387196

Change 384563 abandoned by Jdrewniak:
Replacing portal image workflow with SVGs

Reason:
As per @Volker's suggestion. I've split this patch into multiple commits on the following topic thread

https://gerrit.wikimedia.org/r/#/q/topic:new-svg-sprites (status:open OR status:merged)

https://gerrit.wikimedia.org/r/384563

Change 387191 merged by jenkins-bot:
[wikimedia/portals@master] SVG Sprites - Adding new gulp tasks

https://gerrit.wikimedia.org/r/387191

Change 387192 merged by jenkins-bot:
[wikimedia/portals@master] SVG Sprites - Adding new SVG files

https://gerrit.wikimedia.org/r/387192

Change 387193 merged by jenkins-bot:
[wikimedia/portals@master] SVG Sprites - Replacing PNG images with SVG sprite in the HTML

https://gerrit.wikimedia.org/r/387193

Change 389934 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] Add a new image optimizer for PNG fallback

https://gerrit.wikimedia.org/r/389934

Change 387194 merged by jenkins-bot:
[wikimedia/portals@master] SVG Sprites - Remove old gulp tasks & npm deps

https://gerrit.wikimedia.org/r/387194

Change 389934 merged by jenkins-bot:
[wikimedia/portals@master] Add a new image optimizer for PNG fallback

https://gerrit.wikimedia.org/r/389934

Change 387196 merged by jenkins-bot:
[wikimedia/portals@master] SVG Sprites - Deleting old PNG files

https://gerrit.wikimedia.org/r/387196

Change 387195 merged by jenkins-bot:
[wikimedia/portals@master] SVG Sprites - Fixing IE8 issues

https://gerrit.wikimedia.org/r/387195

Change 391177 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] Fix SVG fallback issues on very small mobile devices

https://gerrit.wikimedia.org/r/391177

Change 391177 merged by jenkins-bot:
[wikimedia/portals@master] Fix SVG fallback issues on very small mobile devices

https://gerrit.wikimedia.org/r/391177