Html SVG在大屏幕绘制时闪烁

我有一个“标准”的web报头徽标片段，我优先使用SVG徽标，代码如下所示

<div class="site-branding">
  <a id="logo" href="/">
    <img src="/pathto/logo.svg">
  </a>
</div>

各种组件的大小由CSS控制

我遇到的问题是，当页面呈现时，SVG首先绘制，以便在容器的CSS约束它之前，它会全速闪烁。似乎SVG（作为没有大小信息的XML）在图像之前渲染，默认情况下是视口的全宽。如果我使用PNG，它具有固有的大小信息，因此不会以相同的方式受到影响

这通常不是一个问题，当然也不是在缓存页面之后，但是在一个缓慢的连接上可能是明显的和丑陋的。即使在更快的连接上，通常也会出现较大图像的闪烁

---

我需要做什么来防止这种行为？应该说，硬编码

img

标签的大小是我最不喜欢的选择。

有几件事。。。您的样式表是否链接到

中？您是否有权访问SVG文件，如果有权，是否可以向实际的

元素添加

宽度

和

高度

属性？抱歉，忘记返回。是的，样式表在头部。我将尝试添加

宽度

和

高度

，

视口

没有任何区别我已经开始使用属性宽度，这意味着对演示文稿进行了一些硬编码，但是嘿，它很管用