# Can we use SVG? **URL:** \ **Category:** Phaser 3\ **Created:** [December 12, 2019, 2:07pm UTC](https://phaser.discourse.group/t/can-we-use-svg/4570 "2019-12-12T14:07:32Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\ **Post date:** [December 12, 2019, 2:07pm UTC](https://phaser.discourse.group/t/can-we-use-svg/4570/1 "2019-12-12T14:07:32Z")
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? ---
**Author:** ![cmr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cmr/32/2446_2.png) [@cmr](https://phaser.discourse.group/u/cmr)\ **Post date:** [December 12, 2019, 3:43pm UTC](https://phaser.discourse.group/t/can-we-use-svg/4570/2 "2019-12-12T15:43:44Z")
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](https://github.com/photonstorm/phaser3-examples/blob/master/public/src/loader/svg/load%20svg.js) ---
**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\ **Post date:** [December 12, 2019, 4:57pm UTC](https://phaser.discourse.group/t/can-we-use-svg/4570/3 "2019-12-12T16:57:19Z")
I was asking if possible. Thanks! By the way is it recommended? Any caveats? ---
**Author:** ![cmr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cmr/32/2446_2.png) [@cmr](https://phaser.discourse.group/u/cmr)\ **Post date:** [December 12, 2019, 8:24pm UTC](https://phaser.discourse.group/t/can-we-use-svg/4570/4 "2019-12-12T20:24:38Z")
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](https://photonstorm.github.io/phaser3-docs/Phaser.Types.Loader.FileTypes.html#.SVGSizeConfig)) to get the scale you want. `this.load.svg('key', 'path/to/svg.svg', {width:400, height:400});` Excerpt from a [devlog](https://phaser.io/phaser3/devlog/126): “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.” ---
**Author:** ![Pixelguy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/pixelguy/32/806_2.png) [@Pixelguy](https://phaser.discourse.group/u/Pixelguy)\ **Post date:** [December 13, 2019, 2:17pm UTC](https://phaser.discourse.group/t/can-we-use-svg/4570/5 "2019-12-13T14:17:56Z")
If you need to support IE 11 you might run into some problems using SVGs: > [@IE11 Security Error - gl.texImage2D()](https://phaser.discourse.group/t/ie11-security-error-gl-teximage2d/4400): > > I’m using a bunch of SVGs in my project and IE11 does not seem to be happy about that: The only results searching for this issue releated to gl.texImage2d are CORS - Cross-Origin Resource Sharing related. But in this case it really does’t make any sense. I’m using phaser 3.21.0 with webpack, so all request are coming from localhost or inline as data:image/png;base64,... Replacing all the images with PNG placeholders is working, so it really has to do something with svgs being used. (Re… 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. ---
**Author:** ![LeonieLionheard](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LeonieLionheard](https://phaser.discourse.group/u/LeonieLionheard)\ **Post date:** [August 27, 2020, 7:44am UTC](https://phaser.discourse.group/t/can-we-use-svg/4570/6 "2020-08-27T07:44:51Z")
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… ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [August 27, 2020, 4:29pm UTC](https://phaser.discourse.group/t/can-we-use-svg/4570/7 "2020-08-27T16:29:09Z")
Get the latest phaser. I think earlier versions did not support this. ---
**Author:** ![LeonieLionheard](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LeonieLionheard](https://phaser.discourse.group/u/LeonieLionheard)\ **Post date:** [August 28, 2020, 8:10am UTC](https://phaser.discourse.group/t/can-we-use-svg/4570/8 "2020-08-28T08:10:57Z")
I use this: src="[//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js](https://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 😃 … and … it works now 🙂 Cool.