How to change the color of the lines with an svg file and css?

Question

I customized an SVG file on the website below, to make a background in a block :

https://heropatterns.com/

When I paste the code in my style.css file the code is hundreds of lines long :

This gives exactly the result I want to achieve :

Now I want to download the SVG file to lighten my style.css file but no custom style is applied to the SVG :

I use this code on my block :

.embedded-entity .node--type-track {
    padding: 1rem 1rem 0.2rem 1rem;
    border: 2px solid #ced8dd;
    background: #f7f9fa;
    background-image: url("/themes/subtheme_olivero/images/topography.svg");
}

The background works, but how to put the lines with this #f7f9fa color ?

Answer 1

In the file that you share on https://svgshare.com/i/iQk.svg you there is no fill-opacity like in the code that you copyed from https://heropatterns.com/ in the first place. Therefore the background-color is not showing through – it is just a black and white pattern.

In this example I picked on of the more simple patterns. The idea is that you have 1) foreground-color, 2) background-color and 3) fill-opacity. In my example the background-color is green. This is the color define as behind/as a background to the image. The foreground-color (red) defines the color of the shape defined in the SVG – you can see it in the SVG code as the fill attribute. Lastly you have the fill-opacity (also a SVG attribute) that defines how much the background can be seen in the pattern If it is 0 then it is only the solid background you can see, if it is 1 then the shape if the SVG has the color of the foreground-color.

 div { width: 300px; height: 300px; background-color: green; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='red' fill-opacity='1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

 <div></div>

As I see your example screen dump it looks like the foreground-color is maybe too dark. In the next example I used your background-color, a gray fill and a fill-opacity of .3.

 div { width: 300px; height: 300px; background-color: #f7f9fa; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='gray' fill-opacity='.3'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

 <div></div>