SVG icon state color change

[PieroA]

Hi All,
i am trying to change the color af a simple svg icon based on its status: normal / mouse over etc.

Tried several different approach but none works, it keeps changing the color of both status icon. Found on the forum that the different status svg file should be named differently but no success as welll.
Can someone please write kind of a bullet list with the step by step process to add different colors to svg icons ?
Thank you

Piero

[Hopki]

Hi Piero,
The way it works is you need separate SVG elements.
Please find two SVG images attached.
You can use one for the "Normal" state and the other for "Mouse Over".

You can not change the colour of a single SVG in an output.
Regards,

[Tony]

Hi Piero,

Tried several different approach but none works, it keeps changing the color of both status icon.

I know what you are trying to do and there is a way to do it with a single SVG. I’ll write up something later today.

Tony

[PieroA]

Hi Piero,
The way it works is you need separate SVG elements.
Please find two SVG images attached.
You can use one for the "Normal" state and the other for "Mouse Over".

You can not change the colour of a single SVG in an output.
Regards,

Thank you , in this way I should create new svg for each state with a different color.
Don't understand why some svg icons have already embedded different "states" and its colors, and some others have just one color.

[PieroA]

Hi Piero,

Tried several different approach but none works, it keeps changing the color of both status icon.

I know what you are trying to do and there is a way to do it with a single SVG. I’ll write up something later today.

Tony

Thank you Tony, as always!
Wierd that I could achieve it once but couldn't replicate the wrokflow for other icons
Piero

btw, this is the link at the tour https://tourvirtuali01.blob.core.window ... index.html where I am experimenting this changes (see bottom right icons) , for example, the Google Pin icon has a "stroke" state where I could asily change the color of. but not the fill color.

[Tony]

Hi Piero,

I just posted the tutorial that shows how to create alternate coloured svg elements from a single svg.

You can find it here https://tonyredhead.com/pano2vr-little- ... r-altcolor

Tony

[Hopki]

As a thought, if you want different colours, for example, your SVG is black, but you want dark green for Normal and light green for Mouse Over, add the SVG images separately to a simple skin and use the colour tool to set the colours of each, in this example one dark green and one light green.
You can add as many SVG images as you want and set their colours.

In the Web Output Properties and under the Advanced tab and the heading Skin, set the Inline Image Size to 0k
Save the skin, which will now contain your SVG images with the colours you require.

In this example, you will now have "simple.ggsk" in your project folder, change the file extension of the skin to .zip and unzip it.
You will see the SVG images with the colours you require.
Once you have your SVG images you can delete the unwanted files.

Remember to set the Web output properties back to 10000 bytes.
You can now open your project and add the SVGs using the "Change" button.
Regards,

[PieroA]

Thank you to all!!!!
That helped a lot.
First of all, retrieving all the svg icons from a skin is a game changer for me, very useful for future needs. Thank you

And thank you to Tony, as usual, for his very comprehensive tutorial, the secret was switching form one icon to the other and the game is done. Top suggestion, thank you again.

Now it all works as wanted, at least for me

see the results here: https://tourvirtuali01.blob.core.window ... index.html

Thank you
Piero

one last note: how and why an icon has different states characteristics within itself? (meaning that some icons, while changing its colours, have already set different type, not only "fill")

[Tony]

Hi Piero,

one last note: how and why an icon has different states characteristics within itself? (meaning that some icons, while changing its colours, have already set different type, not only "fill")

An SVG can have a number of different elements within it; the most common are fill and stroke. In the screenshot below you can see that the Twitter logo has a fill color and a stroke color.

svg-colors-0.png (139.71 KiB) Viewed 424 times

If we look at the SVG in a text editor we can see under Styles the two colors

svg-colors-2 (1).png (253.14 KiB) Viewed 424 times

The style st0 is the light blue fill and the style st1 is the dark blue stroke

In this example I've added the Twitter.svg as per the tutorial but instead of 1 color for the normal and 1 color for the mouseover it has 2 colors for the normal and 2 colors for the mouseover. These represent the fill and the stroke.

svg-colors-1.jpg (870.65 KiB) Viewed 424 times

In the online example (right button) you can see I have a variation where the normal has the stroke set at 0 alpha and the mouseover at 255 alpha.

svg-colors-0.jpg (225.62 KiB) Viewed 424 times

https://p2vrlittlebits.s3.ap-southeast- ... index.html

Tony

[PieroA]

very interestingm thank you, this adds tons of possibilities to customize elements of a tour. §
Will dive into HOW TO add all that code to an svg file
Thank you Tony

[Tony]

Hi Piero,

You can create an SVG by simply typing in all the code in a text editor and saving it as an .svg file but for anything more complex than a circle, square or star it’s going to be a lot of work.

You are better to use a vector program like Illustrator or Inkscape to generate the initial file and then open it in a text editor to make final changes or join a site like the noun project and download pre-made svg’s from there.

Creating SVG files in Illustrator: https://designbundles.net/design-schoo ... llustrator

Creating SVG files in Inkscape: https://designbundles.net/design-schoo ... n-inkscape

Noun Project (looking for camera svg files): https://thenounproject.com/search/icons/?q=camera

Tony