Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

SVG is not showing on Google Chrome

Avatar

Avatar
Validate 1
Level 2
otavios60241350
Level 2

Likes

9 likes

Total Posts

11 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 5
View profile

Avatar
Validate 1
Level 2
otavios60241350
Level 2

Likes

9 likes

Total Posts

11 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 5
View profile
otavios60241350
Level 2

05-04-2018

[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.

desktop_exl_promo_600x100_weempoweryou.png

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
nileshdchavan
Level 2

29-06-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.

Answers (17)

Answers (17)

Avatar

Avatar
Boost 5
Level 2
qglez
Level 2

Likes

7 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Boost 5
Level 2
qglez
Level 2

Likes

7 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
qglez
Level 2

23-07-2018

Hi Tobias

Try to download the jar from the mvnrepository and installing it directly in the AEM instance http://localhost:4502/system/console/bundles

Avatar

Avatar
Validate 1
Level 2
fernandou237618
Level 2

Likes

7 likes

Total Posts

19 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 2
fernandou237618
Level 2

Likes

7 likes

Total Posts

19 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 5
Boost 3
View profile
fernandou237618
Level 2

20-06-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?

Avatar

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
dorianhallward
Level 3

19-11-2018

Installing an upgraded osgi org.apache.sling.security-1.1.16.jar corrects this issue (presumably adding the right headers into the response if  @fernandou23761826 's analysis of the problem is correct).

@ kautuksahni​ is this the official solution?  how will this get rolled out, do i need to include sling security jar as a provided dependency along with custom code?

Avatar

Avatar
Boost 1
Level 1
Pawan_Mittal
Level 1

Like

1 like

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Applaud 5
View profile

Avatar
Boost 1
Level 1
Pawan_Mittal
Level 1

Like

1 like

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Applaud 5
View profile
Pawan_Mittal
Level 1

09-08-2018

Thanks. It's really helpful.

Avatar

Avatar
Boost 3
Level 2
tobiasm14341022
Level 2

Likes

3 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 3
Boost 1
View profile

Avatar
Boost 3
Level 2
tobiasm14341022
Level 2

Likes

3 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 3
Boost 1
View profile
tobiasm14341022
Level 2

24-07-2018

Thanks, that worked for me.

First I tried to install it with the package manager. That did - of cource - not work. I didn't know jars can be installed on the Felix consoles bundle page.

I learned something new. Thanks.

Avatar

Avatar
Boost 3
Level 2
tobiasm14341022
Level 2

Likes

3 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 3
Boost 1
View profile

Avatar
Boost 3
Level 2
tobiasm14341022
Level 2

Likes

3 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 3
Boost 1
View profile
tobiasm14341022
Level 2

23-07-2018

Hi,

what do you mean by use org.apache.sling.security-1.1.12.jar? Just add it as dependency? For me, it does not affect anything.

Thank you,

Tobi

Avatar

Avatar
Boost 5
Level 2
qglez
Level 2

Likes

7 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Boost 5
Level 2
qglez
Level 2

Likes

7 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
qglez
Level 2

05-07-2018

In AEM 6.4 I've check with different users in different environments:

Author admin: svg renders

Author with an author account: svg renders
Publish with anonymous account: svg renders

Avatar

Avatar
Validate 1
Level 2
mail2saravana_p
Level 2

Likes

6 likes

Total Posts

10 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
mail2saravana_p
Level 2

Likes

6 likes

Total Posts

10 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
mail2saravana_p
Level 2

03-07-2018

This fix helps. But this works only for administrative users. This is still broken when logging in as Author. What is the permanent fix?

Avatar

Avatar
Boost 5
Level 2
qglez
Level 2

Likes

7 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Boost 5
Level 2
qglez
Level 2

Likes

7 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
qglez
Level 2

01-07-2018

Thank you! It render fine now

Avatar

Avatar
Boost 5
Level 2
qglez
Level 2

Likes

7 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Boost 5
Level 2
qglez
Level 2

Likes

7 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
qglez
Level 2

29-06-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?

Avatar

Avatar
Validate 1
Level 2
fernandou237618
Level 2

Likes

7 likes

Total Posts

19 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 2
fernandou237618
Level 2

Likes

7 likes

Total Posts

19 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 5
Boost 3
View profile
fernandou237618
Level 2

20-06-2018

By the way, I am using Adobe AEM 6.4.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

08-04-2018

So if you select another file type - it works?

Avatar

Avatar
Validate 1
Level 2
otavios60241350
Level 2

Likes

9 likes

Total Posts

11 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 5
View profile

Avatar
Validate 1
Level 2
otavios60241350
Level 2

Likes

9 likes

Total Posts

11 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 5
View profile
otavios60241350
Level 2

06-04-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.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

06-04-2018

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

Avatar

Avatar
Validate 1
Level 2
otavios60241350
Level 2

Likes

9 likes

Total Posts

11 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 5
View profile

Avatar
Validate 1
Level 2
otavios60241350
Level 2

Likes

9 likes

Total Posts

11 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 5
View profile
otavios60241350
Level 2

06-04-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. 

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,129 likes

Total Posts

6,140 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,129 likes

Total Posts

6,140 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

09-04-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

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,129 likes

Total Posts

6,140 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,129 likes

Total Posts

6,140 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

06-04-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.