Html 为什么我的SVG图像的字体和空格由浏览器编辑？

我正在集成HTML和CSS中的psd模型。在这些实体模型中，有SVG图像（特别是徽标），我必须将它们集成到navbar中。问题在于：当我在HTML中链接SVG徽标时，浏览器会编辑其字体和间距

我尝试链接PNG版本，它可以工作：不做任何编辑。但是，标志模糊，这不是我想要的结果

然后我尝试将SVG图像与

标记集成，但我不明白它是如何工作的，图像根本没有出现

在这里，您可以通过我的3次尝试找到：

<div>
     <!--With svg-->
     <a href="index.html"><img src="http://54.38.187.146/visa-en-ligne/images/logotest.svg" class="top-navbar-logo"></a>

     <!--With png-->
     <a href="index.html"><img src="http://54.38.187.146/visa-en-ligne/images/logotest.png" class="top-navbar-logo"></a>

     <!--Tried this below but doesn't work-->
     <svg viewBox="0 0 16 16">
         <use xlink:href="http://54.38.187.146/visa-en-ligne/images/logotest.svg" ></use>
     </svg>            
 </div>

我的朋友：

实际结果（代码中的第一次尝试）：编辑SVG徽标的字体和间距。下面是截图

预期结果：包括SVG（而不是PNG）徽标，而不需要浏览器对其进行编辑。我希望图像是原来的一个（它看起来像下面）

---

取决于浏览器是否能找到字体SegoeUIBlackone解决方案将为.com使用

：

aa ligne.com

告诉创建svg的设计师，他需要将内联文本更改为路径，否则，如果无法（不建议）保留预期结果，您需要提供显式字体。如果他使用的是Adobe Illustrator这样的编辑器，只需选择文本，右键单击，然后选择“创建大纲”，就可以了。然后，无论您在何处/以何种方式使用该图像，它都将按照预期效果显示。干杯谢谢你的评论@RobertLongson我有一个CSS文件，我在其中声明了这种字体（带有@font-face），即使我声明了

。顶部导航栏徽标{font-family:'Segoe UI Black'，sans serif；}

，它不起作用。@enxaneta这意味着用HTML编写文本，我只想集成.svg。这取决于浏览器是否能找到字体SegoeUIBlackone解决方案将为.com使用

：保留预期的结果。如果他使用的是Adobe Illustrator这样的编辑器，只需选择文本，右键单击，然后选择“创建大纲”，就可以了。然后，无论您在何处/以何种方式使用该图像，它都将按照预期效果显示。干杯谢谢你的评论@RobertLongson我有一个CSS文件，我在其中声明了这种字体（带有@font-face），即使我声明了

。顶部导航栏徽标{font-family:'Segoe UI Black'，sans serif；}

，它不起作用。@enxaneta这意味着要用HTML编写文本，我只想集成.svg。