I can’t seem to be able to colorize an SVG in F3. If I take the same SVG code and put it in Source SVG, it colorizes with no problem, but it will not work in F3.
In this instance, I’m trying to do a color fill, as that is how the SVG was created. It started with a WHITE fill when the SVG was created.
Am I missing something?
Can you share your SVG file with me?
Create a ZIP file containing your SVG file. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for us. Paste that download link in your reply.
Does the fill color work for you using the default SVG in the SVG tool?
Yes, the default SVG you provide does colorize correctly. Attached is the link to the ZIP archive of the SVG.
NOTE: I can manually change the fill color of this SVG if I go into the code and edit the color value. Which is how I have been forced to use it in the project I’m working on. I use this SVG on other sites and can change the color without resorting to manual editing. So it seems a little strange.
By the way, I have done a little further experimenting, and I found that if I DELETE the fill style color setting at the end of this SVG (which turns it black), then I can set the fill color. The stroke color always worked because this SVG does not use a stroke.
I can look at the SVG tomorrow, but if your SVG has inline styling then that is why the Foundry SVG tool is not affecting the full color. The SVG tool specifically does not forcibly override the inline styling. Generally speaking inline styles should trump other styling most times. The tool was designed with the thought that if you’ve applied specific inline styling that is what you wanted and that it should not override that inline styling.
Hmm, I wonder why other SVG stacks seem to ignore the problem. What makes this hard is that there is no way in something like Affinity Designer to create an SVG with no color styling. So the only way to achieve this is to remove the styling manually.
I have found that if you union all the curves, then there is typically only a single styling setting for the color, making it much easier to delete. Otherwise, the styling appears on every curve.
I’ll experiment with creating an SVG from a curve with no styling.
Would it be possible to have an option in the SVG to force it to override the styling if the user makes that choice?
You’re seeing it as a problem because it affects the way you’re wanting to do something. It is not a bug, it is just that two developers have approached it differently. The other SVG tools you’re referring to are simply overriding the fill color, no questions asked and with no regard to whether you may want them to do so.
My approach is that is there’s an inline styling then that styling should be kept as the user designed or chose the SVG for the colors it already has applied to it. The fill color option in the Foundry SVG tool is there for SVGs that don’t have any styling of their own already applied.
If you’re already building your graphics just assign the color choice you want when creating your graphic. It sounds like your software will inline those stylings and viola it will be the way you want it when you insert your SVG code into the tool.
I think I’m going to have to disagree. When I see an option to OVERRIDE a color in a stack, I have to assume that is what I want. If I override a color, the tool should do what I want. How many people will know that they must create an SVG with no color settings to use color?
You are essentially saying that with the F3 SVG, you HAVE to provide a color. It is not an option.
One of the main reasons this color change option is so powerful is that it allows one to quickly test out different color ideas against the backdrop of the website being created. If I had to create SVGs for all the options I might want to test, that would be a real pain.
The other thing (and this is something I think is missing in F3) is that I use the color change option in these other stacks to create a graphical button. These stacks provide options for a HOVER color, allowing an SVG to be used easily as a button. It would be nice if this could be done in the F3 SVG.
I guess I’ll have to revert to using the 3rd party stacks for SVGs.
I’m sorry you disagree with the approach I took for my version of an SVG tool.
It is not that I disagree with the approach, it just seems limiting.