Inline base64 or SVG image for logo

[devwax]

What version of starlight are you using?

0.7.1

What is your idea?

Inline SVG or base64 for logo.

Why is this feature necessary?

It allows the user to reduce one extra network request and speed up the loading of the site by eliminating an external image call that is displayed on all pages of the site.

Do you have examples of this feature in other projects?

No examples from other projects, but here is what it could look like:

astro.config.mjs

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      favicon: '/favicon.ico',
      logo: {
        inline: {
          svg: '<svg>...</svg>',
          base64: 'data:image/png;base64,iVBORw0K...',
        },
        replacesTitle: true,
      },
    }),
  ],
});

if logo.inline.svg is present, then render the SVG inline where the logo's image tag would be.

Iflogo.inline.base64 is present, then insert the base64 string into the images src attribute.

Currently, if you assign a base64 string to the logo.src property, it throws an error:

Range Error - "Unknown module format: image/png for URL data:image/png;base64,iVB..."

Stack Trace
RangeError: Unknown module format: image/png for URL data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAPlJREFUOE9tU9ECg0AIkv//aDcU7rTqZaUOBRSIfjIigIjMCMYSEWBQOZXVT+VVDwCRmQo65fL7PTMHoMDUdpcKgCNoio6MKk/boYuJyEiDqohNkLmx3KNwq1Cki9yTeOfAmmpw8/zve0oiUM0xWQO4dhF+QUzBG8NQA3OKf3wj/2sbovQwgnKOTvHfHdWJnK8J/Xb0OoDL8u02kC1F+y0BqQ+/W0wv4ilKidVUrjPmXCMwU9MdgnO3tBVjlT3k3CnvD1dk3MFau899IK0iIG5N4eGkj6oSZb7b6IgIIKAF4Ctcp7kvYFibJccBsCjDqzOcd+OesSj8Az88+44b1F/B3AAAAABJRU5ErkJggg==
    at new NodeError (node:internal/errors:399:5)
    at ESMLoader.load (node:internal/modules/esm/loader:650:13)
    at async ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:11)
    at async link (node:internal/modules/esm/module_job:68:21)

I'll see if I can find what's going on in the source. If I can contribute I will.

Participation

• I am willing to submit a pull request for this issue.

[delucis]

One thing we could do here is to keep the current config but inline any SVG file provided, i.e. logo: { src: './src/logo.png' } continues to behave as it does currently, but if a user provides logo: { src: './src/logo.svg' }, we’ll load that file contents and inline it. Does that sound like a good idea?

Curious if anyone can think of reasons why inlining SVGs by default would be bad?

[HiDeoo]

Curious if anyone can think of reasons why inlining SVGs by default would be bad?

The obvious coming to mind may be caching?

[delucis]

Yeah that would be why I’d avoid inlining base 64 for other formats, but usually SVG is pretty lightweight and should compress pretty well with gzip, so maybe makes sense? Our Starlight docs logo is ~8k uncompressed and example pages are ~50k uncompressed. So it’s also not nothing. Would need to test how that looks after compression.

I guess by inlining you optimize first site visit, but de-optimize any future navigations which would have benefited from caching the image.

A secondary benefit would be that inline SVGs behave differently — they can access document scope, so for example you could set a fill using a color-theme-responsive variable and have a single file work in light and dark mode.

[HiDeoo]

I guess by inlining you optimize first site visit, but de-optimize any future navigations which would have benefited from caching the image.

Yeah, that's a good summary.

A secondary benefit would be that inline SVGs behave differently — they can access document scope, so for example you could set a fill using a color-theme-responsive variable and have a single file work in light and dark mode.

If I understand this correctly, isn't it already possible without inlining?

For example, if I take my personal website favicon which is an SVG looking like this:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
  <style>
    @media (prefers-color-scheme: dark) {
      path{
        fill: #xxxxxx;
      }
    }
  </style>
  <g fill="#yyyyyy">
    <path d="..." transform="..."/>
    <path d="..." transform="..."/>
  </g>
</svg>

If I use it in my Starlight config, e.g. logo: { src: "./src/assets/favicon.svg" }, it behaves properly with 1 file:

demo.mp4

Maybe I am missing the point tho ^^

[delucis]

I think maybe that doesn’t work in… I want to say Safari? i.e. there’s some variation in whether SVG <image>s use the OS color scheme preference or the CSS-provided color-scheme value. (Would be delighted to be wrong though!)

[HiDeoo]

I think maybe that doesn’t work in… I want to say Safari? i.e. there’s some variation in whether SVG <image>s use the OS color scheme preference or the CSS-provided color-scheme value. (Would be delighted to be wrong though!)

Ah damn it, you're 100% right, forgot about Safari 😢 Well, this is definitely another benefit then ^^