What’s the Difference Between PNG, SVG and Lottie File Formats?

The PNG and SVG file formats are incredibly popular on the web, especially when it comes to web design. But how do they compare to a Lottie file? Here are the differences between PNG, SVG and Lottie files, and when you might use each file type.

What is a PNG?

The PNG (Portable Network Graphics) file format was originally developed to replace the GIF (Graphic Interchange Format) – GIFs only support 256 colors, while PNGs support a whopping 16 million colors. This makes PNG files great for displaying high-quality photos. It’s one of the most popular image file formats used today, alongside the JPEG.

What is an SVG?

Scalable Vector Graphics (SVGs) are images based on XML, a markup language that’s similar to HTML. They’re popular for displaying graphic design elements like logos, as you can enlarge them without losing quality.

What is a Lottie?

A Lottie is a JSON-based file format – this basically means that it’s a file that stores data about the animation as text. Lottie files are amazing (okay, we’re a bit biased, but it’s true!). They scale up or down without losing quality, they’re super lightweight, they work on almost any device and are easily customizable.

Comparison of PNG, SVG and Lottie file formats

Now that you know what each file format is, here’s what you need to know about how they compare.

1. File size

PNG files use lossless compression, which means that they don’t lose their image quality when compressed. But this also means that they tend to be large, which can slow down your website page speed or mobile app loading times.

SVG files are generally small, but complex SVGs will increase its file size.

Lottie animations are generally tiny. It’s about 600% smaller than a GIF, which is a popular animated file format. This means that with Lottie files, you can embed rich animations on your website without slowing it down.

2. Scalability

A PNG is a raster-based file format, which means that it’s made up of a fixed number of pixels. Each individual pixel is a tiny square of color. Collectively, all the pixels make up the entire image. But because a PNG file is made up of a fixed number of pixels, enlarging it can make it look blurry, as each pixel has now been stretched to cover a larger area.

SVGs are vector-based formats, while Lottie files are primarily vector-based. This means they aren’t made up of pixels, but of points that are connected by lines and curves. These are generated by mathematical formulas. Because SVGs and Lottie animations are computed, not made up of a finite number of pixels, they can be infinitely scaled up or down – without losing any image quality.

3. Animation

PNG files don’t natively support animation. If you need to animate a PNG, you’d have to use the Animated PNG (or APNG) file format. This involves using an APNG assembler to merge a sequence of PNG images into an animation – but this format isn’t widely used.

An SVG file on its own is static. To animate an SVG, you’d need to manipulate it using SVG animation elements, CSS or JavaScript (JS). However, the MDN Web Docs notes that SVGs can get complicated quickly, and that complex SVGs can take up a lot of processing time in the browser – this could slow down your page speed.

On the other hand, the Lottie file format truly shines when it comes to animation. Lottie animations are created with Adobe After Effects or other graphics and animation software, then exported as a Lottie animation.  

While creating a Lottie animation can involve motion design expertise, you don’t need to know anything about animation – or code – to start using Lottie animations. Yep, working with Lottie animations is no-code friendly. You can download, customize and embed thousands of free Lottie animations on LottieFiles, for both your personal or commercial projects.

4. Transparency

The PNG, SVG and Lottie file formats all support transparency. This is in contrast to other popular image file types like JPEGs or GIFs, which don’t support transparency.

Images with transparent backgrounds can be helpful, as they blend into your website or mobile app design. You won’t need variations of the same image with different background colors just to fit different use cases.

5. Ease of customization

PNG files can be edited with any image editing software, such as Adobe Photoshop, Adobe Lightroom or the GNU Image Manipulation Program (GIMP). But it can involve a bit of a learning curve. For example, if you want to change the color of an object within a photograph using Adobe Photoshop, you’d need to have some familiarity with the software, as well as basic image editing skills.

Customizing SVG files also involves a learning curve. To edit an SVG file, you’d need to use vector graphics editors like Adobe Illustrator or Inkscape. If you’re using inline SVG (i.e. directly adding SVG code, instead of embedding an SVG file) in your HTML document, you’d edit it using CSS and JavaScript. On the upside, for simple customizations, you can try out Iconscout’s Icon Editor – it’s a free online SVG editor that lets you edit SVG colors and strokes.

Customizing Lottie animations can seem complex at first – after all, they’re animations, not just simple static illustrations. But editing Lottie animations can be easy. Here are a couple of ways, for both technical and non-technical folks:

• By using the Lottie Editor - You can use the Lottie Editor to change colors, speed, frame rate, dimensions and more, even if you don’t know anything about motion design. Here’s a step-by-step tutorial on how to edit animations with the Lottie Editor.
• By editing a Lottie JSON directly - You can also edit a Lottie JSON directly by using the Lottie JSON Editor or a code editor. For example, here’s how to change your Lottie animation’s colors with the Lottie JSON Editor or in Visual Studio Code.
• By using the Lottie Web player - Use the Lottie Web Player to embed Lottie animations and customize features like width, height, animation speed and background transparency.

6. User interaction

PNG files don’t support user interactions. Sure, you can use CSS to make a PNG file react to a user interaction – for instance, by making an image brighter when a user hovers over it. But these effects are limited. Plus, you’d be applying an effect onto the PNG file, rather than actually changing or animating it in response to an interaction.

Inline SVG can be set up to respond to user interaction. For example, you could animate an SVG button when a user clicks on it. But setting up user interactions for SVGs requires using CSS and JavaScript.

Lottie animations are also dynamic – they can be customized to respond to user interaction in all sorts of ways. Their light footprint makes them perfect for microinteractions on the web, such as to animate buttons when they’re clicked. For simple interactivity, like making sure an animation plays when it’s hovered over, you can automatically generate an embed code with the Lottie Web Player.  

To set up advanced interactivity to your Lottie animations, check out the Lottie Player Interactivity Guide. You can set up Lottie animations to respond to scrolling events, synchonize animation to cursor movement and more. The Lottie interactivity library requires you to use JavaScript, but you can go to any public animation page, click on ‘Interactivity’, and generate the code you need.

When does it make sense to work with PNG, SVG or Lottie files?

Each file format has areas where it shines, so pick one depending on your use case.

When to use a PNG

• If you need to display high quality photographs or static 3D illustrations

When to use an SVG

• If you need to display a static vector image (for example, a logo)

When to use a Lottie

• If you need to display an animation
• If you want to implement animations that react to user interactions
• If your website uses animations, and you want to optimize it for last loading times

How to convert PNG and SVG files to Lottie

If you already have existing PNG and SVG files that you’d like to convert into a Lottie, here’s what you can do.

Convert SVG files to Lottie

Just drag and drop your SVG file into LottieFiles’ SVG to Lottie tool. Choose an animation style to give your file the magic of motion, then download it as a Lottie.

For more information, check out this article about why and how to convert your SVG files to Lottie. Or follow this step-by-step tutorial to turn an SVG logo into an animated Lottie logo – in minutes!

Convert PNG files to Lottie

Converting raster-based PNG files to vector-based Lottie files is trickier. You can try converting your PNG file to an SVG file using an online automatic vectorization tool, then using LottieFiles’ SVG to Lottie tool. But this may only work with PNG files that feature simple, 2D illustrations.

Learn more about Lottie

With the Lottie file format, it has never been easier to create, customize and implement animations. Find out more about why you should be using Lottie animations, or learn more through our free Lottie courses and YouTube tutorials.