share the shift logo to trim page size

[ionous]

the shift logo is about 15k and gets embedded into every individual page.
it'd be better i think to load that as an svg or png and share across pages.

[ionous]

the icons are also included that way. those might be small enough where embedding makes sense. ( this is where it would be nice to have a build step, so the builder could decide. not sure if hugo, or one of its plugins?, can do that. )

• icon-endlocation
• icon-loop
• icon-website
• icon-phone
• icon-endtime
• icon-email
• icon-time
• icon-arrow-down
• icon-newsflash
• icon-organizer
• icon-location

[carrythebanner]

In terms of styling and accessibility, inlined SVGs are generally best (e.g. <svg><!-- paths etc --></svg>). However, you're right that inlined SVGs can’t be cached as separate assets in the way that an external SVG or PNG might (e.g. <img src="file.svg"> or <img src="file.png">).

We've already separated the definition of the SVG from where it's actually used on the page, as in this (simplified) example:

<!-- some_page.html -->
<svg>
  <symbol id="foo">
    <!-- paths etc -->
  </symbol>
  <symbol id="bar">
    <!-- paths etc -->
  </symbol>
</svg>

<-- other document contents -->

<svg>
  <use href="#foo" />
</svg>
<svg>
  <use href="#foo" />
</svg>
<svg>
  <use href="#bar" />
</svg>

However, modern browsers now also have the ability reference an external SVG file via <use>. It can reference a fragment by ID, or an entire file*.

<!-- icons.svg -->
<svg>
  <symbol id="foo">
    <!-- paths etc -->
  </symbol>
  <symbol id="bar">
    <!-- paths etc -->
  </symbol>
</svg>

<!-- logo.svg -->
<svg>
  <!-- paths etc -->
</svg>

<!-- some_page.html -->
<svg>
  <use href="icons.svg#foo" />
</svg>
<svg>
  <use href="icons.svg#foo" />
</svg>
<svg>
  <use href="icons.svg#bar" />
</svg>
<svg>
  <use href="logo.svg" />
</svg>

We need to double-check support for this, but I think it should be OK to use now.

(*Double-check this, I'm not sure if this is as well-supported as external fragments.)

[carrythebanner]

(Thanks for surfacing this, I've been meaning to dig into this for a while.)

[ionous]

oh, cool. i didn't know that about the accessibility issues, nor about the svg use references.
and it does look like all the major browsers support it:
https://caniuse.com/mdn-svg_elements_use_href

( and a reference to the mdn documentation ... )
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use