Converting svg img elements to svg elements

[Codelime]

Is it possible to provide authors the ability to upload svg images, but have these images converted to svg elements (paths) when the icon is rendered on the page, so that we can manipulate icon colors using CSS, based on which theme is selected by the author (light, dark, etc.)?

[Mahedi_Sabuj · Accepted solution]

You can retrieve SVG elements from an SVG image using JavaScript.
https://stackoverflow.com/questions/60985791/how-to-convert-image-svg-to-rendered-svg-in-javascript 

Similarly, you can accomplish this using Java as well by utilizing the HttpClient class. This allows you to fetch the SVG image from a URL and manipulate its content as needed within your Java application.

[EstebanBustamante]

Hi,

The key lies in how you add the SVG into the HTML, not necessarily in how you upload it. As suggested, you could use JavaScript to transform the inclusion from an image tag to an SVG tag. Another approach could be to build a custom component that includes the SVG directly within an SVG tag, instead of using the img tag.

Hope this helps.

[Raja_Reddy]

Hi @Codelime 

Yes, it is possible to convert SVG images to SVG elements (paths) when they are uploaded to AEM, so that they can be manipulated using CSS.

1. Create a custom workflow process step that converts the uploaded SVG image to an SVG element. You can use a third-party library like svgson to convert the SVG image to an SVG element.

2. Configure the custom workflow process step to run when an SVG image is uploaded to AEM. You can use the `dam:Asset` node's `metadata` property to trigger the workflow process step.

3. In the custom workflow process step, use the svgson library to convert the SVG image to an SVG element. You can then store the SVG element as a property of the asset node.

4. In your AEM component, retrieve the SVG element from the asset node and render it on the page. You can use CSS to manipulate the SVG element's properties, such as the fill color, based on the selected theme.

By converting the SVG image to an SVG element, you can manipulate the icon's properties using CSS, which gives you more flexibility in terms of theming and customization.