Ao renderizar gráficos via WebGL no Pixi.js, as imagens precisam ser convertidas em um formato compatível com a GPU — chamado de textura. Essas texturas são gerenciadas por um sistema centralizado de cache e associadas a sprites, que então são adicionadas à cena para exibição visual.

Métodos para converter recursos em texturas

1. Usando o carregador global (app.loader)

O loader do Pixi é uma ferramenta robusta para pré-carregar múltiplos ativos (como imagens, SVGs ou fontes) e armazená-los automaticamente no TextureCache. Isso evita recargas redundantes e otimiza o uso de memória da GPU.

app.loader
  .add("assets/icon.svg")
  .load(onAssetsLoaded);

function onAssetsLoaded() {
  const sprite = new PIXI.Sprite(app.loader.resources["assets/icon.svg"].texture);
  app.stage.addChild(sprite);
}

2. Construção direta de texturas com PIXI.Texture.from()

A classe Texture oferece um método estático flexível para criar texturas a partir de diversos tipos de fontes: URLs, elementos DOM (<img>, <canvas>, <video>) ou até mesmo instâncias de BaseTexture.

• Carregamento por URL com tratamento de erro

Embora from() funcione diretamente com strings, o método fromURL() é preferível ao lidar com recursos externos, pois retorna uma Promise com suporte nativo a catch.

PIXI.Texture.fromURL("assets/logo.svg")
  .then(texture => {
    const logo = new PIXI.Sprite(texture);
    app.stage.addChild(logo);
  })
  .catch(err => console.error("Falha ao carregar SVG:", err));

• Carregamento a partir de um elemento ![]() existente

const imgElement = document.querySelector("#dynamic-svg");
const texture = PIXI.Texture.from(imgElement);
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);

Conversão de SVG embutido (DOM) em textura

SVGs integrados diretamente no HTML (como elementos <svg> no documento) não podem ser passados diretamente como URL para from(), mas podem ser transformados em texturas com uma abordagem indireta: serialização em string + codificação Base64.

function svgToBase64(svgId) {
  const svgNode = document.getElementById(svgId);
  if (!svgNode) throw new Error(`SVG com id "${svgId}" não encontrado.`);
  
  const serializer = new XMLSerializer();
  const svgString = serializer.serializeToString(svgNode);
  const encoded = btoa(unescape(encodeURIComponent(svgString)));
  return `data:image/svg+xml;base64,${encoded}`;
}

// Uso:
const base64Svg = svgToBase64("my-icon");
const texture = PIXI.Texture.from(base64Svg);
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);

⚠️ Observação: A codificação requer encodeURIComponent antes de btoa, pois SVGs frequentemente contêm caracteres Unicode e símbolos especiais que devem ser preservados.

Como o Pixi.js processa SVG internamente

Internamente, PIXI.Texture.from(source) delega a detecção do tipo de recurso para autoDetectResource(), que analisa a extensão do caminho ou o conteúdo da string. Ao identificar um SVG — seja por extensão .svg, por data URI ou por conteúdo iniciando com <svg — ele instancia SVGResource.

Essa classe herda de BaseImageResource e ipmlementa uma lógica específica:

• Se o SVG for fornecido como string inline, ele é convertido para data URI Base64.
• Um elemento ![]() temporário é criado e configurado com essa URI.
• Após o evento onload, o SVG é desanhado em um <canvas> interno.
• Finalmente, o canvas é enviado à GPU via upload() — transformando-o efetivamente em uma textura.

Esse fluxo garante compatibilidade com SVGs dinâmicos, sem depender de servidores ou arquivos estáticos.