Coloring svg

Hello everyone !
Is it possible to color the svg logo as mine always appears black in spite of the original color png and jpg image
thanks !

If you have an inline SVG you can fill it with fill: red; instead of background-color. The border’s attribute is stroke instead of border.

#MyRect {
  fill: red;
  stroke: black;
}

MDN docs

Make sure to apply it on the inside elements like <rect> and <path> etc. and not on the svg itself.

1 Like

I am not getting it !
can you pls explain ?

Which part don’t you understand? The inline SVG?
Instead of using the <img> tag you have to embed the SVG source code in your HTML structure. Like this:

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="svgshape" x="10" y="10" width="100" height="100"/>
</svg>

Then you can apply the styles to it in your CSS:

#svgshape {
fill: red;
}
1 Like

Ok I got it ,
but How to add my icon in it !

Open your SVG in a code editor. Then copy the source code of your svg into your html structure… Your svg has the same structure as my example. Just much more complex I guess.

1 Like

Yes I opened my svg in vscode and then copy pasted the source code which was ■■■■ complex in the html and boom it’s working
thank you ! so much to learn :innocent:

1 Like