Change fallback method for SVG images

[tombye]

Since adding a Content Security Policy, we're getting violation errors due to the use of data URIs in our page. This is because of the fallback method we use for our SVG images.

The current fallback method works like this:

• we put a <image> tag in the SVG that uses an empty data URI for the image data and the SVG attribute of display="none" so it doesn't show up in browsers that support SVG
• the <image> tag includes a src attribute, pointing to a fallback image

Because browsers interpret <image> as <img>, those that don't support SVG:

• ignore all the SVG tags
• interpret <image> as an <img> tag and display the image its src points to

The problem with this is that using data URIs violates our Content Security Policy.

The new fallback method is to just wrap SVGs in conditional comments that ensure it is only delivered to Internet Explorer (IE) 8 and above, as well as all other browsers. This does mean that any browsers that don't support SVG but aren't IE will no
longer get the fallback but this seems limited to quite old versions of Android's native browser:

https://caniuse.com/svg

The latest one of these was released in 2010 so I think this risk is reasonable.

These changes extend the interface of the alerts_icon component to allow the conditional comments to be optional. This is because we nest it in the example component, which is wrapped in conditional comments itself so any child SVGs it
includes don't need them.

Note: The very latest GOVUK Frontend also contains this issue but it has been raised with the team and is scheduled to be worked on soon:

alphagov/govuk-frontend#2203

We don't use this version yet so can hold off until they roll out a solution (which we may yet copy).

[benthorner]

Great explanation - just when I think HTML can't get any whackier it does 😜.

I'm confused why we have/had the alerts-icon__fallback class set on the example.png image, since it's not an icon. I can't actually see where that class is defined to understand what it's doing. I expected it to be in alert_icon.scss. On the other hand, it was already there, so not a big deal. What does it do?

[tombye]

I'm confused why we have/had the alerts-icon__fallback class set on the example.png image, since it's not an icon. I can't actually see where that class is defined to understand what it's doing. I expected it to be in alert_icon.scss.

This was actually a great spot. I added it a while ago as part of building the alerts icon component but it ended up, as you noticed, not being used. Being redundant it only adds confusion so I removed it. I assume this doesn't change your approval so please add a comment if it does.

[benthorner]

Thanks, I thought it might be some strange CSS technique I wasn't aware of. Glad it was useful, feel free to merge 👍.