8

Is anyone seeing the missing SVG logo issue on the top-left of stackoverflow.blog?

enter image description here

I think the issue is the CORS policy on the image host:

Access to XMLHttpRequest at 'https://zgab33vy595fw5zq-zippykid.netdna-ssl.com/wp-content/themes/stackoverflow/assets/svg/output/symbol-defs.svg' from origin 'https://stackoverflow.blog' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

I'm seeing this on:

  • Windows 10, Chrome 71.0.3578.98 (Official Build) (64-bit)
  • Windows 10, Firefox 64.0.2 (64-bit)
  • Not appearing on mobile either. – Mithrandir Jan 22 at 12:08
  • 4
    The bug was already reported and worked. Seems it's re-opened. – Arulkumar Jan 22 at 12:20
  • No repro here (Win 7, Chrome 71). The image does load notably slower than most other images. Probably still worth investigating as it seems to come and go. – Erik A Jan 22 at 13:07
5

There's a lot going on with this one! Ultimately, it comes down to this: The logo is an SVG loaded via an "external" sprites file using the svg markup use xlink:href=.... (where "external" here just means the SVG code is not the same markup file).

This was being output like this:

<svg role="img" class="so-icon so-icon-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Stack Overflow Logo">
    <use xlink:href="https://zgab33vy595fw5zq-zippykid.netdna-ssl.com/wp-content/themes/stackoverflow/assets/svg/output/symbol-defs.svg#so-icon-logo" />
</svg>

Note that the URL being used is a full URL including the hostname of our caching server. This works fine for things like CSS files and images, but SVG support for pulling external markup from a different host is problematic at best.

What's interesting (to me) is that different people saw different errors and/or still saw the graphic. There were CORS errors, errors saying "Domains, protocols and ports must match", etc. On my machine, I got the errors in my console, but the graphic still loaded.

Anyway, ultimately, the fix was to just make that URL relative instead, which is now live:

<use xlink:href="/wp-content/themes/stackoverflow/assets/svg/output/symbol-defs.svg#so-icon-logo"></use>

Thanks for reporting this!

  • Why not keep it simple and use actual image? – Shadow Wizard Jan 23 at 9:06
  • 1
    We've standardized on using a SVG sprite that has all our logos/images. For our other sites (not the blog), that helps with caching as well as maintenance for our design team. Since the blog is hosted on a different domain, the caching benefits are minimal, but the ability to just update one file when the design team makes tweaks to the images makes it worth continuing that pattern on the blog. – John M. Wright Jan 23 at 16:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .