plane icon Welcome to Microsoft Flight Simulator’s SDK Q&A Platform!

You have questions regarding the SDK? DevMode Tools? SimConnect? You would like to submit an idea for future improvements, seek help or exchange knowledge? You’re in the right place.

Please take a moment to read the platform’s guidelines before you get started!

question

RoscoHead avatar image
RoscoHead asked NaughtyGnome commented

Displaying SVG in toolbar

I'm trying to code a custom toolbar panel, but I can't get an SVG to display on the toolbar button. I've tried everything I can think of, comparing with add-ons where they do work, but I just can't get my SVG to display. I did get it to work briefly before SU5, but since then. no.

It loads and displays fine in every other editor/viewer I've tried, just not in the toolbar.

Can anyone tell me how to get this to work?

I've attached my SVG file, if anyone can help it would be appreciated.

devs
1 comment
10 |10000 characters needed characters left characters exceeded

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Using the template from github I copied the atc svg but renamed it to match the template svg. Sadly this still doesn't work so there must be something else at play here.

<svg id="Titre" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <title>ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL</title>
  <g id="HIGHLIGHT">
    <path id="Path_665-2" data-name="Path 665-2" d="M41.42,26.19a.64.64,0,0,0-.15-.31L39.4,23.51H36.75V20.77h-4V15.48a.81.81,0,0,0-.81-.81.82.82,0,0,0-.82.81v5.29H27.25v2.74H24.56l-1.88,2.37a.83.83,0,0,0-.16.36.82.82,0,0,0-.12.91l3.42,6.78.05.14a.81.81,0,0,0,.77.54h.6v2.2a.82.82,0,0,0,.82.81h.44V49.33h6.84V37.62h.6a.81.81,0,0,0,.81-.81h0v-2.2h.61a.81.81,0,0,0,.77-.54l3.47-6.92A.81.81,0,0,0,41.42,26.19ZM25.35,25.14h2.71a.81.81,0,0,0,.81-.81h0V22.4h6.26v1.92a.82.82,0,0,0,.81.82h2.67l.86,1.08h-15Zm.06,4.35-1.1-2.18h2.13l.69,2.18Zm1.72,3.43L26,30.58h1.52l.74,2.34Zm.45-5.61h4v2.18H28.27Zm7.54,6.76V36H28.87V34h6.26v.07Zm-6.51-3.49h2.94v2.34h-2.2Zm6.32,2.34H32.64V30.58h3Zm-2.29-3.43V27.31H36.7L36,29.49Zm4.22,3.43h-.79l.74-2.34H38Zm1.73-3.43H37.16l.69-2.18h1.84Z"/>
  </g>
</svg>
0 Likes 0 ·

1 Answer

· Write an Answer
CaptMatto avatar image
CaptMatto answered NaughtyGnome commented

Progress!

I downloaded the navigraph ingamepanel and they had the icon in a different folder structure.

I tested the github template with an updated layout.json and the icon now loads. I'm not sure if the icon needs to still be in both locations but the navigraph panel has it in both.

The folder structure needs to be.

1632726909960.png



1632726909960.png (22.6 KiB)
6 comments
10 |10000 characters needed characters left characters exceeded

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

That by itself doesn't seem to make a difference for me - it seem to be something in the SVG file itself. My SVG doesn't work while those created by other developers do (when copied to my project). I just can't work out what it is that's different!

0 Likes 0 ·

I got mine working with the following...

<svg width="70%" height="70%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<title>ICON_TOOLBAR_FLIGHTCASE</title>
    <g transform="matrix(0.0761719,0,0,0.0761719,17.375,12.5)">
        <g id="HIGHLIGHT">
            <path d="M336,160L48,160C21.49,160 0,181.49 0,208L0,432C0,458.51 21.49,480 48,480L64,480L64,496C64,504.84 71.16,512 80,512L112,512C120.84,512 128,504.84 128,496L128,480L256,480L256,496C256,504.84 263.16,512 272,512L304,512C312.84,512 320,504.84 320,496L320,480L336,480C362.51,480 384,458.51 384,432L384,208C384,181.49 362.51,160 336,160ZM320,376C320,380.42 316.42,384 312,384L72,384C67.58,384 64,380.42 64,376L64,360C64,355.58 67.58,352 72,352L312,352C316.42,352 320,355.58 320,360L320,376ZM320,280C320,284.42 316.42,288 312,288L72,288C67.58,288 64,284.42 64,280L64,264C64,259.58 67.58,256 72,256L312,256C316.42,256 320,259.58 320,264L320,280ZM144,48L240,48L240,128L288,128L288,48C288,21.49 266.51,0 240,0L144,0C117.49,0 96,21.49 96,48L96,128L144,128L144,48Z" style="fill-rule:nonzero;"/>
        </g>
    </g>
</svg>


0 Likes 0 ·

Thanks for that - your icon works fine, but when I substitute my paths leaving everything else as-is, it doesn't. So there must be an issue with my path definitions, maybe it goes outside the boundaries or something? And what does that matrix transform do? Investigation continuing.

0 Likes 0 ·
Show more comments
Hi, could you paste your layout.json too?


I'm having the same issue as you were and @RoscoHead is.

Thanks

Gnome

0 Likes 0 ·
Never mind I sorted it! Thanks though :)
0 Likes 0 ·

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.