SVG is not showing on Google Chrome | Community
Skip to main content
otavios60241350
otavios60241350
Level 2
April 5, 2018
Solved

SVG is not showing on Google Chrome

  • April 5, 2018
  • 18 replies
  • 74190 views

[Thread Edited By Adobe]

/*Don’t forget to meet and greet your fellow peers virtually by telling them about yourself here. 

Go ahead and to it now: https://adobe.ly/3eDnB4v */

 

Actual Question:

Hi, I have some SVG files on my assets and I want use it on my component so a create a cq:dialog with a file field and on htl I am using properties global object, but the svg image are not working on chrome.

 

CODE:

file field:

 

<file

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

autoStart="{Boolean}false"

class="cq-droptarget"

fileNameParameter="./fileName"

fileReferenceParameter="./fileReference"

mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg]"

multiple="{Boolean}false"

name="./file"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true" />

 

HTL:

<img class="lines-about" src="${properties.fileReference}" alt="">

 

Result: Image not show if the image I select a SVG but if I select another type Image showing correctly.

    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 nileshdchavan

    Adobe advised to use the org.apache.sling.security-1.1.12.jar to fix this rendering issue. It worked for us. Thank you.

    18 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    April 6, 2018

    Is it just happening on Chrome? Do you see any error on browser or AEM error.log?

    If not then check this thread:- [AEM 6.3] Add SVG drag and drop support to Content Explorer

    This seems to be similar.

    Kautuk Sahni
    otavios60241350
    otavios60241350Author
    Level 2
    April 6, 2018

    I had test it on Chrome and Firefox, but the bug only happens on Chrome. I had no error on browser console or error.log. I already saw the another thread about SVG, but the errors is not similar with the my. I saw in some sites people have similar problems on another CMS or Applications Services they solve their erros just editing the .htaccess puting this rule "AddType image/svg+xml svg svgz
    AddEncoding gzip svgz", but on AEM we haven't .htaccess, so it not work for us. 

      smacdonald2008
      smacdonald2008
      Level 10
      April 6, 2018

      Looks more of a browser issue as opposed to AEM issue. See Chrome not rendering SVG referenced via <img> tag - Stack Overflow

        otavios60241350
        otavios60241350Author
        Level 2
        April 6, 2018

        But the plan HTML with <img src="mysvg.svg"> used on my component work well  even on Chrome. It stop work when I put the html on AEM component and I refer the image from AEM Assets folder.

          smacdonald2008
          smacdonald2008
          Level 10
          April 8, 2018

          So if you select another file type - it works?

            kautuk_sahni
            Community Manager
            kautuk_sahniCommunity Manager
            Community Manager
            April 9, 2018

            This requires some debugging this could be some issue with the 3rd party lib for SVG rendition AEM uses.

            Please create a Support ticket for this.

            Try Workaround:- AEM can be configured with ImageMagick Best Practices for Configuring ImageMagick

            Kautuk Sahni
            F
            fernandou237618
            Level 2
            June 20, 2018

            Hi there.

            I have the same problem.

            We’ve created a page in Adobe AEM using DAM to serve image files. PNG image files are being served OK, but SVG image files are not being displayed correctly in Chrome (Firefox actually displays it).

            The problem is: AEM http response should be returning “Content-Type:image/svg+xml” but it is actually returning “Content-Disposition: attachment; filename="yt.svg"”.

            If I try to open the URL directly, Chrome doesn’t display the image (instead, it tries to download it), while Firefox displays it.

            If I access other websites that uses SVG, it works OK, because their server is returning the correct HTTP response. Only content served by DAM is not OK.

            Is there any solution to this annoying problem?

              F
              fernandou237618
              Level 2
              June 20, 2018

              By the way, I am using Adobe AEM 6.4.

                qglez
                qglez
                Level 2
                June 29, 2018

                Same problem here.
                I've tried to set the file under Apache Sling Content Disposition Filter to avoid it, but it seems no working as expected.

                Even though it is not a suitable solution if is needed to set every image in that bundle configuration.

                Does anyone find a solution?

                  N
                  nileshdchavanAccepted solution
                  Level 2
                  June 29, 2018

                  Adobe advised to use the org.apache.sling.security-1.1.12.jar to fix this rendering issue. It worked for us. Thank you.

                    Show more replies
                    Terms & ConditionsAccessibility statement

                    Loading footer...