Image isn't shown

[JeCom]

I'm experimenting with a clockface. I've added the time and some stats on my clock face and now I'd like to add some icons. I downloaded the steps icon from github, added it to my resources folder and tested it on my Versa and the Versa simulator but it won't show. Anyone any idea why the icon is not showing?

My index.gui is like this:

<svg class="background"> 
  <text id="myBattery" class="topLeft smallFont"/>
  <text id="mySteps" class="topRight smallFont"/>
  <text id="myTime" class="midMid"/>
</svg>
<svg>
  <image href="stat_steps_solid_24px.png" x="20" y="20"/>
</svg>

And my styles.css is like this:

.background {
 viewport-fill: #000000;
}

.midMid {
 font-size: 60;
 font-family: System-Bold;
 text-length: 32;
 text-anchor: middle;
 x: 50%;
 y: 50%+30;
 fill: white;
}

.smallFont {
 font-size: 15;
 font-family: System-Bold;
 text-length: 32;
 fill: white; 
}

.topLeft {
 text-anchor: start;
 x: 2;
 y: 15;
}

.topRight {
 text-anchor: end;
 x: 100%-2;
 y: 15;
}

[Cmspooner]

I think you should include the image in the same svg; try this (I put the image next to the label inthe code for cleanliness sake):

<svg class="background"> 
  <text id="myBattery" class="topLeft smallFont"/>
  <image href="stat_steps_solid_24px.png" x="20" y="20"/>
  <text id="mySteps" class="topRight smallFont"/>
  <text id="myTime" class="midMid"/>
</svg>

[JeCom]

Hi, thanks for your reply. I've tried this as well and the image is still not showing.

[Cmspooner]

Maybe try this:

<svg class="background"> 
  <text id="myBattery" class="topLeft smallFont"/>
  <image href="stat_steps_solid_24px.png" x="20" y="20" width="20" height="20"/>
  <text id="mySteps" class="topRight smallFont"/>
  <text id="myTime" class="midMid"/>
</svg>

[JeCom · Accepted solution]

I found out why the image was not showing. The icon I downloaded from the Fitbit GitHub had a transparant background and the image itself was black which made it "invisible" against the black background of the app. The confusing part was that GitHub and the fitbit studio showed the image as white with black surrounding... 

I was able to show the icon as just two white footprints by adding fill="white". The width and height attribute did help me though with getting it to the right size. So thank you for that part 🙂 My code ended up like this:

<svg class="background"> 
  <text id="myBattery" class="topLeft smallFont"/>
  <image href="stat_steps_solid_24px.png" x="20" y="20" width="24" height="24" fill="white"/>
  <text id="mySteps" class="topRight smallFont"/>
  <text id="myTime" class="midMid"/>
</svg>