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

Question

我正在将psd样机集成到HTML和CSS中。在这些模型中，我必须将SVG图像（尤其是徽标）集成到导航栏中。问题如下：当我在HTML中链接SVG徽标时，浏览器会编辑其字体和间距。

我试图链接PNG版本，它可以正常工作：不进行任何编辑。但是，徽标模糊，这不是我想要的结果。

然后，我尝试将SVG图片与opacity:0.2标签集成在一起，但我不知道它是如何工作的，该图片根本没有出现。

您可以在这里尝试3次：

<svg>

我的jsfiddle： https://jsfiddle.net/HeloiseC/fpsqhkc8/1/

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

预期结果：包括SVG（而不是PNG）徽标，而无需浏览器对其进行编辑。我希望该图像是原始图像（如下图所示）。