fill color svg created with PhotoShop

olefrank
December 7, 2017
153 views
2 votes
3 Answers

I got this icon that was created in photoshop and saved in svg format.

How can I change the color fill?

— EDIT —

I made this JS bin: https://jsbin.com/kazujoq/

SO seems to cut out this code: xlink:href=”data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC”.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="65" viewBox="0 0 99 65">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140 79.160451, 2017/05/06-01:08:21        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>


<?xpacket end="w"?></metadata>
<image id="Vector_Smart_Object" data-name="Vector Smart Object" x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC"/>
</svg>

Tags: css svg

Answers

As others have said, if you use Illustrator to export the SVG code can then have control over its style. For instance, using fill to alter the color.

Here’s an example in JSFiddle – https://jsfiddle.net/ks1k2us6/2/

HTML –

<div class="wrapper">
  <div class="icon">

    <?xml version="1.0" encoding="utf-8"?>
      <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <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" width="80px" height="70px" viewBox="0 0 1190.549 841.891" enable-background="new 0 0 1190.549 841.891" xml:space="preserve">
        <g>
          <g>
            <path d="M356.739,473.29c-38.684,0-70.158,31.473-70.158,70.158c0,38.685,31.473,70.158,70.158,70.158
            c38.685,0,70.158-31.473,70.158-70.158C426.897,504.764,395.425,473.29,356.739,473.29z M356.739,585.543
            c-23.208,0-42.095-18.887-42.095-42.095s18.887-42.095,42.095-42.095s42.095,18.887,42.095,42.095
            S379.947,585.543,356.739,585.543z" />
          </g>
        </g>
        <g>
          <g>
            <path d="M1002.189,473.29v-84.188c0-6.033-3.859-11.408-9.598-13.316l-79.166-26.393
            c-29.816-50.498-70.803-98.557-161.376-114.426c-0.168-0.028-0.337-0.056-0.505-0.084
            c-167.271-23.124-292.852,14.606-373.477,112.182c-60.013,0.87-121.275,13.414-157.308,36.482
            c-18.661,11.954-29.732,32.763-30.771,54.905l-1.628,34.84c-7.744,0-14.031,6.286-14.031,14.031v56.125
            c0,7.745,6.287,14.031,14.031,14.031h56.126c7.787,0,14.018-6.398,14.03-14.186c0-0.071,0.016-0.14,0.016-0.226
            c0.21-54.063,44.087-97.842,98.206-97.842c54.246,0,98.22,43.975,98.22,98.22c-1.009,8.518,5.711,14.031,14.031,14.031h252.567
            c7.787,0,14.018-6.397,14.03-14.186c0-0.07,0.014-0.14,0.014-0.226c0.21-54.063,44.087-97.842,98.207-97.842
            c54.245,0,98.22,43.975,98.22,98.221c-1.01,8.518,5.711,14.03,14.031,14.03h56.125c7.744,0,14.031-6.286,14.031-14.03v-56.126
            C1016.22,479.576,1009.934,473.29,1002.189,473.29z M623.338,339.992c0,3.872-3.143,7.017-7.017,7.017H433.337
            c-6.481,0-9.429-7.971-4.645-12.334c48.689-44.382,110.609-69.766,186.914-76.514c4.11-0.365,7.731,2.946,7.731,7.072V339.992z
             M791.912,340.062c-0.043,3.844-3.172,6.945-7.017,6.945H658.416c-3.872,0-7.016-3.143-7.016-7.017v-76.612
            c0-3.887,3.101-7.085,6.973-7.085c27.979-0.028,57.586,2.006,89.059,6.357c14.986,2.638,28.343,6.258,40.494,10.706
            c2.792,1.024,4.574,3.733,4.547,6.708L791.912,340.062z M865.143,347.007h-38.151c-3.9,0-7.057-3.186-7.016-7.086l0.364-38.024
            c0.057-5.794,6.665-8.938,11.338-5.515c15.169,11.084,27.782,24.289,39.021,39.275
            C874.206,340.327,870.979,347.007,865.143,347.007z" />
          </g>
        </g>
        <g>
          <g>
            <path d="M833.811,473.29c-38.685,0-70.158,31.473-70.158,70.158c0,38.685,31.473,70.158,70.158,70.158
            c38.684,0,70.158-31.473,70.158-70.158C903.967,504.764,872.494,473.29,833.811,473.29z M833.811,585.543
            c-23.208,0-42.095-18.887-42.095-42.095s18.887-42.095,42.095-42.095s42.095,18.887,42.095,42.095
            S857.019,585.543,833.811,585.543z" />
          </g>
        </g>
      </svg>


  </div>
  <h1>Cars</h1>
</div>

CSS –

.wrapper {
  display: flex;
}

svg {
  fill: green;
}

The bitmap converted to svg can not be stylized using the usual methods: fill: orange;
But you can change its color entirely using SVG filters

Browser support SVG filter

To fill the color I will use filter primitive feColorMatrix

This filter applies a matrix transformation:

The theory looks frightening, but in reality it is quite easy to use filters in practice.

To fill in red, I will use the following matrix:

    <filter id="RedFilter" x="-20" y="-20" width="150" height="150">
            <feColorMatrix in="SourceGraphic" type="matrix"
                    values="0 0 0 1 0
                            0 0 0 0 0
                            0 0 0 0 0
                            0 0 0 1 0
                    "/> 
   </filter>

"1" is in the first line, which is responsible for the red color, in the fourth line – the alpha channel responsible for transparency.

Below is the full code of filling in red:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="65" viewBox="0 0 99 65"
> 

  <defs>
 <filter id="RedFilter" x="-20" y="-20" width="150" height="150">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter>
 


   <image   id="Vector_Smart_Object"   x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC" /> 
   </defs> 
   <use xlink:href="#Vector_Smart_Object" filter="url(#RedFilter)" ></use>
   
   
</svg>

For filling with other colors, minor changes in the matrix will be required. The green color is “1” in the second line, the rest of the line, except for the alpha channel is zeros.

In the example below, the <use> command is used, which makes it possible to color the clones in different colors by applying a filter with different matrix formulas to them.

             <use xlink:href="#Vector_Smart_Object" x="0" y="0"  filter="url(#RedFilter)" ></use> 
             <use xlink:href="#Vector_Smart_Object" x="100" y="0" filter="url(#GreenFilter)" ></use> 
             <use xlink:href="#Vector_Smart_Object" x="200" y="0" filter="url(#BlueFilter)" ></use>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="65" viewBox="0 0 400 65"
> 

  <defs>
 <filter id="RedFilter" x="-20" y="-20" width="150" height="150">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter> 
	<filter id="GreenFilter" x="-20" y="-20" width="150" height="150">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 0
                        0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter> 
	
	<filter id="BlueFilter" x="-20" y="-20" width="150" height="150">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                        0 0 0 1 0
                "/>
    </filter>
 


   <image   id="Vector_Smart_Object"   x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC" /> 
   </defs> 
   <use xlink:href="#Vector_Smart_Object" x="0" y="0"  filter="url(#RedFilter)" ></use> 
   <use xlink:href="#Vector_Smart_Object" x="100" y="0" filter="url(#GreenFilter)" ></use> 
    <use xlink:href="#Vector_Smart_Object" x="200" y="0" filter="url(#BlueFilter)" ></use>
   
   
</svg>

- huntrvro
- November 4, 2018 at 10:57 pm
- 0 votes
0
Make a shape of the icon if you haven’t already. Then, instead of exporting the SVG file via “Export As..” in the File menu, right click on the shape layer, and click “Copy SVG”. Paste this into a blank document and save it as a .svg file. It will have a fill property.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.