Why is bodymovin exporting PNG's and not SVG's?

Question

I'm trying to use lottie to animate an SVG animation created in After Effects. I use the bodymovin extension to export the JSON data file. But, I also noticed the export includes some PNG images. I'm also getting console errors that said PNG's can not be found.

Why is it exporting PNGs as I'm using SVG (an AI file) in AE. Below is my code, and the error.

index.ts

import * as lottie from 'lottie-web';
import * as header from './assets/header.json';

import './css/base.sss';

var animation = lottie.loadAnimation({
    container: document.getElementById('header'),
    animationData: header,
    renderer: 'svg/canvas/html',
    autoplay: true
});

But I'm getting the following errors that the images can't be found. Why is bodymovin exporting/looking for pngs? I require SVG's.

Chrome console errors (sorry can't embed until 10 rep)

Titrant

Answer 1

I found the problem. I have to convert paths to shapes in AI as noted here.

Titrant

Answer 2

In Adobe After effect, you can use Create Shapes from vector layer

Welton

Answer 3

Another way I found was to search the exported .json file for the .png extension and replace the found extensions with .svg. Making sure to add the .svg files to the same directory.

I used this bodymovin render option:

I did my search in the .json file in Dreamweaver like so:

I hope this helps someone!!!

Rapscallion

It's totally wrong. if you change extension from png to svg it will be still png :) – Pryer