SVG Deeper Understanding in F3

I have been trying to figure out some of the capabilities of the SVG tool in F3.

Because the tool does not inherently support applying a HOVER color to a FILL or STROKE, I decided to use Blacksmith to accomplish this task. So I created a class that applied the appropriate HOVER color when hovering over the SVG.

This only works if certain things are set up correctly with the SVG. Primarily, you CANNOT set a fill color in the tool. Otherwise, it does not work.

Anyway, I got this to work perfectly in PREVIEW mode, but nothing works once the site is published. The hover effect does not happen, and the color of the SVG defaults to BLACK. It does not do this in PREVIEW, where the colors behave correctly.

So, how would I create a class (or classes) in Blacksmith that would allow me to use an SVG essential like a button? As a workaround, I use a third-party stack that does this perfectly. But I would prefer to use an F3 tool.

There must be a method to make this work (ideally, it would be nice if the SVG tool supported a HOVER color); initially, it looked like Blacksmith was the perfect solution. But obviously, something is not right, most likely with the class(es) I created.

Any insights would be greatly appreciated, as it would be nice to be able to use SVG images as buttons.

Likely something to do with your SVG or setup. Seems to work here ok. Here’s an example using the default SVG included in the SVG tool: - Droplr

Interesting. I took the default SVG and uploaded it to my test page using my class and it behaved as expected. My SVG however behaved perfectly in Preview but would not work at all on the site. However, the exact same SVG code worked perfectly in the third-party SVG stack.

I guess I’ll have to see if I can tweak the SVG code till it works. Just seems weird that is work in Preview but not on the site and using the same class as your sample. Hmm!

Thanks for the help.

Republish all? Just asking :slight_smile:

I did not try a republish all will do that right now, thanks!

Is there any chance there could be a problem with the classes if Blacksmith is in a partial that is added to every page?

Tried a republish but still no luck.

Clearly not a problem with the SVG as I took the SVG code from my SVG and pasted it in place of your SVG in your sample project and it work just fine.

Something is interfering with the SVG when the site is published.

I took your test page and pasted it into my sites test page as is, with none of my settings, and now it works at least on some of the test SVG tools. But importantly it works with the SVG that has been causing all the problems.

Sounds like you’re narrowing in on things. Troubleshooting is definitely part of website design.

If you still need assistance with your problem project file after your troubleshooting, share the project and SVG that are not working. Without it helping is just a guessing game with us stumbling around in the dark, and makes things take far longer.

That said – you mentioned you had a tool that did exactly what you want already. Why not just use that if it provides you what you want?

Yes, that is what I have settled on doing Blueprint SVG does exactly what is needed. But it is still very disconcerting that this works fine in Preview but not when published. I hate mysteries like this, but enough time has been spent on the problem. Time to move on.

I’m still wondering though if it has anything to do with the fact that I have Blacksmith in a partial?

Have you tried troubleshooting it by simply taking it out of a partial?

Like I said if you want us to help you have to share your project file. I can’t know if you don’t share your project. That said I’m out for the night. If you share it I can look at it when I’m at my computer next.

Yes, I just tried that and clearly that is where the problem lies as now it seems to be working just fine. Now I just have to isolate whether it is Blacksmith that needs to be removed from the partial. For my test I simply unpacked the entire partial that contains the Control Panel, my banner and navbar.

One step closer!

Well, headed to bed here, but seems to work fine in a partial for me using my project: - Droplr


Yes, it turns out this has nothing to do with whether it is in a partial or not. After much messing around I have narrowed the problem down to this.

If you turn on the LINK feature for an SVG but don’t provide a link, it appears to block the attached class handling the hover. This means that the default color of the SVG is drawn, and none of the color changes in the attached class ever happen. Even though a hover appears recognized because the cursor changes correctly.

During all this, I also discovered that if you set a color (fill in my case) in the SVG tool, the attached class handling the HOVER does nothing. It somehow blocks the class from changing color.

I tested this in your simple sample project, and the same problems manifested. I am unsure what to make of all this, so I will leave my findings in your hands. All very interesting.

A little further investigating this morning seems to show that any time a LINK is attached to an SVG, whether there is a valid link or not, it blocks the attached class that handles the HOVER from being executed. The minute you turn off the LINK, it behaves correctly. This is on my site. I have not verified this yet in your test sample.

I forgot to point out that everything works in Preview mode, these problems only manifest themselves when the site is published, so I cannot verify if your sample has the exact same problems.

Please provide a project file for me so when I’m in the office I can address your problem.

Here is a link to the project on Dropbox.

The CLOTHING page at the very bottom of the content is the place to look for this. There is an SVG “SANDED. Australia” that is the one that I have been using to test all this. It is being used on multiple other pages, but those have all been replaced with the Blueprint SVG tool.

I should also point out that, as of the latest upload, this is now working. I’m pretty sure if I re-publish all that, it will break again.

I hope this helps.

I guess I’m not understanding. The SVG changes fill color for me when hovered over, whether it is linked or not linked, both in preview mode and within a browser: CleanShot 2023-03-17 at 20.28.59 · CleanShot Cloud

Perhaps I’m simply not understanding, or there’s too much going on with that page for me to suss it out. If you can walk me through it, maybe in a screen recording and create a small sample project that shows off just the problem, those things would help me better understand the issue.

I suspected that would be the problem as this seems very elusive. It has been working for some of these SVG links but not for others.

In this image, you can see the SANDED.Australia in the BLACK color near the top. This is the same SVG as the one in RED further down in the image. Both are identical and have the same svg-button class attached to them. The only difference is the one above (dark) is in a partial, the other is not. Hovering over the RED one works as expected, but the one is the partial does not work.

The SVG in WHITE is the third-party stack, and it works without problems.

I just went through the site and changed all to the partials back to using the F3 SVG tool, and now none of those links work. But everywhere, I have one I unpacked from a partial they work.

I’m really sorry about this I hate to make work for you but it is really disconcerting that this is so flaky. I have spent so much time on it and I just cannot understand what the problem might be.

The other problem I mentioned with the SVG tool should be very easy to reproduce. just set the FILL color in the tool and the attached class will no longer change the colors. Plus if the LINK checkbox is enabled but no valid link is applied it will block the hover color changes.