Text 與 SVG 在 html 裡是向量，在 Canvas / WebGL 裡最後的結果是點陣。
這篇會說明 Text 與 SVG 在 PixiJS 裡的特性。

先講小結： SVG 在讀入後是當成 Sprite物件 使用；
PIXI.Text 是 Sprite類別 的子類別，因此也可以想像成是當成圖片來用。
因此 SVG 與 Text 在最後都是點陣的形式，使用 Scale、指定寬高時，會因縮放失真

PIXI.Text 說明文件：

這段說明有兩個重點：

1. 繼承自 PIXI.Sprite
2. 使用 CanvasAPI 繪製

PixiJS 在使用向量資訊時，最後產生在畫面上的仍是點陣，
不會 因為縮放而自動調整

文字測試

[ Demo ]
1. 設定 fontSize：24
2. fontSize：24，scale.x 跟 scale.y 為 2
3. fontSize：48，scale.x 跟 scale.y 為 1

test 測試: 2 明顯變糊了

const style1 = new PIXI.TextStyle({ fontSize: 24 });
const style2 = new PIXI.TextStyle({ fontSize: 48 });

let text = 'test 測試';
const testText1 = new PIXI.Text('test 測試: 1', style1);
const testText2 = new PIXI.Text('test 測試: 2', style1);
testText2.scale = 2;
const testText3 = new PIXI.Text('test 測試: 3', style2);

要讓 PIXI.Text 實體 改變字體大小 且 不影響解析度 時，
重設 TextStyle.fontSize 屬性即可，會重繪一張 Canvas 材質來用

const style4 = new PIXI.TextStyle({ fontSize: 48 });
const testText4 = new PIXI.Text('test 測試: 4', style4 );
style4.fontSize = 96;
app.stage.addChild(testText4);

另一個PIXI.Text 的問題：
The primary disadvantages is that each piece of text has it's own texture, which can use more memory. When text changes, this texture has to be re-generated and re-uploaded to the GPU, taking up time.
每個 PIXI.Text 的實體擁有自己的材質，即使是內容完全相同，也會 佔據記憶體

這部分會在後續幾天的文章提到

SVG測試

左圖： 原圖，scale.x 與 scale.y 為 1
右圖： scale.x 與 scale.y 為 2
即使讀入 SVG檔，由於最後當成點陣材質使用，會因為只寸關係失真
[ SVG Demo]

const svg1 = PIXI.Sprite.from('control.svg');
const svg2 = PIXI.Sprite.from('control.svg');
svg2.scale.x = 2;
svg2.scale.y = 2;

翻了目前的 SVG 相關討論，重設讀入 SVG 的大小不太容易
建議先 當成點陣圖 處理就好

約略帶到些材質的部分

本篇的文字情形：

即使文字內容、Style 皆相同，
仍視為不同的 Texture / BaseTexture

let testText = 'test 測試';
const testTextStyle = new PIXI.TextStyle({ fontSize: 24 });

const testText1 = new PIXI.Text(testText, testTextStyle);
const testText2 = new PIXI.Text(testText, testTextStyle);

// 兩個 TextureCache：{pixiid_4: e, pixiid_6: e}
console.log(PIXI.utils.TextureCache);
// 兩個 BaseTextureCache：{pixiid_4: e, pixiid_6: e}
console.log(PIXI.utils.BaseTextureCache);

本篇的SVG情形：

有兩個 Sprite實體 ，但只有一個 Texture、一個 BeseTexture

// PIXI.Sprite.from 讀入相同的 SVG
const svg1 = PIXI.Sprite.from('control.svg');
const svg2 = PIXI.Sprite.from('control.svg');
svg2.scale.x = 2;
svg2.scale.y = 2;

// 一個 TextureCache： control.svg
console.log(PIXI.utils.TextureCache);
// 一個 BaseTextureCache： control.svg
console.log(PIXI.utils.BaseTextureCache);

接下來幾篇會討論較底層的 Texture / BeseTexture，
在專案較大、考慮效能與記憶體優化時，會需注意