Javascript 动画svg加载图标，直到加载图像

我正在尝试使用CSS（或js，如果需要）实现svg图标的行为。我的HTML的结构如下所示：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" class="img load">
</picture> 

但是，我需要图标上的旋转效果。我不能使用gif图像，因为原始图标是自定义图标。因此，我需要把：

现在，老实说，我不确定我是否正确实现了它，因为我看不到图标加载。当我使用

png

图像进行测试时，我看到了图标加载；但是在使用了svg后，我看不到它正在加载。如果有任何问题或需要改进，请看一看并告诉我

---

添加

背景尺寸：100%在
图片中：在
之前。因为你的加载图片比盒子大。
这能回答你的问题吗？实际上，在使用了@Hancel的解决方案之后，我的代码现在可以正常工作了。但是，我不明白为什么png图标在没有css的情况下可以工作，而svg图标在没有css的情况下无法工作。谢谢，在使用它之后，演示现在似乎可以工作了。当我使用png图像时，它没有背景大小属性；但是在使用SVG图像之后，如果没有这个css，它就无法工作。知道为什么会发生这种情况吗？PNG和SVG的大小是一样的？不，有一点不同。你能给我一个示例代码来检查吗？
.load {
  background: transparent url('loading-icon.svg') no-repeat center;
}

picture:before {
  width: 50px;
  height: 50px;
  content: '';
  position: absolute;
  background: url('loading-icon.svg');
  /* top: 50%; */
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  animation: spin 2s linear infinite;
}