FInal render different than preview for SVG

[BrayanLope5]

I am using SVG images and no matter how I bring it into remotion, the final mp4 is different than the preview. I am using styled component and using scale to scale an svg. The preview shows the correct scaling but the final render seems to show the original size of the svg.

Preview with scaling using styled-components

Preview without scaling

Final render with scaling using styled-components

I tried changing --disable-headless but I keep having an error with the browser launching. Probably a different issue. I am on linux and have all dependencies installed. I tried viewing the preview on both, Firefox and Chromium and both give me the same preview btw. Also, changing other attributes with styled components on the same svg does work. Like chaning opacity and other css attributes, it's just the scaling that causes problems.

I am new to javascript in general and specially new to remotion (first project), and I love it so far. Thank you!:)

[JonnyBurger]

Hi @BrayanLope5! thanks for opening the issue! can you provide a small snippet that can demonstrate the issue?

[BrayanLope5]

@JonnyBurger this is the moon component.

import React from 'react';
import styled from 'styled-components';
import {useCurrentFrame, useVideoConfig, spring} from 'remotion';

const Luna = styled.svg`
	scale: 1.7;
	position: absolute;
	left: 200px;
	top: ${(props) => props.yCoord}px;
	opacity: 100%;
`;

const Moon = () => {
	// Get current frame.
	const frame = useCurrentFrame();
	// Get fps of video.
	const {fps} = useVideoConfig();

	const yCoord = spring({
		frame,
		fps,
		from: -480, // Initial y location.
		to: 200, // Final y location.
		config: {
			stiffness: 200,
		},
		durationInFrames: 30,
	});

	return (
		<Luna
			yCoord={yCoord}
			data-name="Layer 1"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			width="754"
			height="750.35999"
			viewBox="0 0 754 750.35999"
		>
        SVG PATHS AND SHAPES HERE
		</Luna>
	);
};

export default Moon;

This will show what I am trying to achieve on the preview but not on the final mp4 render. The scale: 1.7 is not being properly rendered on the final mp4.
I've also tried using staticFile and that didn't change anything.

[JonnyBurger]

Hi @BrayanLope5! I tried with the following component:

import React from 'react';
import styled from 'styled-components';
import {useCurrentFrame, useVideoConfig, spring} from 'remotion';

const Luna = styled.svg<{
	yCoord: number;
}>`
	scale: 1.7;
	position: absolute;
	left: 200px;
	top: ${(props) => props.yCoord}px;
	opacity: 100%;
`;

const Moon = () => {
	// Get current frame.
	const frame = useCurrentFrame();
	// Get fps of video.
	const {fps} = useVideoConfig();

	const yCoord = spring({
		frame,
		fps,
		from: -480, // Initial y location.
		to: 200, // Final y location.
		config: {
			stiffness: 200,
		},
		durationInFrames: 30,
	});

	return (
		<Luna
			yCoord={yCoord}
			data-name="Layer 1"
			width="754"
			height="750.35999"
			viewBox="0 0 754 750.35999"
		>
			<circle cx={300} cy={300} r={100} fill="red" />
		</Luna>
	);
};

export default Moon;

and it rendered as expected, same as in the preview.

One reason might be that a different browser is used for rendering than in the preview, and since the scale: 2 syntax is very new, the browser that is being used does not support it yet. You can test this hypothesis by instead setting transform: scale(1.7) instead.

[BrayanLope5]

@JonnyBurger You are correct! Using transform fixed it.

I am on Manjaro Linux which is Arch based. I had chromium installed but when I ran npm run build the first time it installed chromium again not recognizing that I already had it installed.

I've also come across the release notes where you make mention of setBrowserExecutable() and --browser-executable so that should fix my problem. Thank you for your help!

[JonnyBurger]

Nice, glad it got solved!