Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Upload SVG image such that svg tag is retained

Avatar

Level 4

Hi All,

 

I have a requirement to upload an SVG image such that it retains its tag and values in jsp.

For example, if uploaded images has dam path "/content/image.svg", in html element, it should look like 

"<svg id="CVAD" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1620.33 891">
<g id="Section_5" data-name="Section 5"><path d="M1409.64,862.85c1.18.06,2.35.4,3.54.45,1.4.06,2.84.06,4.23,0s2.81-.37,4.16-.35a14.68,14.68,0,0,1,4.09.75,11.92,11.92,0,0,0,5-1.23" transform="translate(-149.94 -94.5)"/>18.46,3.77,3.77,0,0,0-2.58,2.67A8.08,8.08,0,0,0,761.58,223.06Z" transform="translate(-149.94 -94.5)"/></g>
</svg>"

 

Any pointer on this.

 

TIA

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@annkitaaggarwal 

For that you need to write a code to extract the content of the svg file and display from HTL/JSP.

In your Sling Model or Scriptlet

InputStream stream = resolver.getResource("/content/dam/../image.svg/jcr:content/renditions/original/jcr:content").adaptTo(javax.jcr.Node.class).getProperty("jcr:data").getBinary().getStream();
String markup = new String(stream.readAllBytes(), StandardCharsets.UTF_8);
stream.close();

 If you are using HTL, return the string and use below line in HTML

${myModel.svgMarkUp @ context='unsafe'}

If you are using JSP, print the string value directly.

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

@annkitaaggarwal 

For that you need to write a code to extract the content of the svg file and display from HTL/JSP.

In your Sling Model or Scriptlet

InputStream stream = resolver.getResource("/content/dam/../image.svg/jcr:content/renditions/original/jcr:content").adaptTo(javax.jcr.Node.class).getProperty("jcr:data").getBinary().getStream();
String markup = new String(stream.readAllBytes(), StandardCharsets.UTF_8);
stream.close();

 If you are using HTL, return the string and use below line in HTML

${myModel.svgMarkUp @ context='unsafe'}

If you are using JSP, print the string value directly.