Change SVG Color Via Action?

Q&A about the latest versions
Post Reply
User avatar
1uv3
Posts: 100
Joined: Thu Sep 20, 2018 10:18 pm

Change SVG Color Via Action?

Post by 1uv3 » Sat Jan 12, 2019 9:06 pm

Hi All,

Is it possible to change the colors of the SVG files with an action such as "on click"? I am doing all I can to keep the tour file sizes down so would like to simply change the color instead of creating additional graphics.

Thanks!
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

User avatar
Hopki
Gnome
Posts: 8881
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Change SVG Color Via Action?

Post by Hopki » Sat Jan 12, 2019 10:18 pm

Hi,
You can't dynamically change the colour of an SVG but if its file size and performance you're concerned about then did you know If a graphic is under 5K then it gets coded inline with the skin.js file.
This means the loading will be far better.
Only images larger than this will get placed into the images folder.
Regards,
Hopki

User avatar
1uv3
Posts: 100
Joined: Thu Sep 20, 2018 10:18 pm

Re: Change SVG Color Via Action?

Post by 1uv3 » Sun Jan 13, 2019 1:15 am

Hi Hopki,

Thanks for the quick response and no, I did not know that. That's good to know and thanks for sharing :-)
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

mbb
Posts: 203
Joined: Mon Oct 19, 2009 11:42 pm

Re: Change SVG Color Via Action?

Post by mbb » Mon Jan 14, 2019 5:34 am

Inline SVGs can be altered via javascript. Haven't had the need to do this myself yet, but here's a page on stackoverflow discussing it which may lead you to what you need?

https://stackoverflow.com/questions/987 ... javascript

User avatar
1uv3
Posts: 100
Joined: Thu Sep 20, 2018 10:18 pm

Re: Change SVG Color Via Action?

Post by 1uv3 » Mon Jan 14, 2019 8:54 pm

mbb wrote:
Mon Jan 14, 2019 5:34 am
Inline SVGs can be altered via javascript. Haven't had the need to do this myself yet, but here's a page on stackoverflow discussing it which may lead you to what you need?

https://stackoverflow.com/questions/987 ... javascript
Very interesting stuff. It's a little outa my league but maybe someone with more coding experience can whip together a working script for us :-) Thanks for sharing!
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

User avatar
Tony
Posts: 583
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Change SVG Color Via Action?

Post by Tony » Tue Jan 15, 2019 2:13 am

Here's a cute little coloring script that I found online. It's implemented as an html page loaded via an iFrame in a text box. The link will take you to a page with the code.

Link: https://s3-ap-southeast-2.amazonaws.com ... index.html


svg-0.jpg
svg-0.jpg (62.55 KiB) Viewed 67 times


Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
1uv3
Posts: 100
Joined: Thu Sep 20, 2018 10:18 pm

Re: Change SVG Color Via Action?

Post by 1uv3 » Mon Jan 21, 2019 7:41 pm

That's actually pretty cool. Thanks for sharing Tony! I'll see if I can figure out a way incorporate the concept into my tours :-)
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

Post Reply

Who is online

Users browsing this forum: No registered users and 15 guests