Linked Image Broken on WordPress

  • Resolved Henry H.

    (@sirhenryhu)


    5 years, 5 months ago

    Parden me I can’t provide the URL now because the content is quite sensitive. Here is the situation I have now:

    It works perfectly with Safe SVG on WordPress if I ONLY use vectors to build up the SVG in Illustrator. In another hand, raster images linked to the SVG become invalid after it’s uploaded in WordPress.

    I have gone through the following steps:
    1) Replacing relative image URI to absolute URI in SVG;
    2) Checking the SVG with the user agent(browser) to make sure it can be working fine while it’s online(by saying that, the URIs have been replaced), and it works fine before uploaded to WordPress.

    Might anyone know the reason causing this? Any suggestion/solution will be appreciated in advance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Daryll Doyle

    (@enshrined)

    5 years, 5 months ago

    Hi @sirhenryhu,

    This is a tough one to diagnose without seeing the markup of the SVG but I’m going to guess that the raster images are linked using the <use> element? If so, that will be the issue.

    Currently, for security reasons, we only allow the <use> element if it references internal elements. This is because it’s the only way we can be sure that the referenced element is secure.

    Cheers,
    Daryll

    Thread Starter Henry H.

    (@sirhenryhu)

    5 years, 5 months ago

    Hi Daryll. Thank you for replying and giving feedbacks here(I know it’s not so relevant to the plugin though).

    From the code of the SVG exported by Adobe Illustrator, I can find information as following:

    • None of USE is being used in the code.
    • Instead, IMAGE is being used underneath a G(a ‘Group’ from the layer I created inside Illustrator).
    • The xlink:href inside IMAGE has <u>been placed with absolute image URI</u>.

    The file is loaded properly when I open the .SVG file with my browser(Google Chrome). However, it shows broken image after uploaded to my WP server. Please visit this page to see the screenshots.

    I believe it might be caused by the setting of Safe SVG plugin since it can be loaded fine on my edge. Would there by possibly another way to do it around, such as adding some rules/codes to the system files to get it working?

    Thank you for answering in advance.

    • This reply was modified 5 years, 5 months ago by Henry H..
    Plugin Contributor Daryll Doyle

    (@enshrined)

    5 years, 5 months ago

    Hi @sirhenryhu,

    Thanks for the update! The other reason could be that the xlink:href attributes are also heavily sanitised for security reasons.

    If you’re happy that the SVGs are secure (you made them yourself), a workaround could be to disable Safe SVG and upload the file using one of the other SVG plugins (without sanitisation) and then re-activate Safe SVG to make sure that the rest of your uploaded SVGs are secure.

    Cheers,
    Daryll

    Thread Starter Henry H.

    (@sirhenryhu)

    5 years, 5 months ago

    Hi Daryll.

    Getting back to you for the result. To be short at the first: it didn’t work. 🙁

    I added another plugin ‘SVG Support‘ and deactivated SVG Safe. The SVG image with images pointed to the file was uploaded to the server, and the raster image is still shown broken.

    Thank you for the following help. I’ll just leave it the way doing it for now, which is to embed the image to the SVG to make sure it’s displayed alright(around 240 kb). It’ll be lovely to see updates fixing this in the future of Safe SVG.

    I’ll mark this thread as ‘resolved’ to avoid confusing you. Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Linked Image Broken on WordPress’ is closed to new replies.