only part of image can be displayed when loading a larger size svg

[luofc21]

hi, why the image is incomplete when i loading a 40*40 size svg file. Is there something wrong in my configuration?

[WangJincheng4869]

我也遇到了同样的问题（I also encountered the same problem）#97

[lalawila]

same as me

[wjjwkwindy]

我这里遇到的情况是，filter 的 id 被 svgo 压缩为了字符a，导致页面所有 svg 的 filter 错乱，进而影响显示。

The situation I encountered here is that the id of the filter is compressed into the character a by svgo, which causes all the filters of the svg on the page to be confused, which in turn affects the display.

<svg width="21" height="22" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-4be4c1a3="">
    <g filter="url(#a)" fill="#32C5FF">
        <path d="M5.128 14.5c-.288 0-.577-.113-.798-.34a1.188 1.188 0 0 1 0-1.644L8.716 8 4.33 3.484a1.188 1.188 0 0 1 0-1.644 1.107 1.107 0 0 1 1.597 0l5.184 5.338c.44.453.44 1.19 0 1.644L5.927 14.16c-.221.227-.51.34-.799.34Z"></path>
        <path d="M10.687 14.5c-.289 0-.577-.113-.798-.34a1.188 1.188 0 0 1 0-1.644L14.275 8 9.89 3.484a1.188 1.188 0 0 1 0-1.644 1.107 1.107 0 0 1 1.596 0l5.185 5.338c.44.453.44 1.19 0 1.644l-5.185 5.338c-.22.227-.51.34-.798.34Z"></path>
    </g>
    <defs>
        <filter id="a" x="0" y=".5" width="21" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
            <feOffset dy="3"></feOffset>
            <feGaussianBlur stdDeviation="2"></feGaussianBlur>
            <feComposite in2="hardAlpha" operator="out"></feComposite>
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0.733333 0 0 0 0 1 0 0 0 0.57 0"></feColorMatrix>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_512_2405"></feBlend>
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_512_2405" result="shape"></feBlend>
        </filter>
    </defs>
</svg>

解决办法：vite 中配置 svgo，添加唯一的 id 前缀，参考https://github.com/svg/svgo/issues/674#issuecomment-1353701782

Solution: configure svgo in vite, add a unique id prefix, refer to https://github.com/svg/svgo/issues/674#issuecomment-1353701782

svgLoader({
  svgoConfig: {
    plugins: [
      {
        name: 'prefixIds',
        params: {
          prefix: Math.random().toString(32).slice(2),
        },
      }
    ],
  }
}),

[gkatsanos]

@wjjwkwindy thank you!