# Set frames for SVG file

**URL:** <https://phaser.discourse.group/t/set-frames-for-svg-file/3716>\
**Category:** Phaser 3\
**Created:** [September 13, 2019, 6:33pm UTC](https://phaser.discourse.group/t/set-frames-for-svg-file/3716 "2019-09-13T18:33:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrio](https://avatars.discourse-cdn.com/v4/letter/a/8797f3/32.png) [@Andrio](https://phaser.discourse.group/u/Andrio)\
**Post date:** [September 13, 2019, 6:33pm UTC](https://phaser.discourse.group/t/set-frames-for-svg-file/3716/1 "2019-09-13T18:33:11Z")

</div>

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  
}  
});

---

<div class="post-metadata">

**Author:** ![BdR](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bdr/32/2621_2.png) [@BdR](https://phaser.discourse.group/u/BdR)\
**Post date:** [September 13, 2019, 11:32pm UTC](https://phaser.discourse.group/t/set-frames-for-svg-file/3716/2 "2019-09-13T23:32:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Andrio](https://avatars.discourse-cdn.com/v4/letter/a/8797f3/32.png) [@Andrio](https://phaser.discourse.group/u/Andrio)\
**Post date:** [September 14, 2019, 2:41am UTC](https://phaser.discourse.group/t/set-frames-for-svg-file/3716/3 "2019-09-14T02:41:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Andrio](https://avatars.discourse-cdn.com/v4/letter/a/8797f3/32.png) [@Andrio](https://phaser.discourse.group/u/Andrio)\
**Post date:** [September 19, 2019, 6:39am UTC](https://phaser.discourse.group/t/set-frames-for-svg-file/3716/4 "2019-09-19T06:39:38Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![prob](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prob/32/628_2.png) [@prob](https://phaser.discourse.group/u/prob)\
**Post date:** [September 20, 2019, 6:02pm UTC](https://phaser.discourse.group/t/set-frames-for-svg-file/3716/5 "2019-09-20T18:02:39Z")

</div>

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](https://photonstorm.github.io/phaser3-docs/Phaser.Types.Loader.FileTypes.html#.SVGSizeConfig) to your loader and see if that helps.

Also, [SVGOMG](https://jakearchibald.github.io/svgomg/) is helpful for inspecting what exactly is configured in your original file.