Expand my Community achievements bar.

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.