Streaming live at 10am (PST)

2 embed elemnt SVGs, can't make them different colours?


#1

Hi,

I have embedded 2 different SVGs using an embed element and I want to make them different colours, however when I change the colour for one it does not take effect until I change the colour for the other to the same colour, leaving them both the same colour. Am I missing something in the code here that is forcing them both to be in the same class or something like that?

They are exported for screen from Adobe Illustrator layers to SVG files, opened in simple text and code copied into embed element.

Simply I want one of them to be white and the other to be another colour.

https://preview.webflow.com/preview/jsd-test?preview=427c8cb9261e1a8016ae0accc11dff7a

Thanks!


#2

But aren’t the SVG id layers the same? I can see they both have the same ID:


#3

You have to change the class of the embedded svg, i.e. give the second svg a class .cls-2 in the style definition and the path class=“cls-2”. That will work


#4

What @rich_art said. Both currently have the same class and you need to change the class of the one you want to have a different style.

Here is a first SVG which I changed the stroke property to #fff for white. In the second SVG you would change the underlined parameters to whatever you want to be different.

Example of the 2nd SVG with a different class and stroke property.

Result:


#5

Thanks a lot for your help! I suspected something like this but I am not very familiar with code, it seems that Adobe Illustrator outputs SVGs from different files with the same class ID by default, so just needs to be changed manually.

Thanks again, John


#6

Yes, this is an important thing to note. They should be using some random id instead.