IMG 标签渲染中的 SVG 与预期不符答案

【问题标题】：SVG in IMG tag rendering not as expectedIMG 标签渲染中的 SVG 与预期不符
【发布时间】：2021-08-09 12:32:17
【问题描述】：

只是一个快速解决我在使用自定义 SVG 图标时遇到的问题。

我们为我们的一位客户使用了矢量图标集，并且我们正在使用他们网站上的图标。

我已经从插画家输出了 SVG，然后使用 IMG 标签在网站上链接到它们。然而，图标呈现真的很奇怪。边缘看起来很不稳定，而不是应有的样子。我已经在网站上粘贴了代码和图标的屏幕截图。

有人知道怎么解决吗？

提前致谢！

<img src="/assets/images/misc/why-icon-1.svg" class="img-fluid img-center overlayImage"/>

.overlayImage {
position: absolute;
top: 28%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
width: 77px;

}

【问题讨论】：

标签： image svg

【解决方案1】：

我想通了！对于遇到同样问题的其他人，这里是答案：

基本上，从 Illustrator 导出 SVG 时，您需要将小数位设置为更大的数字。数字范围从 1-7 越高，SVG 越好，但文件大小也会增加。我发现 3 是一种快乐的媒介。

【讨论】：