Set frames for SVG file

Phaser 3
1

How to set frames for SVG file ?

This function allows only set size :

this.load.svg({
key: ‘morty’,
url: ‘images/Morty.svg’,
svgConfig: {
width: 300,
height: 600
}
});

2

Not entirely sure what you want to do, but I think that SVG files don’t have frames, i.e. it cannot be cut up into separate frames/sprites because it’s one big vector image. By design it doesn’t have a fixed size because it’s a vector format, not a bitmap/pixels.

Maybe you can draw the vector to a graphics object and then use Graphics.generateTexture to make it a texture and then define frames. But if you want different frames as far as I know you have to use bitmap/raster graphics.

3

You can set SVG size in svgConfig, so logically you can cut it into frames. It is not convenient to use different files to load small SVG sprites. Or how we can play SVG animation ? Only by loading many frames.

4

I have made some progress on this.

So, what i have done :

I loaded svg texture in preload: function () :
this.load.svg(‘pesok_svg’, ‘images_tmp/svg/sand.svg’);

Then I’v got object of this texture :
var svg_textr = this.textures.get(‘pesok_svg’);

I created sritesheet from this texture with new key ‘pesok_new_svg’ :
this.textures.addSpriteSheet(‘pesok_new_svg’, svg_textr.getSourceImage() , { frameWidth: 50, frameHeight: 50 })

Now I have cut svg into pieces and can use any frame :
svg_image = this.physics.add.image(500, 200, “pesok_new_svg”, 2)

But the problem is when I increase size of svg frame it becomes poor quality with pixels , like bitmap image :
svg_image.setDisplaySize(500, 500);

So, is anybody have ideas how create normal SVG spritesheet ?

1 Like
5

SVG’s can be tricky to use, since they can contain different sizing/scaling specs based on how they were originally set up and what program they are saved/exported from. You could try adding a SVGSizeConfig to your loader and see if that helps.

Also, SVGOMG is helpful for inspecting what exactly is configured in your original file.