Search code examples
cssreactjssvgpng

How to customize PNG images in SVG tag?

I am trying to change the colour of the png image in the SVG tag. I have PNG's of transparent types. I need to customize the colours in the PNG according to the colour selected by the user. As there are features where you can change the colours in different parts. So How this can be done? Is there anyone who could help me?

  <HoodieSvg
    backgound="red"
    width="800"
    height="800">
    <image href={lights} width="400" height="400" fill="#000"/>
    <image href={model} width="400" height="400" />
    <image href={shadows} width="400" height="400" />
  </HoodieSvg>

import React from 'react'

const HoodieSvg = (props) => {

return (
  <svg
    {...props}
    xmlns="http://www.w3.org/2000/svg"
  >
    {props.children}
  </svg>
)
}

 export default HoodieSvg
Solution

  • Unlike regular SVG elements, I don't think it's possible to change the color of a PNG image inside a svg tag. According to the Mozilla doc, the svg/image attributes are x, y, width and height