PNG image change color

Question

I'm having serious troubles painting a PNG image. All the threads I see change the background color as well.

I need to change the color of a customizable item I want to sell (ie glasses: changing color of the glass or temples or front) whenever the customer push a button on a color panel next to it.

I've start splitting the original image in 4 .png parts (in the example: glass, front part, left temple and right temple) and I would place them one above the others. How could I change the color of a the right temple, for example?

I'd like the solution to be compatible with IE.

Thank you team.

Answer 1

Personally and where possible (dependent on your IE versions you need to support this technique is >8), I'd achieve this with an inline SVG rather than png. SVG should probably have smaller file sizes than your pngs saving you bandwidth!

Anything complex or based on a raster graphic should remain as jpg/png, in your instance this could be a background image of the wearer of the glasses. The glasses themselves would be SVG.

To add an inline SVG to your content open the SVG file in you text editor of choice, copy the code (it should look familiar, it's XML syntax) and insert that into your relevant image container in your HTML eg

<div id="myImgCnt">
    <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
        <rect class="square" x="14.8" y="17.7" width="165.1" height="165.1"/>
        <circle class="circle" cx="105.8" cy="102" r="67.7"/>
    </svg>
</div>

Note that I've added a class to the circle and the square shapes. This can now be targeted as usual in CSS eg

.square{fill: red;}
.circle{fill: blue;}

Check this fiddle for an example in action https://jsfiddle.net/elmarko/t7z7sbag/