For the use case of a logo, is it better to inline an SVG object or do an img src file SVG?

Our static layouts from our excellent designer included an inline SVG (<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 95 37" style="enable-background:new 0 0 95 37;" xml:space="preserve"> and then four <path>s and a couple of <rect>s and <circle>s and of course the closing </svg>). The theme we’re building on has an img src (and by default expects a logo.svg file).

Which is better for a small logo that’s shown on every page?

https://stackoverflow.com/questions/23210126/inline-svg-vs-svg-file-performance

Confirms that:

Ahh, hmm, a color: currentColor line in the CSS does apply to the inlined logo in the static design, and it does indeed change color if that is changed or removed. Seems to keep the functionality the same we’d better embed it. If we BigPipe our site it won’t even matter that the SVG logo “is loaded on every page” because we’ll be loading the overall page template just once anyway, and changing the pieces that fill in.

But that brings us to a new question. There is no text in this SVG, but visually it clearly spells “agaric”.

https://stackoverflow.com/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml#4756461

Here’s what i’ve ended up with for now:

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 95 37" style="enable-background:new 0 0 95 37;" xml:space="preserve" role="img" aria-label="agaric">
  <title>agaric</title>
  <path class="logo-color" d="M13,8.8c-0.7-0.8-1.5-1.3-2.4-1.7C9.7,6.7,8.8,6.5,7.8,6.5c-2.2,0-4,0.8-5.5,2.5C0.8,10.6,0,12.7,0,15.3
    c0,2.5,0.8,4.5,2.3,6.2c1.6,1.7,3.4,2.5,5.5,2.5c1,0,1.8-0.2,2.7-0.5c0.8-0.3,1.6-0.9,2.4-1.7v1.8h4.2V6.9H13V8.8z M11.9,18.8
    c-0.9,0.9-1.9,1.4-3.2,1.4c-1.3,0-2.3-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.5c0-1.4,0.4-2.6,1.3-3.5c0.8-0.9,1.9-1.4,3.2-1.4
    c1.3,0,2.4,0.4,3.3,1.3c0.9,0.9,1.3,2.1,1.3,3.5C13.2,16.7,12.7,17.9,11.9,18.8z"/>
  <path class="logo-color" d="M55.5,23.5V6.9h-4.2v1.8c-0.7-0.8-1.5-1.3-2.4-1.7c-0.9-0.4-1.8-0.6-2.8-0.6c-2.2,0-4,0.8-5.5,2.5
    c-1.5,1.6-2.3,3.7-2.3,6.3c0,2.5,0.8,4.5,2.3,6.2c1.6,1.7,3.4,2.5,5.5,2.5c1,0,1.8-0.2,2.7-0.5c0.8-0.3,1.6-0.9,2.4-1.7v1.8H55.5z
     M50.2,18.8c-0.9,0.9-1.9,1.4-3.2,1.4c-1.3,0-2.3-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.5c0-1.4,0.4-2.6,1.3-3.5
    c0.8-0.9,1.9-1.4,3.2-1.4c1.3,0,2.4,0.4,3.3,1.3c0.9,0.9,1.3,2.1,1.3,3.5C51.5,16.7,51.1,17.9,50.2,18.8z"/>
  <path class="logo-color" d="M86.8,20.1c-1.5,0-2.7-0.4-3.6-1.3c-0.9-0.9-1.4-2-1.4-3.4c0-1.4,0.5-2.6,1.4-3.6c1-0.9,2.2-1.4,3.8-1.4
    c0.9,0,1.6,0.1,2.2,0.4c0.6,0.3,1.3,0.7,1.9,1.4l3.5-1.9c-0.8-1.2-1.9-2.1-3.2-2.8c-1.3-0.7-2.8-1-4.4-1c-1.8,0-3.4,0.4-4.8,1.2
    c-1.4,0.8-2.6,1.8-3.4,3.2c-0.8,1.3-1.2,2.8-1.2,4.4c0,2.3,0.8,4.3,2.5,6.1c1.6,1.7,3.9,2.6,6.8,2.6c3.2,0,5.7-1.2,7.5-3.5
    l-3.3-2.2C90.1,19.5,88.6,20.1,86.8,20.1z"/>
  <path class="logo-color" d="M34.2,5.7l-1.7,1.7c-1.1-0.6-2.4-1-3.7-1c-7.6,0-9.1,5.6-9.1,8.7c0,1.6,0.4,3.9,1.9,5.7
    c-1.4,2.2-2.9,6.2-1.7,9.8c0.3,1.4,1.1,2.6,2.3,3.7c1.6,1.5,3.6,2.2,5.9,2.2c0,0,0,0,0,0c0,0,0,0,0,0c2.3,0,4.3-0.7,5.9-2.2
    c1.6-1.5,2.4-3.3,2.4-5.4c0-2.2-1.4-3.2-3.3-3.2h-9.7c0.3-1.1,0.7-2.1,1.1-2.7c1.2,0.5,2.6,0.8,4.3,0.8c2.2,0,4.1-0.8,5.6-2.5
    c1.5-1.6,2.3-3.7,2.3-6.2c0-2-0.5-3.7-1.4-5.1l1.7-1.7L34.2,5.7z M32.6,29.5c-0.1,0.9-0.5,1.6-1.2,2.2c-0.9,0.9-2,1.3-3.4,1.3
    c0,0,0,0-0.1,0l0,0l0,0c0,0,0,0-0.1,0c-1.4,0-2.4-0.4-3.4-1.3c-0.7-0.7-1.1-1.4-1.2-2.2H32.6z M31.2,18.7c-0.9,0.9-1.9,1.4-3.2,1.4
    c-1.3,0-2.4-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.6c0-1.4,0.4-2.6,1.3-3.5c0.9-0.9,1.9-1.3,3.3-1.3c1.3,0,2.4,0.5,3.2,1.4
    c0.8,0.9,1.3,2.1,1.3,3.5C32.5,16.6,32.1,17.8,31.2,18.7z"/>
  <rect x="71.4" y="6.9" class="logo-color" width="4.2" height="16.6"/>
  <circle class="logo-color" cx="73.5" cy="2.7" r="2.7"/>
  <rect x="38.3" y="25.9" class="logo-color" width="55.6" height="3.6"/>
  <rect x="0.8" y="25.9" class="logo-color" width="16.4" height="3.6"/>
  <path class="logo-color" d="M58.3,6.9v16.6h4.1v-8.6c0-3.2,1-4.7,3.1-4.7c0.7,0,1.4,0.3,2.1,0.8l1.8-3.5c-1.1-0.7-2.2-1-3.2-1
    c-0.8,0-1.4,0.1-2,0.4c-0.5,0.3-1.2,0.8-1.9,1.5V6.9H58.3z"/>
</svg>

Hmm but that doesn’t have our name as an h1 or h2 heading element. Well now i’m overthinking and going off on tangents…

https://moz.com/community/q/brand-name-as-h1-on-every-page

Answer: No.

(To be fair i was thinking Agaric Builds a new web site type of thing but… i like that there seems to be a convention to leave the header out of the heading structure.)

This person argues for that: https://webmasters.stackexchange.com/questions/86722/for-seo-of-the-company-name-should-we-use-a-logo-with-alt-text-or-a-company-nam

I remember that a lot of Drupal themes used to, and maybe still do, turn the site name into an h1 on the home page, but remove it from the site name and let the node title get the h1 on every other page, which is probably ideal.

It’s best not to do a check for front page in a block, as blocks should be cached for performance reasons, and fortunately in our case we can do it directly in the page template pretty easily. I’m probably throwing away potential BigPipe advantages then, though.