trying to style svg

game.css

@@ -70,6 +70,10 @@ h1 {
 }
 /* Temporarily have a border here to help me place the cat picture when I get to that */
 
+#image {
+    padding-top: 25px;
+}
+
 .cat-interaction .cat .time {
     display: flex;
     width: 135px;

game.js

@@ -7,8 +7,7 @@ let actions = 6; // Actions will decrease with button presses
 let cat; // This will be the cat randomly selected for the game
 
 const image = document.querySelector('#image');
-const catPic = '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 192h17.1c22.1 38.3 63.5 64 110.9 64c11 0 21.8-1.4 32-4v4 32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V339.2L280 448h56c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-53 0-96-43-96-96V192.5c0-16.1-12-29.8-28-31.8l-7.9-1c-17.5-2.2-30-18.2-27.8-35.7s18.2-30 35.7-27.8l7.9 1c48 6 84.1 46.8 84.1 95.3v85.3c34.4-51.7 93.2-85.8 160-85.8zm160 26.5v0c-10 3.5-20.8 5.5-32 5.5c-28.4 0-54-12.4-71.6-32h0c-3.7-4.1-7-8.5-9.9-13.2C357.3 164 352 146.6 352 128v0V32 12 10.7C352 4.8 356.7 .1 362.6 0h.2c3.3 0 6.4 1.6 8.4 4.2l0 .1L384 21.3l27.2 36.3L416 64h64l4.8-6.4L512 21.3 524.8 4.3l0-.1c2-2.6 5.1-4.2 8.4-4.2h.2C539.3 .1 544 4.8 544 10.7V12 32v96c0 17.3-4.6 33.6-12.6 47.6c-11.3 19.8-29.6 35.2-51.4 42.9zM432 128a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm48 16a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"/></svg>'
-image.innerHTML = catPic;
+const catPic = '<svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 192h17.1c22.1 38.3 63.5 64 110.9 64c11 0 21.8-1.4 32-4v4 32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V339.2L280 448h56c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-53 0-96-43-96-96V192.5c0-16.1-12-29.8-28-31.8l-7.9-1c-17.5-2.2-30-18.2-27.8-35.7s18.2-30 35.7-27.8l7.9 1c48 6 84.1 46.8 84.1 95.3v85.3c34.4-51.7 93.2-85.8 160-85.8zm160 26.5v0c-10 3.5-20.8 5.5-32 5.5c-28.4 0-54-12.4-71.6-32h0c-3.7-4.1-7-8.5-9.9-13.2C357.3 164 352 146.6 352 128v0V32 12 10.7C352 4.8 356.7 .1 362.6 0h.2c3.3 0 6.4 1.6 8.4 4.2l0 .1L384 21.3l27.2 36.3L416 64h64l4.8-6.4L512 21.3 524.8 4.3l0-.1c2-2.6 5.1-4.2 8.4-4.2h.2C539.3 .1 544 4.8 544 10.7V12 32v96c0 17.3-4.6 33.6-12.6 47.6c-11.3 19.8-29.6 35.2-51.4 42.9zM432 128a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm48 16a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"/></svg>'
 
 const interact1 = document.querySelector("#interact-btn1");
 const interact2 = document.querySelector("#interact-btn2");
@@ -42,20 +41,23 @@ const cats = [{
 "Enzo burbles as you wave a feather toy at him, eyeing it up before he pounces and catches it with his paws.",
 "Enzo eyes you warily as you bring out the claw trimmers before tucking his paws under his body and out of reach."],
     points: [10, 10, 15, 5], // Get less points for 'care' because that entails discomfort
+    colour: "black"
 }, {
     name: "Cleo",
     type: "aloof",
     typeText: "An aloof cat pretends that humans are beneath them but they enjoy your care nonetheless. You will get less points for some actions and more for others. It's your job to figure out which!",
     interactions: ["feed", "pet", "play", "care"],
     interactText: ["","","",""],
-    points: [30, 5, 15, 10]
+    points: [30, 5, 15, 10],
+    colour: "orange"
 }, {
     name: "Mungo",
     type: "friendly",
     typeText: "A friendly cat is uncomplicated in their desire for love and affection and will give you the same points for all actions.",
     interactions: ["feed", "pet", "play", "care"],
     interactText: ["Mungo is happy you fed him", "", "", "",],
-    points: [15, 15, 15, 15] // Friendly cats give the same amount of points for everything
+    points: [15, 15, 15, 15], // Friendly cats give the same amount of points for everything
+    colour: "grey"
 }];
 
 const types = [{
@@ -99,6 +101,8 @@ function startGame() {
     start.classList.add("hidden");
     textOne.innerText = `Thank you for agreeing to join the cat distribution system. Your cat is called ${cat.name}.`
     textTwo.innerText = `Their trait is ${cat.type}.`;
+    image.innerHTML = catPic;
+    catPic.style.fill(cat.colour); // I want to find a way to style the svg fill colour depending on which cat is selected
 }
 
 function feed() {