为什么我的 SVG 图标在大屏幕上如此模糊？

Question

我对使用 SVG 图标还很陌生，我似乎不明白为什么我的图标是模糊的。你能帮忙吗？谢谢

  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <mask id="mask0_12_275" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
    <rect width="12" height="12" fill="url(#pattern0)"/>
    </mask>
    <g mask="url(#mask0_12_275)">
    <rect x="-5" y="-7" width="23" height="21" fill="#C6C6C6"/>
    <rect x="-5" y="-7" width="23" height="21" fill="black" fill-opacity="0.2"/>
    <rect x="-5" y="-7" width="23" height="21" fill="black" fill-opacity="0.2"/>
    </g>
    <defs>
    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image0_12_275" transform="scale(0.01)"/>
    </pattern>
    <image id="image0_12_275" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAD4ElEQVR4nO3dy2tcVRwH8M+Mj9iSNI31gfisVEVLU1QEQS2C26JiN75wIxIEBVFEFy66K4ob3bjxfxB0o7gQXPlCpZhidyrik7aKqRpbGxfniul0xrl35s7MuZPfB36bm5nMOeebOzf3d+8khBBCCCGEEEIIIYQQQgghhBBCCKGqGTyJD7CCtaihaqVYyydwboUcwKX4PINJTGt9VqxxKTMRxljqU132lHaXQJawu8v2UK8b8Vjnxm6BPDT6sYTCw50bWl0e9BtmRz+WIB3o59Zv6BbI2njGEgqnZdDtLStMUASSmQgkMxFIZiKQzEQgmYlAMnN2zd/vBJalPs0yvsO3OIY/iq+v4BR+LZ4zL/1gzOIcbMICLpMacDfgJuwsvj5N4yqlapPsFN7EAzrOOms2hwfxVvGaTR1XZ/VV5Zst445aplXNHhxq4LhGGsghbK1tKtUt4MsGjWvkgdxd4yQGda/mjGvkgWypcwYDmteccZUKZJhub7fnTkLneHMdVy/R7c1ZBJKZCCQzdZ+pT0Iux4xaxB6SmQgkMxFIZqoeQ/7GO3h9yNedwRVS1/SCdbWtqFmpabe5eOxW6S6/ztuT5pw5hzX80rHtd6wW21dxXOruruBIR/2M7/GV1Ake1F14FPfhvLJPKntieByv4RWpbV3GWbgai9iF63BlUZf0eO3c/ISv8Q0O46DUuDwstezLOF+6wfopqc/Vqe86rD+tX8VLuLDEC89jL17Gh1KIVVvRTalV6YbpV7Gvwvrsl/a6gXpZ7+H6Po/djufxEU7WMNGm1ilp79lfYs124N11z+3rBJ7Ve1fahMelvWDSC5FrHcTTel8Ya+EZJd/27uyxfQEv4McMJtyUOoYDuLjiWv+vFh6RDnCTnmBTawXPSb/oDOUqvJ/BhKalPsa1lRJY51b8kMEkpq2OSucoldyDPzMY/LTWX7i/bBi3iE/djiuUvnvK5eLgPc46Kp3L9fRGBoPcaPV2rzD2ZjC4jVr7ugXySQYD26j1haIz8u/1kNtwc7eUwljsxO38F8jS5MYSCkuk3aQlXZDp1W8J43EEF7WlC0gRxuRtw662dAt9yMOetiGaXaF217SlK1ghDzva+py6h7Ha3pYuvoc8bGlL9z6FPGxuSRfap+Gm62lQ9l6vEEII4QwtqR8fMhGfD8lMBJKZCCQzEUhmIpDMRCCZiUAyE4FkJgLJ0KB3252UPq61KC5ykdZgUVqTYT4AO/ATD4x8is31ogkEEv8WqbfdJhBIvE31VuVvLp5Ww3R7m/CnMSZpoHWN37IyE4FkJgLJTASSmQgkMxFIZiKQzPwDFB6i1e0VaQEAAAAASUVORK5CYII="/>
    </defs>
</svg>