When I using more than one (4-5-6) svg elements in one page, usually broken down the rendering and the svg-s coloring is mess.
When I use more than one SVG:
When I change all of others SVG elements and using image element (but select svg file)
When I using more than one (4-5-6) svg elements in one page, usually broken down the rendering and the svg-s coloring is mess.
When I use more than one SVG:
When I change all of others SVG elements and using image element (but select svg file)
Hi @simplecreative,
nice Christmas time image
Anyway, my first though is that the SVGs themselves have some classes inside, and those classes mess up the colors of other SVGs.
I would suggest you to open/view SVG code, and check for any <style>
blocks and classes
that are inside.
If you find them, you will have to remove or rename it, so that they are unique to each SVG icon.
Let me know if that will help,
Matej
Hi Matej!
Yes, I understand what did you write, but is fully illogical. The SVG-s are in independent SVG elements. So the optimal / logical process would be, is there are isolated and doesnt matter if the SVGs have style attributes. For example, when you write %root% custom css inside a block. The SVG block should treat the SVG file inside it in a similar way.
When you work on a huge batch, you can’t be expected to go through all the files one by one at the code level (especially if you received material) and manually delete them one by one and then test them. From this point of view, it doesn’t matter whether it’s garbage from some program (e.g. Adobe Illustrator) or it contains style attributes intentionally.
If you approach it from here, then this is definitely a BUG.
Here are two practical examples, both files are included on the landing page.
Would it really be “normal” if I opened them one by one at the code level and started editing them manually? I don’t think so and I don’t support this approach. (Both were exported as SVG from Adobe Illustrator files and then went through SVGOM optimization.)
Yeah, I get your point, but this is how CSS styling works, and there is nothing Bricks can do about it. That’s why I will mark it as no-bug
In the SVG code, there are styles and styles are global - there is nothing we can do about it. Take a look at this example I prepared: Edit fiddle - JSFiddle - Code Playground and you will see, that even without Bricks, you will see that both lines are blue, even though the CSS Styles in the first one are defined as red.
You will need to scope those classes/styles, and then it will work.
I hope it’s understandable
Matej
I still understand exactly what you are writing. Nevertheless, I have to maintain my position that the different SVG blocks should handle the content of the files they contain in isolation.
Interestingly, if I load the SVG file into an image block, its vector function remains, but it still handles them separately in isolation.
Idea: what if the SVG block gets a toggle button under the file selector, called “isolated object”. If this is active, then it handles the svg file code base in isolation, as if I were using the style codes under the %root% value.
See, not a bug, but a feature request In doing this, we would have to read all styles inside the SVG and scope it to the SVG element ID. I’m not sure this is something that can be reliably achieved though.