Goal

To animate a car (child svg) driving on a road. (parent svg)

Environment

I am using react to build a landing page, that has a short looping animation. To include svg as a react component, I used this online tool to convert svg code into jsx compatible code.

Problem

1. Both the svgs (car (represented by 2) and the city (represented by 1)) have unique viewbox properties and have different default sizing. The car svg is way bigger than the city svg.
2. I had to scale the car's svg tag to .1 just to get it on the same scale as of the city svg {transform: scale(.1)}
3. And to make the car move, {transform : translateY(7000px) translateX(5000px)}

My question and my underlying doubt is, why do I need to translate the svg in thousands of pixels (7000px, 5000px) to move it nearly quarter-way i.e. 200px( my display size is 1440x900px ) across the screen?

Motivation for this approach

I know that I can edit the svg file in a vector drawing tool and export the svg containing both the city and car, it would give me desired results. BUT

I consciously used an svg component inside of another svg so that it is easier for me to make changes in the future and to reuse the components. (multiple car svgs and trees and buildings, etc in my case) i.e. to make the code more modular and readable.

How do I make the svgs scale similar. (I am not able to pose this question correctly, but I think I made my situation clear) What if I dont use a parent child relationship for the svgs but use sibling relation. What then?

File structure

• App component
  • LandingPage component
    • Nav-bar component
    • Content component
      • City SVG
        • Car SVG

Same indent are siblings components, one indent difference is parent-child components.

SVG code (JSX compatible)

Parents' SVG viewbox (city)

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 982.24 781.46"

Childs' SVG viewbox (car)

<svg
  xmlns="http://www.w3.org/2000/svg"
  id="car"
  data-name="car"
  viewBox="0 0 1361.91 1048.49"
>