Here is a very simple project that seems to show off the problems.
I tried to write in the TITLE for each tool what is happening with the three SVG tools on the page.
TOP - this is an SVG tool with the FILL color set to SECONDARY. Even with the svg-button class attached, nothing happens when you HOVER over it.
MIDDLE - default SVG from F3 with the svg-button class applied, correctly changing the colors to DANGER in the normal state and WARNING in the HOVER state.
BOTTOM - this is the partial from my website with the SVG embedded. It works fine in PREVIEW, but if you preview it in Safari, it does not work. Instead, it is drawn in black, not the colors used on the default SVG. It also has the svg-button class attached.
First thing I see – This project file has two Blacksmith tools on the page. Each had definitions that were duplicated. One Blacksmith tool per page.
You’re defining the Fill in two places – Once in Blacksmith using your svg-button class and once in the Tool’s settings. The Fill in the tool applies the styling to the tool’s Stacks ID + the svg element. Something like this in CSS:
#stacks_in_105-svg svg
Your CSS will not override that as your CSS is being applied differently. If you wish to style an SVG with Blacksmith then turn off the Fill mode in the SVG tool’s settings. Doesn’t make sense to style it in two locations anyway, IMHO.
