Can we use SVG?

Phaser 3
1

Can we use svg for our images in a scene?

I see responsiveness articles and different approaches to the issue here and there. Would it be good solution to parts of the subject?

1 Like
2

Are you asking if it’s possible? Or recommended?

this.load.svg('key', 'path/to/svg.svg'); is a function, so it’s supported in Phaser.

Example

1 Like
3

I was asking if possible. Thanks!

By the way is it recommended? Any caveats?

4

Caveats might be that it turns it into a regular image at load time. So you might end up with a blurry image if you scale it later, since it’s no longer an SVG.

You would need to pass in a config object at load (SVGSizeConfig) to get the scale you want.

this.load.svg('key', 'path/to/svg.svg', {width:400, height:400});

Excerpt from a devlog: “The problem is that if the SVG file has a particularly large size, you’ll have to scale it down using code within Phaser. This isn’t difficult but it does meant it’s just wasting GPU texture memory. The reverse is also true. If the SVG dimensions are quite small then you need to scale the texture up via code and the result is likely to look blurred and pixelated, negating the benefit of it being an SVG in the first case.”

2 Likes
5

If you need to support IE 11 you might run into some problems using SVGs:

There seems to be a bug in the IE11 DOMParser. Likely nothing you can do to fix it without a patch from Microsoft.

Other than that I noticed some problems with Safari not rednering SVG dropshadows on the first load. But just fine if your refresh the browser. This wasn’t a showstopper for me so overall SVGs worked great in my latest Project.

1 Like
6

What do you mean with?

pass in a config object at load (SVGSizeConfig)

Something like this?
var loadIntoThis = new SVGSizeConfig()

Because just typing a width and scale into

this.load.svg(‘key’, ‘path/to/svg.svg’, {width:400, height:400});
doesn’t change the size of my images…

7

Get the latest phaser. I think earlier versions did not support this.

1 Like
8

I use this: src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"

Hm… that’s from the tutorial… we have 3.24.1 already? Good call :smiley:

… and … it works now :slight_smile:
Cool.

1 Like