Is it better to use SVG or JPG/PNG images for page performance?

These are different tools for different jobs.

SVG is for vector images. Rectangles, lines, ellipses, and all the things you can compose together from primitive objects. Vector images can scale to most any size and still look decent, because they're not made of pixels. They're a set of instructions for what to draw on the screen.

PNG is for raster images. A grid of pixels that represent the image. These cannot be scaled without loss of quality, as naturally all you can do is make the pixels bigger, or resample the image which gives it various levels of fuzziness in quality. PNG is great for when you need an alpha channel, need lossless quality of image, or have a lot of solid colors side-by-side, such as the case with computer screenshots.

JPEG is for photos, also raster images. It's lossy and designed to take advantage of how human vision works to reduce file sizes for images of the real world.

You wouldn't use a JPEG for a vector logo... you'd use SVG. You wouldn't use a JPEG for a screenshot. You couldn't use an SVG for a screenshot, as it's a raster image.

SVG is a great format for vector graphics. The big advantage is it's sharpness and quality in all sizes / resolution / pixel densities. If you've got some JPG or PNG images that are exported from vector source file (*.AI, *.EPS, *.PDF etc.), I'd consider saving them directly to SVG (e. g. icons or simple shapes graphics). If you don't have a source file, you can try to vectorize it.

However, there is no significant difference in performance. In all these formats you can have both small / optimized images and very large / slowly loading images. If you care about loading times of raster images, you could try image optimizers like TinyPNG or JPEGmini.

SVG is better than the JPG/PNG, but if you don't have the image ready with svg, you would use it as a raw format.

Here are why SVG is better than raw format though.

• PNGs can weigh in at large file sizes, usually when catering for HDPI displays. As you know, the larger the file size, the slower it is to render/load.
• SVG is also good for Accessibility and SEO. Google index’s SVGs, which is good news. SVG content whether it is in a standalone file or embedded directly in HTML is indexed.