How to apply a color gradient to an .SVG image?

Question

I have successfully implemented an SVG gradient using an SVG element and some CSS, see below. I have an .SVG image which is black and white and would like to apply the gradient to the black portions of the SVG image.

HTML

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>

      <rect width="100" height="50"/>
    </svg>

CSS

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

Is there a way to apply this directly to an .svg image that I have downloaded?

Answer 1

For example, I took a black and white icon

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      
      <path id="icon" d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46
	s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194
	C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008
	c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006
	c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003
	c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019
	c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999
	s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984
	C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427
	c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003
	C42,36.923,42,36.736,41.605,36.414z">
	  </path>
    </svg>

And applied your gradient to it

#icon {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>

      <path id="icon" d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46
	s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194
	C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008
	c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006
	c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003
	c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019
	c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999
	s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984
	C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427
	c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003
	C42,36.923,42,36.736,41.605,36.414z">
	  </path>
    </svg>

If I understand your question correctly, you would like to apply a gradient directly inside the SVG file.
But the first way to apply a gradient from an external style sheet is more preferable.

Below is the code for how to apply the gradient inside the svg file:

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>

      <path id="icon" style="fill:url(#MyGradient);" d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46
	s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194
	C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008
	c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006
	c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003
	c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019
	c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999
	s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984
	C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427
	c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003
	C42,36.923,42,36.736,41.605,36.414z">
	  </path>
    </svg>

Additions for questions in the comments

If your SVG image has several basic shapes: lines, rectangles, circles, patches, then wrap them all together with a group tag <g>and apply your gradient to it.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100" height="50" version="1.1">
<defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
</defs>
<g style="fill:none;stroke-width:2; stroke:url(#MyGradient); " >
 
<path d="M28 41.9c0 0 0 0 0 0.1C28 44.2 26.2 46 24 46s-4-1.8-4-4c0 0 0 0 0-0.1C7.3 41.6 4 39.5 4 37c0-0.8 0.3-1.5 1.2-2.2C11.2 28.1 13 30 13 20c0-6.6 0.3-12.7 8.3-13.8C21.1 5.8 21 5.4 21 5c0-1.7 1.3-3 3-3s3 1.3 3 3c0 0.4-0.1 0.8-0.2 1.2C34.7 7.3 35 13.4 35 20c0 10 1.8 8.1 7.9 14.9C43.7 35.5 44 36.2 44 37 44 39.5 40.6 41.6 28 41.9zM24 44c1.1 0 2-0.9 2-2 0 0 0 0 0 0 -0.7 0-1.3 0-2 0s-1.3 0-2 0c0 0 0 0 0 0C22 43.1 22.9 44 24 44zM24 4c-0.6 0-1 0.4-1 1s0.4 1 1 1 1-0.4 1-1S24.6 4 24 4zM41.6 36.4c0 0-1.5-1.7-4-4C34.2 29.3 33 27.9 33 20c0-7.7-0.4-12-9-12s-9 4.3-9 12c0 7.8-1.2 9.3-4.6 12.4 -2.4 2.2-4 3.9-4 3.9C6 36.7 6 36.9 6 37c0 0.1 0.2 3 18 3s18-2.9 18-3C42 36.9 42 36.7 41.6 36.4z" />
<path d="M7.8 8.3 41.5 45.4v0" />
<rect width="19" height="16.1" x="51.5" y="6.8" />
<ellipse cx="86.2" cy="34.4" rx="7.7" ry="7.8" /> 
</g>
</svg>