CODEWITHSUNDEEP
htmlcsssvg
Aamu
Aamu

Reputation: 3611

Manipulate svg colors with css

I have made a svg icon for search in illustrator, and want to use it in my website. I have place it in the html can see the icon.

<div id="search-btn">
    <img src="svg/search.svg">
</div>

But since I made it in black, I want to change the color of the magnifiying glass and the background. How do I manipulate the colors of the svg using css? I am very new to svg and your help will be very valuable. Thank you.

search icon:

enter image description here

svg code:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z"/>
</svg>

Upvotes: 2

Views: 1258

Answers (3)

CalvT
CalvT

Reputation: 3213

As said in the comments on this answer

CSS does not apply cross-document and the img is a separate document. Images must be self contained in a single file to preserve privacy. – Robert Longson

So this means you won't be able to include your SVG in your img tag and customize it using CSS on the page. So you have two options:

Inline the SVG code, which means scrapping the img tag. You can then target the SVG as below.

#search-btn svg {
  fill: blue;
  background: grey;
  width: 100px;
  }
<div id="search-btn">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z" />
  </svg>
</div>

Or you could add styles to the SVG file itself, as below, but this is similar to simply editing the file in Illustrator to get the colours you want.

<div id="search-btn">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <defs>
      <style>
        #XMLID_10_ {
          fill: blue;
        }
      </style>
    </defs>
    <path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z" />
  </svg>
</div>

Upvotes: 2

Philipp Lehmann
Philipp Lehmann

Reputation: 379

You could use classes for svg elements. Adobe Illustrator for example offers the possibility to create SVG internal CSS. But you can also write the style definitions in your own stylesheet.

To set the background use the fill property, like sebastianbrosch mentioned.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
    <defs>
        <style>
            .orange {
                fill:#f66d00;
            }
        </style>
    </defs>
    <path class="orange" d="M98.2, ... ,34.5z"/>
</svg>

Upvotes: -1

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

To set the background-color of your <svg> you have to use the background or background-color property. To set the color of the icon you have to use the fill property. See the following example:

svg {
  background:yellow;
  fill:red;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z"/>
</svg>

Upvotes: 1

Related Questions