Skip to main content

SVG

🌐 SVG's

概述​

🌐 Overview

PixiJS 提供了对 SVG 渲染的强大支持，允许开发者将可缩放的矢量图形无缝地集成到他们的项目中。本指南探讨了在 PixiJS 中使用 SVG 的不同方式，涵盖了实时渲染、性能优化以及潜在的陷阱。

🌐 PixiJS provides powerful support for rendering SVGs, allowing developers to integrate scalable vector graphics seamlessly into their projects. This guide explores different ways to use SVGs in PixiJS, covering real-time rendering, performance optimizations, and potential pitfalls.

为什么使用 SVG？​

🌐 Why Use SVGs?

与 PNG 等光栅图片相比，SVG 有几个优势：

🌐 SVGs have several advantages over raster images like PNGs:

  • ✅ 更小的文件大小 – SVG的文件大小可以明显小于PNG，尤其是对于大而简单的图形。高分辨率的PNG可能有几兆字节，而等效的SVG可能只有几千字节。
  • ✅ 可扩展性 – SVG 可以在不损失质量的情况下缩放，非常适合响应式应用和用户界面元素。
  • ✅ 渲染后可编辑 – 与纹理不同，通过图形渲染的 SVG 可以动态修改（例如，更改描边颜色、修改形状）。
  • ✅ 适合简单图形 – 如果图形由基本形状和路径组成，SVG 可以作为矢量图形高效渲染。

但是，解析 SVG 的计算成本也很高，尤其是对于具有许多路径或效果的复杂插图。

🌐 However, SVGs can also be computationally expensive to parse, particularly for intricate illustrations with many paths or effects.

在 PixiJS 中渲染 SVG 的方法​

🌐 Ways to Render SVGs in PixiJS

PixiJS 提供两种主要的 SVG 渲染方式：

🌐 PixiJS offers two primary ways to render SVGs:

  1. 作为纹理 – 将 SVG 转换为用于作为精灵渲染的纹理。
  2. 作为图形对象 – 解析 SVG 并将其渲染为矢量几何。

每种方法都有其优点和用例，我们将在下面进行探讨。

🌐 Each method has its advantages and use cases, which we will explore below.

1. 将 SVG 渲染为纹理​

🌐 1. Rendering SVGs as Textures

概述​

🌐 Overview

SVG 可以作为纹理加载并在精灵中使用。这种方法效率高，但无法保持矢量图形的可伸缩性。

🌐 SVGs can be loaded as textures and used within Sprites. This method is efficient but does not retain the scalability of vector graphics.

示例​

🌐 Example

const svgTexture = await Assets.load('tiger.svg');
const mySprite = new Sprite(svgTexture);

缩放纹理​

🌐 Scaling Textures

在将 SVG 作为纹理加载时，你可以指定分辨率以控制其大小：这确实会增加内存使用，但可以获得更高的精细度。

🌐 You can specify a resolution when loading an SVG as a texture to control its size: This does increase memory usage, but it be of a higher fidelity.

const svgTexture = await Assets.load('path/to.svg', {
  resolution: 4, // will be 4 times as big!
});
const mySprite = new Sprite(svgTexture);

这可确保纹理以正确的大小和分辨率显示。

🌐 This ensures the texture appears at the correct size and resolution.

优点和缺点​

🌐 Pros & Cons

  • ✅ 渲染快速（以四边形渲染，而不是几何体）
  • ✅ 适合静态图片
  • ✅ 支持分辨率缩放以实现精确尺寸
  • ✅ 适合不需要清晰矢量缩放的复杂 SVG（例如，具有固定尺寸的 UI 组件）
  • ❌ 无法平滑缩放（缩放可能导致像素化）
  • ❌ 灵活性较差（无法动态修改形状）
  • ❌ 纹理尺寸限制 纹理最大只能为 4096x4096 像素，因此如果你需要渲染更大的 SVG，需要使用图形方法。

最佳用例​

🌐 Best Use Cases

  • 背景图片
  • 装饰元素
  • 不需要缩放的性能关键型应用
  • 不需要清晰矢量缩放的复杂 SVG（例如，固定大小的 UI 组件）

2. 将 SVG 渲染为图形​

🌐 2. Rendering SVGs as Graphics

概述​

🌐 Overview

PixiJS 可以使用 Graphics 类将 SVG 渲染为真正的可缩放矢量图形。

🌐 PixiJS can render SVGs as real scalable vector graphics using the Graphics class.

示例​

🌐 Example

const graphics = new Graphics().svg('<svg width="100" height="100"><rect width="100" height="100" fill="red"/></svg>');

如果你想多次使用同一个 SVG，你可以使用 GraphicsContext 在多个图形对象之间共享解析后的 SVG 数据，通过解析一次并重复使用来提高性能。

🌐 If you want to use the same SVG multiple times, you can use GraphicsContext to share the parsed SVG data across multiple graphics objects, improving performance by parsing it once and reusing it.

const context = new GraphicsContext().svg(
  '<svg width="100" height="100"><rect width="100" height="100" fill="red"/></svg>',
);

const graphics1 = new Graphics(context);
const graphics2 = new Graphics(context);

将 SVG 加载为图形​

🌐 Loading SVGs as Graphics

与其直接传递 SVG 字符串，你可以使用 PixiJS 的 Assets.load 方法加载 SVG 文件。这将返回一个 GraphicsContext 对象，可以用来高效创建多个 Graphics 对象。

🌐 Instead of passing an SVG string directly, you can load an SVG file using PixiJS’s Assets.load method. This will return a GraphicsContext object, which can be used to create multiple Graphics objects efficiently.

const svgContext = await Assets.load('path/to.svg', {
  parseAsGraphicsContext: true, // If false, it returns a texture instead.
});
const myGraphics = new Graphics(svgContext);

由于它是通过 Assets.load 加载的，它将被缓存并重复使用，就像纹理一样。

🌐 Since it's loaded via Assets.load, it will be cached and reused, much like a texture.


优点和缺点​

🌐 Pros & Cons

  • ✅ 保留矢量可伸缩性（放大时不失真）
  • ✅ 渲染后可修改（更改颜色、描边等）
  • ✅ 适用于简单图形
  • ✅ 如果 SVG 结构不变，渲染速度快（无需重新解析）
  • ❌ 解析成本更高（复杂的 SVG 渲染可能会很慢）
  • ❌ 不适合静态图片

最佳用例​

🌐 Best Use Cases

  • 需要调整大小的图标和 UI 元素
  • 当玩家放大时需要保持清晰的游戏世界
  • 需要动态修改 SVG 的交互式图形

SVG 渲染注意事项​

🌐 SVG Rendering Considerations

支持的功能​

🌐 Supported Features

PixiJS 支持大多数可以在 Canvas 2D 上下文中渲染的 SVG 功能。以下是常见 SVG 功能及其兼容性列表：

🌐 PixiJS supports most SVG features that can be rendered in a Canvas 2D context. Below is a list of common SVG features and their compatibility:

功能支持情况
基本形状（矩形、圆形、路径等）✅
渐变✅
描边与填充样式✅
文本元素❌
滤镜（模糊、投影等）❌
剪切路径✅
图案❌
复杂路径与曲线✅

性能注意事项​

🌐 Performance Considerations

  • 复杂的 SVG： 大型或复杂的 SVG 由于解析开销大，会导致渲染启动变慢。使用 GraphicsContext 缓存并重用解析的数据。
  • 矢量与纹理： 如果关注性能，可以考虑将 SVG 用作纹理，而不是作为几何体渲染。然而，请注意，纹理占用更多的内存。
  • 实时渲染： 避免动态渲染复杂的 SVG。尽可能预加载并重用它们。

最佳实践和陷阱​

🌐 Best Practices & Gotchas

最佳实践​

🌐 Best Practices

  • ✅ 使用图形以实现可缩放和动态的 SVG
  • ✅ 在性能敏感的应用中使用纹理
  • ✅ 使用 GraphicsContext 避免冗余解析
  • ✅ 在使用纹理时考虑 resolution 以平衡质量和内存

陷阱​

🌐 Gotchas

  • ⚠ 大型 SVG 解析可能会很慢 – 在在 PixiJS 中使用之前优化 SVG。
  • ⚠ 基于纹理的 SVG 无法干净缩放 – 如有必要，请使用更高分辨率。
  • ⚠ 并非所有 SVG 功能都受支持 – 复杂的滤镜和文本元素可能无法正常工作。

通过了解 PixiJS 如何处理 SVG，开发者可以在何时使用 Graphics.svg()、GraphicsContext 或 SVG 纹理做出明智的决定，从而在特定用例中平衡质量和性能。

🌐 By understanding how PixiJS processes SVGs, developers can make informed decisions on when to use Graphics.svg(), GraphicsContext, or SVG textures, balancing quality and performance for their specific use case.