SVG in core image component used in XF - doesn't load. | Community
Skip to main content
A
Abhishek_AnandTh
Level 3
September 3, 2024
Solved

SVG in core image component used in XF - doesn't load.

  • September 3, 2024
  • 2 replies
  • 1394 views

Hi all,

 

Facing an issue, with svgs.

 

Scenario: using image component in XF, with an SVG.

 

the image loads fine in author and view as published. but when checked in dispatcher it doesn't load.

 

The path is - 

/content/experience-fragments/abc/en/site/header/master/_jcr_content/root/image.coreimg.svg/1724821385787/abc-logo.svg

 

it gets a 404 in the network console.

 

I tried all the usual dispatcher allow rules. nothing works.

 

/0152 { /type "deny" /method '(POST|OPTIONS)' /url "/content/_cq_graphql/*/endpoint.json" }

 

/0153 { /type "allow" /method "GET" /url "/content/experience-fragments/.*/.*\\.svg"}

 

/0107 {/type "allow" /method "GET" /url "/content/experience-fragments/.*/.*\\.svg"}

 

/0021 { /type "allow" /path "/content/experience-fragments/.*/_jcr_content/.*" /selectors '(img|coreimg)' /method "GET" /extension '(png|svg|gif|jpg|jpeg)' /suffix '.*(jpg|jpeg|png|gif|svg)' }

 

/0021 { /type "allow" /path "/content/experience-fragments/*" /method "GET" /extension '(png|svg|gif|jpg|jpeg)' }

 

/0021 { /type "allow" /url "/content/experience-fragments/*" /extension '(png|svg|gif|jpg|jpeg)' }

 

Can anyone shed some light on this? is there some other thing im missing? is there a limitation with AEM?

 

Thanks in advance.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by arunpatidar

    hi @arunpatidar ,

     

    I've noticed, that we automatically get the dynamic media link, when the option to "enable web optimised images" is checked for the image component policy, in the template. (core component)

     

    if we uncheck it, it goes back to the 

    /content/abc/en/page1/_jcr_content/root/image.coreimg.svg/1724821385787/abc.jpg

     

    which again doesnt load.

     

    Also, with SVG, we never get the dynamic media link. whether the option is checked or not.

     

    I saw the documentation for dynamic media, where I dont see SVG is supported.

    https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/assets/file-format-support#image-support-dynamic-media

     

    trying to understand the behaviour here. should I raise a github issue or an adobe support ticket to investigate this?

     

    thanks.


    Hi @abhishek_anandth 
    You can open a support ticket for SVG Dynamic Media support if needed, but since the SVG is loading correctly on the publisher, it indicates that the issue lies with the dispatcher. Before contacting Adobe Support for dispatcher-related issues, try modifying the filter settings and check the request logs. It's possible that Adobe rewrite rules are affecting the image URL.

    2 replies

    MukeshYadav_
    Community Advisor
    MukeshYadav_Community Advisor
    Community Advisor
    September 3, 2024

    Hi,

    It is giving a 404 error which means not found.
    Click on this request and try to see the path which it is trying to access and check:

    • check whether it is accessible in publisher or not, if not that means experience fragment is not published. Please publish and check again.
    • If it's already published and can be accessed at the publisher then dispatcher is blocking it. Check dispatcher logs and allow it.

    You may cross check the rule is not overridden by any other rule as rules are processed in order.

    Also to ensure the content is not served from cache , clear dispatcher cache and try in different browser with some query params like 

    /content/experience-fragments/abc/en/site/header/master/_jcr_content/root/image.coreimg.svg/1724821385787/abc-logo.svg?q=something

    Thanks

    A
    Abhishek_AnandThAuthor
    Level 3
    September 4, 2024

    Hi @mukeshyadav_ ,

     

    Publisher works fine, the SVG even loads.

    have tried cache busting, with query params. still doesnt work

     

    these are my logs from dispatcher

     

     "GET /content/experience-fragments/abc/en/site/header/master/_jcr_content/root/image.coreimg.svg/1724821385787/abc-logo.svg" 302 936ms [publishfarm/0] [actionnone] publish-abc.com

     

     "GET /content/experience-fragments/abc/en/site/header/master/_jcr_content/root/image.coreimg.svg/1725327323350/abc-logo.svg" - 1101ms [publishfarm/0] [actionmiss] publish-abc.com

     

    "GET /content/experience-fragments/abc/en/site/header/master/jcr:content/root/image.coreimg.svg/1725327323350/abc-logo.svg" - 1063ms [publishfarm/0] [actionmiss] publish-abc.com


    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    September 3, 2024

    Hi @abhishek_anandth 
    above rules look fine, can you check the dispatcher debug logs

    or try with global allow  just for testing 

    /0001 { /type "allow" /url "*" }

     

    Arun Patidar
    A
    Abhishek_AnandThAuthor
    Level 3
    September 4, 2024

    Thanks @arunpatidar ,

     

    will try that config.

     

    one thing I noticed though

     

    when i use any other image format other than svg, the image path i get is from dynamic media.

     

    like: /adobe/dynamicmedia/deliver/dm-aid--d6cb7d68-1cd7-4a3e-95ac-34044513bb25/abc-logo.png?preferwebp=true&quality=85

     

    and the above works in all envs, author, publish, dispatcher

     

    only when i use svg i get this other format of link

     

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    September 4, 2024

    Hi @abhishek_anandth 
    Thanks for sharing. Dynamic media is delivered through a CDN, so there's no dispatcher involved, and it's a separate system from AEM. However, in your case, the SVG is being delivered directly from AEM.

    Arun Patidar
    Terms & ConditionsAccessibility statement

    Loading footer...