仅内嵌SVG可正常显示？三种SVG展示方式故障排查求助

我尝试通过三种不同方式展示同一张SVG：

import "./styles.css";
import { SVGString } from "./svgString";

document.getElementById("app").innerHTML = `
<h1>SVG</h1>
<div class="pics">
  ${SVGString}
  <img src="data:image/svg+xml,${encodeURIComponent(SVGString)}"></img>
  <img src="public/file.svg"></img>
</div>
`;

但只有第一种直接嵌入字符串的方式可以正常显示，另外两种方式虽语法看似正确却无法生效。我怀疑是SVG本身存在问题，以下是svgString.js和file.svg中的SVG标记：

<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 350 350">
  <rect x="0" y="0" width="350" height="350" fill="#171512" />
  <g transform="translate(62.5,75)">
    <g>
      <rect x="0" y="0" width="56.25" height="56.25" rx="50%" fill="#8C69EC" />
      <rect x="28.125" y="28.125" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="0" y="28.125" width="28.125" height="28.125" fill="#8C69EC" />
    </g>
    <g>
      <rect x="168.75" y="0" width="56.25" height="56.25" rx="50%" fill="#8C69EC" />
      <rect x="168.75" y="28.125" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="196.875" y="28.125" width="28.125" height="28.125" fill="#8C69EC" />
    </g>
    <g>
      <rect x="0" y="56.25" width="56.25" height="56.25" rx="50%" fill="#8C69EC" />
      <rect x="0" y="56.25" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="28.125" y="56.25" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="28.125" y="84.375" width="28.125" height="28.125" fill="#8C69EC" />
    </g>
    <g>
      <rect x="168.75" y="56.25" width="56.25" height="56.25" rx="50%" fill="#8C69EC" />
      <rect x="168.75" y="56.25" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="168.75" y="84.375" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="196.875" y="56.25" width="28.125" height="28.125" fill="#8C69EC" />
    </g>
    <g>
      <rect x="56.25" y="56.25" width="56.25" height="56.25" rx="50%" fill="#8C69EC" />
      <rect x="56.25" y="56.25" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="56.25" y="84.375" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="84.375" y="56.25" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="84.375" y="84.375" width="28.125" height="28.125" fill="#8C69EC" />
    </g>
    <g>
      <rect x="112.5" y="56.25" width="56.25" height="56.25" rx="50%" fill="#8C69EC" />
      <rect x="112.5" y="56.25" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="112.5" y="84.375" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="140.625" y="56.25" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="140.625" y="84.375" width="28.125" height="28.125" fill="#8C69EC" />
    </g>
    <g>
      <rect x="56.25" y="168.75" width="56.25" height="56.25" rx="50%" fill="#8C69EC" />
      <rect x="84.375" y="168.75" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="84.375" y="196.875" width="28.125" height="28.125" fill="#8C69EC" />
    </g>
    <g>
      <rect x="112.5" y="168.75" width="56.25" height="56.25" rx="50%" fill="#8C69EC" />
      <rect x="112.5" y="168.75" width="28.125" height="28.125" fill="#8C69EC" />
      <rect x="112.5" y="196.875" width="28.125" height="28.125" fill="#8C69EC" />
    </g>
    <g>
      <rect x="0" y="53.125" width="56.25" height="6.25" fill="#8C69EC" />
      <rect x="168.75" y="53.125" width="56.25" height="6.25" fill="#8C69EC" />
      <rect x="165.625" y="56.25" width="6.25" height="56.25" fill="#8C69EC" />
      <rect x="53.125" y="56.25" width="6.25" height="56.25" fill="#8C69EC" />
      <rect x="109.375" y="56.25" width="6.25" height="56.25" fill="#8C69EC" />
      <rect x="109.375" y="168.75" width="6.25" height="56.25" fill="#8C69EC" />
    </g>
    <g>
</svg>

请求协助排查另外两种SVG展示方式失效的原因。

内容的提问来源于stack exchange，提问作者chocojunkie