When creating
PIXI.js Sprites from vector SVG shapes, you may want to scale up the SVG before turning it into a bitmap sprite, in order to get the best resolution for your screen. Here's a little snippet that will create a
two.js canvas to do just that, and return a PIXI.Sprite with your ideal bitmap size:
// init Two for svg import
Two.Resolution = 24;
var _twoCanvas = new Two({
width: 400,
height: 400,
type: Two.Types.canvas
});
// create method to read an svg element from the DOM, scale it, and return a PIXI.Sprite
var getScaledSpriteFromSVG = function(elemId, scale) {
_twoCanvas.clear();
// import svg from DOM, scale up, fit canvas to svg and render!
var shape = _twoCanvas.interpret(document.getElementById(elemId));
shape.scale = scale;
var charH = Math.ceil(shape.getBoundingClientRect().height);
var charW = Math.ceil(shape.getBoundingClientRect().width);
_twoCanvas.width = charW;
_twoCanvas.height = charH;
_twoCanvas.update();
// grab two.js canvas contents by exporting its base64 png content
var newSvgSprite = new PIXI.Sprite(PIXI.Texture.fromImage(_twoCanvas.renderer.domElement.toDataURL()));
newSvgSprite.anchor.x = 0.5;
newSvgSprite.anchor.y = 0.5;
return newSvgSprite;
};
var birdieSvgSprite = getScaledSpriteFromSVG('birdie', 2);
And this should be in your DOM, which could be hidden via css (display:none;):
<svg id="birdie">-svg content here-</svg>
