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 Abtzero answered

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

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 ·
CaptMatto avatar image
CaptMatto answered Boris_ 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)
9 comments
10 |10000

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 ·

Does anyone know why (if that is the case) there hase to be two versions of the SVG? Or even better, what is the purpose of each location?

0 Likes 0 ·
Hi jensbrak, since a while ago mine is working with the SVG in html_ui/icons/toolbar only, hope this helps.
1 Like 1 ·
Abtzero avatar image
Abtzero answered Boris_ commented

I have the same problem ands I am working on it since hours.

The two different paths exist, because SU 6 changed this path. Before it was Textures... after it was icons...
I Made my svg with Inkscape, Corel Draw, different online editors. I fiddled around with x y size, viewport, scaling, changed names, id, tried just to change the path and leave everything from a working svg... making just a littkle simple svg...

All the time it loosk in Edge, but in FS IT NEVER SHOWS.

Again and again loading FS for hours ... nothing. Just taking the example of ByMaximus or other panel addon suppliers, they work.

Correct path/filename and byte Size in Layout.json except the timestamp

HEEEEEEEEEEELP! I have no idea no longer!

@NaughtyGnome ist is fine that You solved Your problem. But just saying so, does not help anyone. What was Your cause?

Here is my last try:
<svg
   width="64.000000px"
   height="64.000000px"
   viewBox="0 0 16.933333 16.933333"
   version="1.1"
   id="svg29"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
 <title>ILS7</title>  
   
  <defs
     id="defs26" />
  <g
     id="layer1">
    <path
       style="fill:#000000;stroke-width:0.0325243"
       d="m 13.785929,16.17372 c -0.385716,-0.136568 -0.607538,-0.295616 -0.868727,-0.622883 -0.188794,-0.236557 -0.437325,-0.736418 -0.564168,-1.134688 -0.145146,-0.455742 -0.292221,-1.28108 -0.312297,-1.752527 l -0.0078,-0.182237 0.621502,-0.321069 c 0.341825,-0.176587 0.65015,-0.32608 0.685166,-0.332206 0.05834,-0.01021 0.06813,0.02212 0.117152,0.387141 0.09282,0.691194 0.241528,1.134586 0.455112,1.357004 0.180571,0.188038 0.463522,0.191548 0.61295,0.0076 0.238616,-0.293734 0.340973,-0.741697 0.319387,-1.397798 -0.02906,-0.884278 -0.154792,-1.201475 -1.105022,-2.7879198 -0.82137,-1.3713383 -1.146822,-2.0759835 -1.353391,-2.9302967 -0.242871,-1.0044473 -0.267898,-2.2713364 -0.06547,-3.3144383 0.225252,-1.1607506 0.75009,-1.985071 1.433726,-2.25184023 0.120283,-0.0469354 0.245327,-0.0622036 0.509951,-0.0622616 0.303806,-6.281e-5 0.380361,0.0118087 0.573692,0.0890004 0.539016,0.21521183 0.951349,0.74420653 1.208548,1.55048043 0.173789,0.5447954 0.240545,0.9194523 0.241123,1.3532456 l 5.02e-4,0.3749196 -0.278879,0.1834935 C 15.292891,4.8576085 15.123642,4.9589926 15.09791,4.9321959 15.08276,4.9164249 15.05735,4.778806 15.04143,4.6263776 14.968,3.9232852 14.813714,3.4475032 14.597778,3.2582909 c -0.140406,-0.1230283 -0.367788,-0.1230283 -0.508193,0 -0.21776,0.1908107 -0.353629,0.6393929 -0.354234,1.1695221 -8.52e-4,0.7473404 0.292614,1.4967738 1.073943,2.742565 0.793247,1.2647931 1.12073,1.9693933 1.3652,2.937308 l 0.113168,0.448063 9.7e-5,1.417185 c 9.5e-5,1.294247 -0.0056,1.447906 -0.06553,1.77134 -0.177746,0.959147 -0.56604,1.735473 -1.064084,2.127451 -0.201549,0.158624 -0.281735,0.199775 -0.593628,0.304639 -0.137432,0.04621 -0.645495,0.04448 -0.778598,-0.0026 z M 0.93164056,15.914633 C 0.87862546,15.863203 0.86208776,15.80944 0.86272166,15.690602 0.8631727,15.604602 1.2701336,13.211778 1.767061,10.37321 L 2.6705654,5.2121789 2.5739743,5.1126086 C 2.5208491,5.0578459 2.4330134,4.9159584 2.3787839,4.7973047 2.2866356,4.5956846 2.2802867,4.557684 2.2817445,4.2164811 2.2836266,3.7777787 2.3523423,3.5577632 2.553626,3.3460592 2.8507831,3.03352 3.2297051,3.1749514 3.4184396,3.6688475 c 0.056909,0.1489244 0.069757,0.2497847 0.069757,0.5476336 0,0.4332405 -0.067434,0.6554999 -0.2623159,0.8645783 L 3.103665,5.2121789 4.0048778,10.356615 c 0.4956671,2.82944 0.9041549,5.204179 0.9077504,5.277197 0.00863,0.175289 -0.024256,0.273855 -0.1067107,0.319808 -0.1157497,0.06451 -0.1946729,-0.07437 -0.259023,-0.455783 -0.062977,-0.37328 0.041504,-0.223576 -0.8316566,-1.191621 C 3.4847252,14.050653 3.2038521,13.739211 3.0910757,13.614121 L 2.8860278,13.386686 2.694658,13.600099 C 2.5894047,13.717476 2.3168376,14.019912 2.0889538,14.27218 1.86107,14.524447 1.5866995,14.828529 1.4792411,14.947918 l -0.1953783,0.21707 -0.054915,0.325559 c -0.034168,0.202564 -0.07863,0.356955 -0.1176857,0.40866 -0.075972,0.100576 -0.090563,0.101829 -0.17962125,0.01542 z M 2.2445764,13.41622 c 0.159821,-0.179172 0.2905834,-0.345151 0.2905834,-0.368841 0,-0.02368 -0.077182,-0.130998 -0.171517,-0.238461 -0.2871573,-0.327123 -0.5531343,-0.613638 -0.5601287,-0.603379 -0.00364,0.0053 -0.082018,0.450308 -0.1741672,0.988814 -0.09215,0.538507 -0.1741857,1.008974 -0.182302,1.045482 -0.01465,0.06591 0.2230009,-0.17952 0.7975315,-0.823615 z m 1.907656,-0.187216 -0.180948,-1.041343 -0.3752059,0.412073 c -0.2063634,0.226641 -0.3753111,0.42566 -0.3754397,0.442265 -1.272e-4,0.0166 0.075191,0.113683 0.1673758,0.215733 0.092185,0.10205 0.3387654,0.375588 0.5479561,0.60786 0.2091909,0.232274 0.3841409,0.418365 0.3887779,0.413535 0.00463,-0.0048 -0.072995,-0.477384 -0.1725162,-1.050123 z M 3.5979271,11.916715 C 3.9016814,11.578769 3.8832159,11.687294 3.75749,10.978926 L 3.6912191,10.60554 H 2.8821183 c -0.445005,0 -0.8091005,0.01263 -0.8091005,0.02806 0,0.01543 -0.03572,0.228266 -0.079376,0.472956 -0.043657,0.244689 -0.079513,0.461075 -0.079679,0.480856 -3.006e-4,0.03763 0.01448,0.05499 0.6045565,0.709484 l 0.365821,0.405756 0.2238084,-0.245017 c 0.1230942,-0.134753 0.3434946,-0.37817 0.4897784,-0.54092 z M 3.5687027,9.9500391 c -0.00127,-0.0502 -0.048139,-0.352643 -0.104173,-0.672096 L 3.3626501,8.6971196 2.8955432,8.687949 C 2.4713144,8.679619 2.4268551,8.684189 2.4112087,8.737734 2.3848157,8.828051 2.2005727,9.9173021 2.2005373,9.9832281 c -2.88e-5,0.053516 0.053835,0.058087 0.6852136,0.058087 h 0.6852447 l -0.0023,-0.091271 z M 3.2419503,8.0084289 C 3.2324692,7.9673562 3.1507664,7.5080909 3.0603869,6.987839 2.9154901,6.1537717 2.8698144,5.9284059 2.8698144,6.04755 c 0,0.039183 -0.3141684,1.8515276 -0.3399168,1.9608789 -0.017482,0.074236 -0.015377,0.074677 0.3558528,0.074677 0.3711274,0 0.3733303,-4.514e-4 0.3561999,-0.074677 z M 3.0046256,4.6324801 C 3.1236381,4.5349932 3.1659232,4.3958589 3.1509513,4.1510121 3.1398069,3.9687527 3.123565,3.9200731 3.0456393,3.8353729 2.9359966,3.7161974 2.8410278,3.7079642 2.7518657,3.8099097 2.6442103,3.9329931 2.6148396,4.020026 2.6148396,4.2159525 c 0,0.2040244 0.056383,0.3498372 0.166269,0.4299878 0.092464,0.067441 0.1273169,0.065344 0.223517,-0.013452 z M 5.6639149,15.8938 c -0.011686,-0.01217 -0.021247,-3.333481 -0.021247,-7.3806925 0,-6.2032466 0.00688,-7.3645122 0.043825,-7.3964422 0.030753,-0.026574 0.2660419,-0.035214 0.7888287,-0.028952 l 0.7450036,0.00889 0.00804,7.4096484 0.00804,7.4096483 H 6.4607817 c -0.4265906,0 -0.7851807,-0.01 -0.7968667,-0.02213 z M 8.447391,8.5352338 c 0,-6.2220207 0.00688,-7.3866385 0.043825,-7.4185685 0.030753,-0.026574 0.2660419,-0.035214 0.7888288,-0.028952 l 0.7450032,0.00889 0.0081,6.1810881 0.008,6.1810886 0.868425,0.0088 0.868425,0.0088 0.0083,1.219729 0.0083,1.21973 H 10.121057 8.4473918 Z M 1.2744894,7.0780557 C 1.1412166,6.9692848 0.84800252,6.2888331 0.71757332,5.7856389 0.58745676,5.2836517 0.53714848,4.861702 0.53444197,4.2496712 0.52999432,3.2449042 0.70116429,2.4294007 1.0762489,1.6682831 1.2485206,1.3187107 1.3187036,1.2633468 1.4255672,1.3927201 1.5375843,1.5283341 1.5205186,1.6632378 1.3467933,2.01543 0.86229498,2.9976512 0.73581398,4.2653163 1.0045633,5.4454633 1.093109,5.8342929 1.1648962,6.0343549 1.358216,6.4310581 1.5162356,6.755323 1.5342094,6.8995143 1.4332674,7.033148 1.3591247,7.1313029 1.3447224,7.1353764 1.2744894,7.0780557 Z M 4.3382335,7.033148 C 4.2350158,6.8965012 4.2553536,6.760837 4.4330107,6.4009366 4.603204,6.0561569 4.7426248,5.6278494 4.8361761,5.1623938 4.879559,4.9465471 4.8929216,4.7243553 4.8930639,4.2164811 4.8932549,3.4851714 4.8569527,3.2159051 4.6809355,2.6436925 4.5537466,2.2302147 4.5835249,2.0093517 4.7664615,2.0093517 c 0.090243,0 0.1514429,0.127432 0.2737686,0.5700489 0.140856,0.5096678 0.1966018,0.9666109 0.1976933,1.6204854 0.00133,0.7928794 -0.088828,1.3713008 -0.3166455,2.0316249 -0.1597325,0.4629813 -0.3962192,0.8890878 -0.4934386,0.8890878 -0.012952,0 -0.053275,-0.039353 -0.089606,-0.087451 z M 1.822858,5.9659931 C 1.7245402,5.8222083 1.5439738,5.3396331 1.478708,5.0462285 1.4321266,4.8368234 1.4201816,4.6544528 1.4221854,4.183291 1.4244607,3.6503333 1.433576,3.5518511 1.5067347,3.2705684 1.6063824,2.8874492 1.7548362,2.5368138 1.86673,2.4202929 l 0.083036,-0.086469 0.077562,0.075877 C 2.124124,2.5043929 2.1338492,2.738696 2.04722,2.8888835 1.8561311,3.2201628 1.7486216,3.6919915 1.7484996,4.199886 c -1.148e-4,0.4774431 0.067567,0.825683 0.2315023,1.1911334 0.1345562,0.2999574 0.1564936,0.4729875 0.075276,0.5937368 -0.06723,0.099954 -0.1561487,0.092775 -0.2324168,-0.018765 z m 1.8933683,0.018765 C 3.6365468,5.8662953 3.6560585,5.6858185 3.7753332,5.4380379 4.1188463,4.7244307 4.1197924,3.7094069 3.7776179,2.999382 3.6429592,2.71997 3.6325853,2.5521111 3.7418045,2.4198861 l 0.075181,-0.09102 0.086633,0.090218 C 4.0203372,2.5406289 4.166942,2.8867815 4.2640851,3.2701905 4.3824679,3.737428 4.4003256,4.4798159 4.3048106,4.9632571 4.193039,5.5289797 3.9621881,6.0585244 3.8273372,6.0585244 c -0.033816,0 -0.083811,-0.033194 -0.1110994,-0.073765 z M 16.261031,5.8261939 c 0,-0.045637 0.0072,-0.064305 0.01608,-0.041487 0.0088,0.02282 0.0088,0.060157 0,0.082975 -0.0088,0.02282 -0.01608,0.00416 -0.01608,-0.041488 z M 4.3687573,1.8508905 C 4.2623254,1.761146 4.2444407,1.5233062 4.3351256,1.4036369 4.417616,1.2947801 4.4433224,1.2914481 4.5271519,1.3787439 c 0.046045,0.04795 0.063608,0.1101527 0.063256,0.2240316 -5.112e-4,0.1636796 -0.012399,0.1956463 -0.098972,0.2660194 -0.042559,0.034595 -0.064157,0.031445 -0.1226784,-0.017906 z"
       id="path44" />
  </g>
</svg>


1 comment
10 |10000

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

Hello,


I just tried with your SVG and it works well, as you can see on this screenshot
2021-12-30-215920.png


Did you put the correct data in your layout.xml and the svg in this folder ?

PackageSources\html_ui\icons\toolbar

You can send me your package if you want and I will take a look ;)


Best Regards,

Boris

0 Likes 0 ·
2021-12-30-215920.png (577.4 KiB)
NaughtyGnome avatar image
NaughtyGnome answered

Hey @Abtzero

Created the SVG I wanted and once complete opened in XML viewer and copied everything in the G tag <g> </g>

And overwrote a copy of the original SVG that came with the example toolbar.

It seems all the header Information breaks the SVG in the game.

Hope this helps

Thanks



10 |10000

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

Abtzero avatar image
Abtzero answered

Hey, @NaughtyGnome, thanks for Your reply!
I think I tried this already...

need to check.

10 |10000

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

NaughtyGnome avatar image
NaughtyGnome answered

Hey @Abtzero

So there are two SVG files in the folder structure.

One in \html_ui\icons\toolbar

One in \html_ui\Textures\Menu\toolbar

Before the opening <g> tag all I have is

<svg id="Titre" xmlns="http://www.w3.org/2000/svg" width="64.000000px" height="64.000000px" viewBox="0 0 64.000000 64.000000">
    <title>ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL</title>
    <style type="text/css">
        .st0{display:none;}
        .st1{display:inline;fill:#E52613;stroke:#1D1D1B;stroke-miterlimit:10;}
        .st2{display:inline;}
        .st3{stroke:#FFFFFF;stroke-miterlimit:10;}
        .st4{fill:#FFFFFF;stroke:#FFFFFF;stroke-miterlimit:10;}
        .st5{display:none;fill:none;}
        .st6{display:none;fill:none;stroke:#1D1D1B;stroke-miterlimit:10;}
        .st7{display:none;fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
        .st8{fill:none;}
    </style>


You can put what you want in style but the opening lines of these bits

<svg id="Titre" xmlns="http://www.w3.org/2000/svg" width="64.000000px" height="64.000000px" viewBox="0 0 64.000000 64.000000">
    <title>ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL</title>
    <style type="text/css">


Need to be exactly that.

This is for both files.

Thanks

10 |10000

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

Abtzero avatar image
Abtzero answered

Thank Youn very much!

I figured ist out...

10 |10000

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

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 19.1 MiB each and 23.8 MiB total.