SVG Fallback logo

[Dawdre]

Related component

https://design-system.service.gov.uk/components/header/ <image src="/assets/images/govuk-logotype-crown.png" xlink:href="data:," display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>

Context

Our application uses more than 1 header logo and some image 404s lead to an investigation on the need for fallback PNGs due to our browser support being IE11+ (SVG support is very wide). We would like to keep parity with govuk-frontend as much as possible so will be introducing a fix of our own. It did raise a question on the image tag and more specifically xlink:href attribute shown above. It appears to be deprecated and href being the recommended method. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

Is there a fix in mind for this?

Has alternative logo support for the header component been discussed? A tricky issue certainly but possibly some further documentation for when you are changing the default logo.

Additional information (if applicable)

We have also noticed this feature working well on the GOV.UK Design System site (falling back to an img) but on GOV.UK (The logo does not show at all. I assume the headers are completely different markup).

[vanitabarrett]

Hi @Dawdre 👋 We add the xlink:href attribute to support IE8 - without it, IE will download the fallback image even when it's not needed. I believe that even with this attribute the IE dev tools may still show a request for the fallback image, but it should abort.

Are you able to expand on the issue that you're experiencing with this?

[Dawdre]

Thanks for you swift response.

Less of an issue on our end and more of a question regarding the use for it. I am assuming the fall back PNG image is only for IE8? Therefore IE8 would always request it. My tests have shown me that removing xlink:href (and even adding href and removing it again) doesn't make a request in IE9 and above (granted I am not fully emulating IE, so could be some inconsistencies). Again in IE8 the logo on GOVUK Design System shows fine. In GOV.UK it does not (a black crown logo image is being requested however so maybe just invisible on the black background).

Freemarker template example <image src="<@spring.url'/assets/govuk-frontend/govuk/assets/images/govuk-logotype-crown.png'/>" display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image shows the href (and deprecated xlink:href) being the recommended attribute. Therefore I assume you are using the src attribute to "trick" IE8 into it being an img tag with a valid src attribute (as the image tag is just a synonym for img)?

Additionally I am somewhat confused on the need for https://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src#answer-53365710 (my confusion is off the assumption that href and xlink:href are redundant).

As href can be used for local images, I also tested without the src tag at all and just used href. The behaviour you specified that you wanted to avoid is occurring in this instance - IE9 displaying the SVG and requesting the PNG, and IE8 not showing at all. <image href="/assets/images/govuk-logotype-crown.png" display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>.

My testing may not able to replicate what you were able to so happy to close this with some clarification on the below.

Furthermore a question about browser support. What is the official stance on IE8 generally?

https://github.com/alphagov/govuk-frontend here states "GOVUK Frontend supports: Internet Explorer 8, 9 and 10, although components may not look perfect".

https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices shows IE11 compliant. Our application's browser support are mirroring the information in that table - IE11+. I appreciate it does go further in defining what "compliant" means and GOVUK Frontend needs to make sure the majority can access the information they need. Thus building for IE8+.

Does this mean our markup will contain markup only written for IE8? As consumers of GOVUK Frontend, I am sure you can appreciate we want to remain as aligned with your HTML markup (and code in general) as we can. Divergences does make maintenance tricky.

A fairly minor issue certainly but as a consumer who copies your HTML almost verbatim into our environment. I figured I would ask the question.

[vanitabarrett]

Again in IE8 the logo on GOVUK Design System shows fine. In GOV.UK it does not (a black crown logo image is being requested however so maybe just invisible on the black background).

Yes, that’s expected behaviour as the GOV.UK implementation doesn’t currently use the design system component - this is something the GOV.UK team are working on at the moment.

In terms of use of xlink:href and src, there are a couple of related issues which may be of interest to you and give some background information on why they’re being used:

https://github.com/alphagov/govuk-frontend/pull/2045 https://github.com/alphagov/govuk-frontend/issues/1688

Furthermore a question about browser support. What is the official stance on IE8 generally?

As you noticed, GOV.UK Frontend supports IE 8, 9 and 10 whereas the service manual only specifies IE11+. Generally, the service manual is the minimum level of support that we’d expect from services, but we recommend services look into the browsers used to access their services and use that to inform their support levels too. We know there are services with a higher percentage of traffic from older versions of IE and GOV.UK Frontend needs to work for these services too, so we aim for a higher level of support than specified in the service manual.

I'm going to close this issue for now as don’t think there’s anything for us to do here at the moment, but please feel free to comment on this issue if you have any follow-up questions and we will get back to you.