Should I use SVG pictures for this king of games ? regarding performance and download size.

Hello :)

I am working on few games targeting the web platform. I am looking for a small download size and good performances on old devices.

I make my graphics in vectorial in "Animate" and then export them as PNG before using them in Construct. I discovered we can use SVG pictures in construct and because I zoom in and out a lot in my games , maybe I can have a better quality on my graphic assets with a big zoom factor.

My games look like this, and I modify a lot layout scale during gameplay :

For the car one actually I create Level design with small shapes PNG and tiled BG, sometimes using mesh editor:

I am really happy with the download size and performances but I can't scale too much due to PNG quality. For the basket one I think I ll try SVG pictures but I wanted some advice before starting it.

My question is, can I keep good performances and small download size using a lot SVG pictures in my game ? Is there good practices for using it ? something to avoid ?

In Construct SVG cannot have unlimited scale as it runs in to maximum texture size limit. Rasterizing SVG is also much slower than rasterizing bitmap images, although it does not have to be done constantly (only when scaling up). For low-color images like the ones in your screenshots, PNG should have very good compression. Construct's SVG Picture also does not support animations, collision polygons, and other Sprite features. So I would say just use Sprites with PNGs.

Thanks Ashley for your answer, I will follow your advice. And thanks Scirra team for this amazing tool. I have so much fun using it and it allows me achieve things I didn't know I was capable of.

I've started using Construct as a game designer / Artist for fast prototyping my ideas and I discovered I love programing stuff and I can go farther.

I've just finished my first full game and the learning process was super fluent with the documentation and examples/templates.

I've started the next step following the JS tutorials you are writing. It's super clear and simple.

So thank you :)