HTML img element (or v-img) will not load SVG, request has status 200 but empty response in Dev Tools > Network, No CORS issue and no error in console [duplicate]

I am trying to load an SVG image in a Veutify/Vue web app without embedding the SVG in the project build bundle. I want to loaded the image dynamically at runtime. When referencing the image via the src element on a a v-img component, it will not load the file although there is a status 200 response from the server. I have tried simplifying the v-img to a simple html img element, and the problem persists.

In Chrome development tools it shows the request/response with 200 a status code, but the response is shown as empty. There is no error in the console. Adding an error handler will fire the attached function, but it does not give an error reason. Opening the same image URL in the browser shows the SVG image source code with the message "This XML file does not appear to have any style information associated with it. The document tree is shown below." I tried adding Content Security Policy (CSP) headers to fix any CORS issues, but this didn't help.

Reproduction steps:

Simple HTML img element embedded in a valid HTML document:

<img src="example.svg" />

SVG file contents:

<svg width="300" height="200" viewBox="0 0 300 200">
  <path fill="#fff" stroke="#000" stroke-width="2" d="M0 0h300v200H0z"/>
  <path stroke="#000" stroke-width="2" d="m0 0 300 200m0-200L0 200" opacity="0.25"/>
  <text x="150" y="100" font-size="24" text-anchor="middle" dominant-baseline="middle">Development</text>
</svg>

In Visual Studio Code, I see the message "An error occurred while loading the image. Open file using VS Code's standard text/binary editor?" The image was generated using an online tool, so it is assumed to be valid SVG code. It is viewable in other editors.