Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Converting svg img elements to svg elements

Avatar

Level 5

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.)?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

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.

Avatar

Community Advisor

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.



Esteban Bustamante

Avatar

Community Advisor

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.