Nhập SVG vào PixiJS: Chọn Graphics hay texture

PixiJS có thể dùng SVG theo hai cách: Graphics.svg() phân tích hình học bản vẽ được hỗ trợ, còn tải SVG làm texture cung cấp pixel cho Sprite hiển thị. Chọn hình học khi hình cần thay đổi tỷ lệ đáng kể, và texture khi ảnh raster có kích thước phù hợp với cách hiển thị dự định của tài nguyên. PixiJS mô tả cả hai cách trong hướng dẫn SVG.

Thử cùng tệp qua cả hai cách trước khi chọn. Biểu tượng nhỏ của chúng tôi giữ được lỗ và màu trong cả hai, nhưng cách hình học bỏ sót phép tịnh tiến nhóm. Texture khớp vị trí trong trình duyệt và mềm hơn khi phóng to. Đó là hai vấn đề riêng với cách sửa khác nhau.

Xác định cảnh cần gì

Đối tượng Graphics là nội dung vẽ Pixi, không phải cây DOM SVG có các ID phần tử gốc. Ngữ cảnh của nó có thể được chia sẻ giữa các bản thể, như hướng dẫn Graphics giải thích. Giữ SVG gốc khi cần sửa từng đường dẫn nguồn hoặc xuất SVG khác sau này. Cuối cùng, cả hai cách đều vẽ pixel lên màn hình.

Thử đường cong, lỗ và phép biến đổi

Ví dụ này dùng PixiJS 8.21.0, SVG 96 × 96, độ phân giải trình kết xuất 1 và texture SVG tải ở độ phân giải 1. Bản nhỏ được vẽ ở kích thước gốc; bản lớn dùng tỷ lệ 3. Biểu tượng gốc có hai đường dẫn màu và một nhóm được tịnh tiến tám đơn vị SVG theo mỗi hướng. Đường bao trong có hướng ngược đường bao ngoài để tạo lỗ.

Cùng SVG gốc qua ba trình kết xuất

Nền ô bàn cờ hiện qua lỗ ở cả ba cột. Nó là nền phía sau hình, không phải hình trắng được tô vào lỗ. Độ lệch cột giữa nhìn thấy ở cả hai kích thước: tám đơn vị ở tỷ lệ gốc thành 24 pixel hiển thị tại tỷ lệ 3.

Các quan sát này áp dụng cho nguồn và phiên bản này. Chúng không xác lập rằng mọi lỗ, phép biến đổi, chuyển sắc hay SVG xuất ra đều hoạt động giống nhau.

Lưu nguồn SVG

Lưu đoạn này thành emblem.svg cạnh trang. Đây là hình gốc được vẽ cho so sánh, không phải kết quả vector hóa.

<svg xmlns="http://www.w3.org/2000/svg"
     width="96" height="96" viewBox="0 0 96 96">
  <g transform="translate(8 8)">
    <path fill="#145c61" d="M40 0
      C62 0 80 18 80 40 C80 62 62 80 40 80
      C18 80 0 62 0 40 C0 18 18 0 40 0 Z
      M40 20 C29 20 20 29 20 40 C20 51 29 60 40 60
      C51 60 60 51 60 40 C60 29 51 20 40 20 Z"/>
    <path fill="#e68546"
      d="M62 5 C74 9 80 21 78 34 L61 32
         C63 23 61 15 55 10 Z"/>
  </g>
</svg>

Chạy cả hai cách

Đặt đoạn mã này trong trang HTML phục vụ qua HTTP cạnh emblem.svg. Nó nhập bản Pixi với phiên bản cố định, lấy SVG đáng tin cậy của bạn và vẽ bản gốc cùng bản phóng lớn trong hai cột. Cột trái dùng hình học; cột phải dùng texture.

<script type="module">
import { Application, Assets, Graphics, Sprite }
  from 'https://cdn.jsdelivr.net/npm/pixi.js@8.21.0/dist/pixi.mjs';
 
const app = new Application();
await app.init({
  width: 640, height: 420, resolution: 1,
  antialias: true, background: '#e7eeea', preference: 'webgl'
});
document.body.append(app.canvas);
 
const response = await fetch('emblem.svg');
if (!response.ok) throw new Error('SVG request failed');
const svgText = await response.text();
const texture = await Assets.load({
  src: 'emblem.svg', data: { resolution: 1 }
});
 
for (const [scale, y] of [[1, 12], [3, 120]]) {
  const geometry = new Graphics().svg(svgText);
  geometry.scale.set(scale);
  geometry.position.set(16, y);
  const sprite = new Sprite(texture);
  sprite.scale.set(scale);
  sprite.position.set(336, y);
  app.stage.addChild(geometry, sprite);
}
</script>

Cũng mở SVG gốc trong trình duyệt. So sánh đường bao ngoài, lỗ, hình màu nhấn và vị trí, không chỉ xem tệp có tải mà không lỗi hay không.

Sửa đúng chênh lệch bạn nhìn thấy

Hình học bị dịch vị trí

Trong phép thử này, Graphics.svg() không áp dụng translate(8 8) của nhóm bao quanh. Mã triển khai bộ phân tích SVG theo phiên bản cố định hữu ích khi kiểm tra hành vi của phiên bản trong dự án bạn.

Với riêng tệp này, thay dòng vị trí hình học bằng đoạn sau sẽ bù phép tịnh tiến đã biết đó:

geometry.position.set(16 + 8 * scale, y + 8 * scale);

Mức sửa chứa scale vì phép tịnh tiến bị thiếu thuộc hệ tọa độ nguồn. Tại tỷ lệ 3, mức sửa là 24 pixel theo mỗi hướng. Đây không phải công cụ làm phẳng biến đổi tổng quát. Tệp có xoay lồng nhau, xiên hoặc phép biến đổi khác nhau trên các đường dẫn riêng cần SVG bàn giao được chuẩn bị đúng hoặc cách kết xuất khác. So sánh tệp bàn giao xuất ra với bản gốc chỉnh sửa được.

Texture phóng lớn bị mềm

Texture SVG trong hình chứa 96 × 96 pixel. Tăng sprite lên 288 × 288 không đọc lại các đường cong nguồn. Để chuẩn bị thêm pixel, tải texture riêng ở độ phân giải cao hơn:

const largeTexture = await Assets.load({
  src: 'emblem.svg?resolution=3',
  data: { resolution: 3 }
});

Trong bản dựng đã thử, cách này tạo nguồn 288 × 288 pixel với kích thước texture logic 96 × 96 và độ phân giải nguồn 3. Dùng largeTexture khi tạo sprite. Chuỗi truy vấn cung cấp khóa bộ nhớ đệm riêng cho thử nghiệm; máy chủ phải phục vụ cùng SVG ở URL đó. Hướng dẫn Assets của Pixi giải thích bộ nhớ đệm theo URL, và hướng dẫn texture phân biệt texture với nguồn của nó.

Chọn độ phân giải cho kích thước sử dụng trên màn hình lớn nhất cần thiết, gồm độ phân giải trình kết xuất bạn thực sự phát hành. Chỉ tăng độ phân giải trình kết xuất không thêm chi tiết vào texture độ phân giải thấp đã tải. Cũng kiểm tra kích thước biểu tượng nhỏ nhất: nguồn lớn hơn không thể làm lỗ rất nhỏ rõ nếu hiển thị cuối quá nhỏ.

Chi tiết bị thiếu

Kiểm tra nguồn ban đầu trong trình duyệt rồi thử bản sao đơn giản hơn trong Pixi. Rút SVG xuống các hình bị ảnh hưởng, rồi thêm lại từng nhóm, màu và hiệu ứng. Tài liệu Graphics của Pixi mô tả hỗ trợ SVG là một tập con; tải thành công không phải kiểm tra tương thích đầy đủ.

Giữ bản bàn giao raster khi nó bảo toàn hình đáng tin cậy ở kích thước đã biết. Với biểu tượng hình học đơn giản, vẽ hình trực tiếp trong Pixi có thể dễ duy trì hơn. Đừng chọn cách dựa trên khẳng định chưa đo rằng nó luôn nhanh hơn hoặc dùng ít bộ nhớ hơn. Thử cảnh và thiết bị đích của bạn.

Chuẩn bị nguồn trước khi nhập

Nếu SVG chứa PNG được đặt vào, đổi tên tệp hoặc nhập thành hình học không tái dựng đường bao vector bị thiếu. Dùng danh sách kiểm tra raster nhúng để kiểm tra nguồn trước. Hướng dẫn vector hóa ảnh rộng hơn giải thích khi nào đồ lại hữu ích.

PerfectVector phù hợp khi chỉ còn PNG hoặc JPG phẳng và bạn cần hình nguồn chỉnh sửa được cho biểu tượng. Chuyển ảnh sang SVG, rồi kiểm tra đường bao, các màu riêng và lỗ nhỏ trong trình chỉnh sửa SVG trước khi lặp lại phép thử Pixi. Dùng trực tiếp bản vector gốc sạch hiện có. Đồ lại không sửa cách Pixi xử lý biến đổi hay cấu hình độ phân giải texture.

Các engine khác tự đưa ra lựa chọn nhập. Hướng dẫn nhập SVG Godot giải thích texture và lấy mẫu vượt mức ở đó; hướng dẫn SVG Unity trình bày quy trình riêng đó. Đừng chuyển thiết lập engine này sang engine khác chỉ dựa vào phần mở rộng SVG.

Kiểm tra biểu tượng bàn giao

Trước khi chấp nhận tài nguyên, so sánh nó với nguồn được kết xuất trong trình duyệt ở kích thước nhỏ nhất và lớn nhất dự định. Kiểm tra lỗ trên nền tương phản, vị trí nhóm và các hiệu ứng cần thiết. Ghi phiên bản Pixi, độ phân giải trình kết xuất, kích thước pixel nguồn texture và tỷ lệ cảnh. Giữ bản SVG gốc cùng dự án để thay đổi bố cục hoặc công cụ nhập sau này có thể được thử với cùng nguồn.

Bạn chỉ có hình raster? Chuẩn bị SVG chỉnh sửa được bằng PerfectVector, kiểm tra đường bao và không gian âm, rồi thử cách nhập Pixi thực tế ở các kích thước giao diện sử dụng.

Câu hỏi thường gặp

Nhập SVG vào PixiJS có giữ hình học vector không? Tùy cách nhập. Graphics.svg phân tích hình học bản vẽ được hỗ trợ. Tải SVG làm texture cung cấp nguồn raster cho Sprite. Giữ riêng SVG gốc để chỉnh nguồn và xuất sau này.

Vì sao sprite SVG PixiJS có thể bị mờ? Sprite có thể hiển thị texture lớn hơn kích thước pixel của texture. Kiểm tra độ phân giải nguồn và kích thước hiển thị lớn nhất dự định. Tải texture có kích thước phù hợp hoặc thử cách hình học với hình được hỗ trợ.

Graphics.svg có giữ mọi tính năng SVG không? Không. Nó hỗ trợ một tập con SVG. Trong ví dụ PixiJS 8.21.0 này, lỗ và hai màu còn nguyên nhưng phép tịnh tiến nhóm thì không. Thử tệp xuất của bạn với bản tham chiếu trong trình duyệt.

Nguồn tham khảo

1. Hướng dẫn SVG PixiJS — Mô tả cách nhập texture và hình học cùng độ phân giải texture.
2. Hướng dẫn Graphics PixiJS — Giải thích chia sẻ GraphicsContext và giới hạn hỗ trợ SVG.
3. Hướng dẫn Assets PixiJS — Mô tả tải tài nguyên và bộ nhớ đệm theo URL.
4. Hướng dẫn texture PixiJS — Mô tả quan hệ giữa texture và nguồn.
5. Bộ phân tích SVG PixiJS 8.21.0 — Cung cấp mã triển khai theo phiên bản cố định để tìm hiểu khác biệt khi nhập.