Trying to load SVG from CDN

[MwareSolutons]

Trying to load and SVG icon from CDN by setting the src on a view

<View autosize={true} style={styles} src={icon}></View>

https://cloudtv.akamaized.net/donotremove/tvms/icons/light/shield.svg

While the response is 200 from the CDN it still give an error in LNG and it wont show the icon

The error:

[philippe-wm]

Does the SVG refer to external files, like images? If it's on another domain than your app it won't work

[MwareSolutons]

Yes it is on another domain why would that not work PNG images from the same domain have no issues ?

[philippe-wm]

No I mean from inside the SVG, does it for instance incorporates images?

SVG generally is notorious to cause security issues on older devices, due to its ability to render foreign resources. We even have very old devices which refuse to render any remote SVG to canvas.

[MwareSolutons]

No that seems not to be the case, if we load from local asset folder we should be ok? even on these older devices ?

[philippe-wm]

I'd say, do a few tests...
On the oldest we use canvg to render the SVG using JS 😬

[philippe-wm]

OT: you have a log Computations created outside a createRoot... that you should look into.
That's a SolidJS memory leak because you must be creating Solid reactive primitives outside of a component context.

[MwareSolutons]

I am not sure I understand what you are saying where should I check to fix this memory leak?

[philippe-wm]

Here are some discussions about the issue: https://stackoverflow.com/questions/70373659/solidjs-computations-created-outside-a-createroot-or-render-will-never-be

[chiefcll]

Hey @philippe-wm - I know where this is happening - wondering how you handle it. But we create "global signals" that exist for the entire app - I'm not concerned about cleanup due to I want them to exist until the app is closed (which then the browser will clean them up) - Just want to get your thoughts - do you prefer just using Context or just createRoot to wrap global signals to ignore the warning?

[philippe-wm]

@chiefcll I think generally Solid won't show the warning if you create global signals before the app is rendered (we have a number of global signals as well), but after that point you should use createRoot for reactive set ups that you manage outside of the components lifecycle

(we're getting a bit OT though)

[MwareSolutons]

the SVG's icons are working perfectly from local assets

[elsassph]

Here's relevant reading:

• https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
• https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html

L3 renderer doesn't set crossOrigin="anonymous" when loading SVG for rendering to canvas so maybe that's the issue:

• https://github.com/lightning-js/renderer/blob/main/src/core/lib/textureSvg.ts

As a side note, normal image loading uses either an Image with crossorigin="Anonymous" (maybe casing is important) or fetch.

[wouterlucas]

L3 renderer doesn't set crossOrigin="anonymous" when loading SVG for rendering to canvas so maybe that's the issue:

* https://github.com/lightning-js/renderer/blob/main/src/core/lib/textureSvg.ts

Indeed, fairly simple change if that is desired. Do we know if setting that fixes the issue?

@MwareSolutons can you check if this resolves it on your device:

      const img = new Image();
      img.crossOrigin = "anonymous";

      img.onload = () => {
        console.log("Image loaded successfully. Attempting to draw on canvas...");

        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        canvas.width = img.width;
        canvas.height = img.height;

        ctx.drawImage(img, 0, 0);

        try {
          // Attempt to read pixel data from the canvas
          const imageData = ctx.getImageData(0, 0, 1, 1);
          console.log("Pixel data read successfully:", imageData.data);
        } catch (error) {
          console.error(
            "Failed to read pixel data. This is likely due to a CORS issue:",
            error
          );
        }
      };

      img.onerror = () => {
        console.error("Image failed to load. Ensure the URL is valid and supports CORS.");
      };

      img.src = '<SVG URL goes here>';
    }

by running that somewhere in a JS file for me?

As a side note, normal image loading uses either an Image with crossorigin="Anonymous" (maybe casing is important) or fetch.

!! that's a good spot - we should align that to be anonymous

[wouterlucas]

Any update @MwareSolutons ?