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
SVG icon state color change
Bergamo - Italy
Visit my Web site: https://www.pieroannoni.com
Virtual tour web gallery: https://www.pieroannoni.com/gbp
- Hopki
- Gnome
- Posts: 13039
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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,
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,
- Attachments
-
- Archive.zip
- (1.44 KiB) Downloaded 31 times
Garden Gnome 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/
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/
Hi Piero,
Tony
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.Tried several different approach but none works, it keeps changing the color of both status icon.
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
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.
Bergamo - Italy
Visit my Web site: https://www.pieroannoni.com
Virtual tour web gallery: https://www.pieroannoni.com/gbp
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.
Bergamo - Italy
Visit my Web site: https://www.pieroannoni.com
Virtual tour web gallery: https://www.pieroannoni.com/gbp
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
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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
- Hopki
- Gnome
- Posts: 13039
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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,
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,
Garden Gnome 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/
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/
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")
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")
Bergamo - Italy
Visit my Web site: https://www.pieroannoni.com
Virtual tour web gallery: https://www.pieroannoni.com/gbp
Hi Piero,
If we look at the SVG in a text editor we can see under Styles the two colors
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.
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.
https://p2vrlittlebits.s3.ap-southeast- ... index.html
Tony
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.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")
If we look at the SVG in a text editor we can see under Styles the two colors
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.
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.
https://p2vrlittlebits.s3.ap-southeast- ... index.html
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
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
Will dive into HOW TO add all that code to an svg file
Thank you Tony
Bergamo - Italy
Visit my Web site: https://www.pieroannoni.com
Virtual tour web gallery: https://www.pieroannoni.com/gbp
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
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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/