title: Changing the fill color of SVG image loaded by data-URL inside a stylesheet
body: <p>I want to have different colored images that are loaded inside of a stylesheet via url('data...') property. All images are embedded inside of the css-file. The only difference is the fill color that should be used. Here is my current code:</p>
  
  <pre><code>.icon.save {
    background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt;&lt;path fill="%23666666" d="M397.944 258.597l0 22.9362c0,7.22714 -5.91315,13.1403 -13.1403,13.1403l-292.742 0c-7.22714,0 -13.1403,-5.91315 -13.1403,-13.1403l0 -22.9362 319.022 0zm-354.98 -209.156l395.673 0c3.31637,0 6.02912,2.65813 6.02912,5.90747l0 403.401c0,3.24863 -2.71346,5.90747 -6.02912,5.90747l-86.1661 0 0 -20.4653 9.24335 0 0 6.27915 68.7657 0 0 -386.843 -32.536 0 0 184.33 -319.022 0 0 -184.33 -27.8006 0 0 370.473 16.4964 16.3701 42.2982 0 6.30256 -6.27915 5.25633 0 0 14.7884 -5.69823 5.67695 -54.0028 0 -24.8386 -24.6481 0 -384.66c0,-3.24934 2.71275,-5.90747 6.02877,-5.90747zm299.498 419.709l-210.978 0 0 -127.463c0,-7.78962 6.37313,-14.1628 14.1624,-14.1628l182.654 0c7.78927,0 14.1624,6.37313 14.1624,14.1628l0 127.463zm-177.925 -133.337l54.4986 0 0 113.007 -54.4986 0 0 -113.007z"/&gt;&lt;/svg&gt;');
  }
  
  .icon.save:hover, .icon.save.bright {
    background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt;&lt;path fill="white" d="M397.944 258.597l0 22.9362c0,7.22714 -5.91315,13.1403 -13.1403,13.1403l-292.742 0c-7.22714,0 -13.1403,-5.91315 -13.1403,-13.1403l0 -22.9362 319.022 0zm-354.98 -209.156l395.673 0c3.31637,0 6.02912,2.65813 6.02912,5.90747l0 403.401c0,3.24863 -2.71346,5.90747 -6.02912,5.90747l-86.1661 0 0 -20.4653 9.24335 0 0 6.27915 68.7657 0 0 -386.843 -32.536 0 0 184.33 -319.022 0 0 -184.33 -27.8006 0 0 370.473 16.4964 16.3701 42.2982 0 6.30256 -6.27915 5.25633 0 0 14.7884 -5.69823 5.67695 -54.0028 0 -24.8386 -24.6481 0 -384.66c0,-3.24934 2.71275,-5.90747 6.02877,-5.90747zm299.498 419.709l-210.978 0 0 -127.463c0,-7.78962 6.37313,-14.1628 14.1624,-14.1628l182.654 0c7.78927,0 14.1624,6.37313 14.1624,14.1628l0 127.463zm-177.925 -133.337l54.4986 0 0 113.007 -54.4986 0 0 -113.007z"/&gt;&lt;/svg&gt;');
  }
  </code></pre>
  
  <p>As you can see, the only difference is the fill="" attribute of the path. Is there any other way with any inline css code i might add?</p>