How to change multiple SVG colours at once using CSS only

Question

HTML Here all the SVG are of the same colour that is black, and I want to change them into blue colour. I only want that the outlines should be light blue and the filling of the SVG should be purplish-blue

<div class="row">
    <div class="owl-slider" style="width: 100% !important;">
        <div id="carousel" class="owl-carousel">
            <div class="item">
                <img src="svg/001-ambulance.svg" id="svg">
                <h6>Ambulance</h6>
            </div>
            <div class="item">
                <img src="svg/002-ayurvedic.svg" id="svg">
                <h6>Ayurvedic</h6>
            </div>
            <div class="item">
                <img src="svg/003-blood-bank.svg" id="svg">
                <h6>Blood Bank</h6>
            </div>
            <div class="item">
                <img src="svg/004-hospital.svg" id="svg">
                <h6>Click</h6>
            </div>
            <div class="item">
                <img src="svg/005-tooth.svg" id="svg">
                <h6>Dental Clinic</h6>
            </div>
            <div class="item">
                <img src="svg/006-diet.svg" id="svg">
                <h6>Dietician</h6>
            </div>
            <div class="item">
                <img src="svg/007-doctor.svg" id="svg">
                <h6>Doctor</h6>
            </div>
            <div class="item">
                <img src="svg/008-syringe.svg" id="svg">
                <h6>Equipements</h6>
            </div>
        </div>
    </div>
</div>

CSS Here I have not given any colour, but only the height and width.

.item{
    padding: 10px 35px;
    display: grid;
    place-items: center;
}

#svg{
    height:100px;
    width:100px;
}

All the code is here

You can't change the internal colors of an SVG served as an `img` — Paulie_D, May 03 '21 at 19:04

score 0 · Answer 1 · answered May 03 '21 at 19:07

you can use the CSS filter property to alter the appearance of the SVG to have a blue color. But that applies only one single tone to the black SVG. The best way to achieve the color variation as you said in the question is by editing the SVG file and manually setting it.

How to change multiple SVG colours at once using CSS only

1 Answers1