Changing the colours of Photoshop SVG images using the Skin Editors Colour Tool

Thu Aug 13, 2020 5:51 pm

Hi,
It is possible to use Photoshop to create SVG graphics, although they can be used in the Skin Editor you can not use the Colour Tool.
However, what you can do is edit the SVG using a text editor to allow the colour to be available to the Colour Tool.

So from starting with creating the SVG here's how:

1) Open Photoshop and use Shape Tool to draw a shape, here I use the House shape to make a Home Button.
I have used light grey as the colour.

: 1.png (96.45 KiB) Viewed 5607 times

Then select File => Export => Export As and set Format to SVG.

: 2.png (77.96 KiB) Viewed 5607 times

Now save the file, see the attached file: home_button.svg.zip

home_button.svg.zip: (612 Bytes) Downloaded 195 times

2) Now open the SVG with a text editor, Mac use TextEdit and for Windows use NotePad.
It will look like this:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
  <defs>
    <style>
      .cls-1 {
        fill: #d0d0d0;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path id="Home_1" data-name="Home 1" class="cls-1" d="M2,20.889L32,3.578l5.647,3.245V2h7.9v9.376L62,20.889H2Zm41.232-8.151V4.324H39.971l-0.009.014v6.517L31.971,6.279,10.685,18.567H53.329ZM54.555,53H33.74V40.825l-0.014-.01H27.808l-0.014.01V53H9.16V22.708h45.4V53ZM52.238,25.03H11.477V50.676h14V38.493h10.58V50.659l0,0.017H52.238V25.03ZM47.587,35.615H38.758V27.269h8.828v8.346ZM13.7,27.269h8.833v8.346H13.7V27.269Z"/>
</svg>

You will see the colour is located in the style tag at the top,

Code: Select all

fill: #d0d0d0;

This needs to be moved into the path. When done you can also remove the <defs></defs> tags and all the information between them so the code now looks like this:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
  
  <path fill="#d0d0d0" id="Home_1" data-name="Home 1" class="cls-1" d="M2,20.889L32,3.578l5.647,3.245V2h7.9v9.376L62,20.889H2Zm41.232-8.151V4.324H39.971l-0.009.014v6.517L31.971,6.279,10.685,18.567H53.329ZM54.555,53H33.74V40.825l-0.014-.01H27.808l-0.014.01V53H9.16V22.708h45.4V53ZM52.238,25.03H11.477V50.676h14V38.493h10.58V50.659l0,0.017H52.238V25.03ZM47.587,35.615H38.758V27.269h8.828v8.346ZM13.7,27.269h8.833v8.346H13.7V27.269Z"/>
</svg>

Note, the colon has been removed and double quotes have been added

Code: Select all

fill="#d0d0d0"

Please see home_button 2.svg.zip

home_button 2.svg.zip: (1.08 KiB) Downloaded 177 times

If you open the Skin Editor and drag in both SVG graphics then try to use the colour tool on the unmodified SVG you will see:

: 3.png (22.6 KiB) Viewed 5607 times

Now use it on the modified one and you will see:

: 4.png (21.73 KiB) Viewed 5607 times

Now change its colour, I used Red:

: 5.png (43.6 KiB) Viewed 5607 times