Converting svg img elements to svg elements | Community
Skip to main content
C
Codelime
April 4, 2024
Solved

Converting svg img elements to svg elements

  • April 4, 2024
  • 3 replies
  • 1658 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Mahedi_Sabuj

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.

3 replies

Mahedi_Sabuj
Community Advisor
Mahedi_SabujCommunity AdvisorAccepted solution
Community Advisor
April 4, 2024

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.

Mahedi Sabuj
    EstebanBustamante
    Community Advisor and Adobe Champion
    EstebanBustamanteCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    April 4, 2024

    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
      Raja_Reddy
      Community Advisor
      Raja_ReddyCommunity Advisor
      Community Advisor
      April 5, 2024

      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.

        Terms & ConditionsAccessibility statement

        Loading footer...