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

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 10748
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

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
1.png (96.45 KiB) Viewed 860 times

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

2.png
2.png (77.96 KiB) Viewed 860 times

Now save the file, see the attached file: home_button.svg.zip
home_button.svg.zip
(612 Bytes) Downloaded 16 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 13 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
3.png (22.6 KiB) Viewed 860 times

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

4.png
4.png (21.73 KiB) Viewed 860 times

Now change its colour, I used Red:

5.png
5.png (43.6 KiB) Viewed 860 times
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply