Photo Gallery Forums

Hello Karl, I have a question about using an SVG as the gallery logo.

I have confirmed that the gallery supports SVG: I tested a completely self-contained SVG (no external images), and it displays perfectly.

I am now trying to use an SVG that contains a PNG via an external

reference. The SVG itself is animated (the airplane banks left and right).

If external images inside SVGs aren't supported, is there a location within this X3 installation where I could place this PNG, so that the SVG can reference it locally? If so, what href= format/path shold I use?

The interesting part is that the SVG displays/animates correctly on my separate (non-X3) test page, and also directly at the above URL. But when I use the same SVG as the logo in this gallery, I can see the logo area/animation, but the externally referenced PNG airplane does not appear.

I don't need help with the SVG animation itself — that part is working. I mainly want to know whether external images referenced from inside an SVG logo are supported.

Thank you in advance and have a great day.

Regards,
John

I did another test that may help narrow this down.

I placed the PNG inside the gallery's logo image folder:

/content/custom/logo/logos_image_folder/

The PNG displays perfectly when I access it directly:

https://x3.NitroWings.me/content/custom/logo/logos_image_folder/US_Navy_030130-N-0226M-002_P-3C_Orion~cropped-40px~tail-fixed_inPixio12.png

However, when I use that exact same URL inside my SVG:

<image
href="https://x3.NitroWings.me/content/custom/logo/logos_image_folder/US_Navy_030130-N-0226M-002_P-3C_Orion~cropped-40px~tail-fixed_inPixio12.png"

...the SVG's banking/animation area displays, but the airplane image does not.

So the PNG is definitely accessible from the gallery, and a standalone SVG works correctly. It appears to be specifically the SVG loading the PNG that is failing.

Does the logo system restrict external/absolute URLs inside SVG elements? If so, is there a specific relative path or {{path}} syntax that I should use instead?

Thanks in advance.

Regards,
John

Sorry with all these reports:

I have 2 more important test results.

The exact same SVG file works perfectly when accessed directly:
https://x3.nitrowings.me/content/custom/logo/P3C-banking-test.svg

It also works when I access the same file directly from the Windows network share.

The SVG contains this external PNG reference:
<image
href="https://x3.nitrowings.me/content/custom/logo/logos_image_folder/US_Navy_030130-N-0226M-002_P-3C_Orion~cropped-40px~tail-fixed_inPixio12.png"

The PNG itself also displays correctly when accessed directly.

So the SVG, the animation, and the external PNG reference all work correctly when the SVG is accessed directly.

The problem occurs ONLY when I use that same SVG as the gallery's logo. In that situation I can see the logo/animation area, but the airplane (the external PNG inside the SVG) does not appear.

Does the gallery's logo-loading code treat SVG files differently from a normal / direct SVG request? Is there any sanitizing, rewriting, or restriction applied specifically to SVG logos?

One other detail occurred to me that may be relevant.

The gallery uses .htaccess rewrite rules to rewrite URLs/locations of files.

Could the URL rewriting be affecting SVG files when they are used as the gallery logo, particularly the way an SVG's resource is resolved or loaded?

The important distinction is that the exact same SVG works perfectly when I access the SVG directly, but the external PNG inside it disappears when that SVG is used as the gallery logo.

So I just skimmed through the text, because I pretty much know what is the issue here. SVG is a bit of a special format, which can be added to HTML in TWO main ways. The simple way, is to add it into an <img src="path/to/file.svg">. However, in your case, since you have an interactive animated SVG, you have to add the actual <svg> code into the html (which is also what the browser can do when the file is accessed directly by URL):



So basically, for this specific interactive SVG, you can't just use <img src=""> which is what X3 can do when you drop the file into custom/logo. X3 can't read the SVG and generate the code for you, so this would have to be done manually.

I put this through Google AI, which explains it in detail. We are talking method 1 and 2, possibly 3.
https://share.google/aimode/228lln2TMLXmKheCJ

This isn't about what X3 specifically supports or not. If you try to embed your SVG file directly into any other HTML page yourself, it would also not render, unless you embed the actual <svg> code. It only works like that when you load the SVG file directly in browser, because it's not embedded.

I don't know how you created the SVG file, but ultimately the code for the SVG is the below, and this is what would need to be pasted into the html to display the entire interactive SVG. Keep in mind, you have also assigned width/height attributes here, which may need to be considered, unless you use CSS to override.
I think what you may need to consider here, is that your SVG isn't really just a picture, but an encapsulated interactive presentation, which can't display inside the simple <img> tag.