Allow SVG logo to be inlined

[jasonkuhrt]

Is your feature request related to a problem? Please describe.

Currently logo is added using img element. This prevents certain kinds of CSS within the SVG from applying correctly, and it prevents CSS within the app (html file) from applying to it.

This is related to https://github.com/vuejs/vitepress/issues/3828 however my motivation is not exactly the same.

Describe the solution you'd like

I would like a way to specify that an SVG logo should be inlined directly into the HTML.

Describe alternatives you've considered

No response

Additional context

My goal is to have a single SVG logo file that will adapt to the dark/light mode theme automatically via this in its markup:

    <style>
        @media (prefers-color-scheme: light) { :root { filter: none; } }
        @media (prefers-color-scheme: dark) { :root { filter: invert(100%); } }
    </style>

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.