title: Best way to convert icon image to svg with <path> tag
body: <p>I'm learning to work with svg icons and now trying to directly extract icons from psd. With adobe photoshop 2017 it's possible to export image as svg code. However in this code instead of  tag is generated  tag (as I understand this is base64 encoding?!). Because of that I can't modify icons, for example, give them different color (fill) etc. </p>
  
  <p>My question is - what is the best way to convert image to svg, so that it would contain  tag, preferable with photoshop?</p>
  
  <p>Basically, I want something like this:</p>
  
  <pre><code>&lt;svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"/&gt;
  &lt;path d="M22.7 19l-9.1-9.4z"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>And this is approximately what I get using photoshop:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="48" viewBox="0 0 34 48"&gt;
                &lt;metadata&gt;&lt;?xpacket begin="﻿" id="W5M0MpCehiHzreSzNTczkc9d"?&gt;
              &lt;x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        "&gt;
                 &lt;rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"&gt;
                    &lt;rdf:Description rdf:about=""/&gt;
                 &lt;/rdf:RDF&gt;
              &lt;/x:xmpmeta&gt;                          
              &lt;?xpacket end="w"?&gt;&lt;/metadata&gt;
              &lt;image width="34" height="48"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gT="/&gt;
            &lt;/svg&gt;
  </code></pre>
  
  <p>P.S. I tried several online decoders from base64, but didn't find them useful. </p>