svg 或 png 以获得更好的 PIXI.js 和 WebGL 性能？
svg or png for better performance in PIXI.js and WebGL?
我的问题似乎并不新鲜，但就我搜索了几天而言，我找不到答案。
我正在尝试制作一个使用 webGL 的 PIXI.js 网页。
我的网页是鼠标移动视差，我的意思是当用户移动 his/her 鼠标指针时，一个对象可以有的所有移动都是几个像素。
现在我的问题是：我有一些简单的图像，但我不知道使用 svg 或 png。
我的图片是这样的：
我想让我的网页尽可能流畅，但我不知道使用 png 还是 svg。我搜索了很多，有人说这取决于 png 和 svg，在我的情况下我的 svgs 不会太复杂但有人说因为 svg 使用 CPU 而 WebGL 使用 GPU 同时使用它们，导致性能不足，还有一些人说在 PIXI 中使用 svg 与 png 没有区别，因为 PIXI 从它们中获得纹理并且不会有任何差异...
我是 webGL 和 Pixi 的新手，所以现在有了这些答案我感到很困惑，顺便说一下，对于我来说图像大小并不重要，我只想要尽可能平滑。
非常感谢您的帮助。
这对运行时性能没有影响，SVG 将以任何一种方式光栅化为纹理。但是，在 初始化 期间，浏览器需要光栅化 SVG 以从中创建纹理，这可能会严重影响性能，具体取决于 SVG 的复杂程度。
但是，由于您正在为 Web 开发，因此您从服务器加载 SVG 的事实很容易抵消上述损失，这会比光栅化 SVG 引入更多的延迟，如果您考虑光栅化 PNG 和 SVG 之间的大小差异（假设您不打算从中创建微小的纹理）。
所以最后的结论是，选择 SVG，它无损且体积小，而且可以在客户端代码中调整大小和编辑。它还可以避免您每次更改内容时都将源资源导出为 PNG。
我的问题似乎并不新鲜，但就我搜索了几天而言，我找不到答案。
我正在尝试制作一个使用 webGL 的 PIXI.js 网页。 我的网页是鼠标移动视差，我的意思是当用户移动 his/her 鼠标指针时，一个对象可以有的所有移动都是几个像素。
现在我的问题是：我有一些简单的图像，但我不知道使用 svg 或 png。
我的图片是这样的：
我想让我的网页尽可能流畅，但我不知道使用 png 还是 svg。我搜索了很多，有人说这取决于 png 和 svg，在我的情况下我的 svgs 不会太复杂但有人说因为 svg 使用 CPU 而 WebGL 使用 GPU 同时使用它们，导致性能不足，还有一些人说在 PIXI 中使用 svg 与 png 没有区别，因为 PIXI 从它们中获得纹理并且不会有任何差异...
我是 webGL 和 Pixi 的新手，所以现在有了这些答案我感到很困惑，顺便说一下，对于我来说图像大小并不重要，我只想要尽可能平滑。
非常感谢您的帮助。
这对运行时性能没有影响，SVG 将以任何一种方式光栅化为纹理。但是，在 初始化 期间，浏览器需要光栅化 SVG 以从中创建纹理，这可能会严重影响性能，具体取决于 SVG 的复杂程度。
但是，由于您正在为 Web 开发，因此您从服务器加载 SVG 的事实很容易抵消上述损失，这会比光栅化 SVG 引入更多的延迟，如果您考虑光栅化 PNG 和 SVG 之间的大小差异（假设您不打算从中创建微小的纹理）。
所以最后的结论是，选择 SVG，它无损且体积小，而且可以在客户端代码中调整大小和编辑。它还可以避免您每次更改内容时都将源资源导出为 PNG。