Best way to convert icon image to svg with <path> tag

Question

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.

My question is - what is the best way to convert image to svg, so that it would contain tag, preferable with photoshop?

Basically, I want something like this:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"/>
<path d="M22.7 19l-9.1-9.4z"/>

And this is approximately what I get using photoshop:

<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">
              <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
            <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
               <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 width="34" height="48"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gT="/>
          </svg>

P.S. I tried several online decoders from base64, but didn't find them useful.

Fortis

You need to "trace" the bitmap image. You can either do that manually yourself, or use the trace tools that are built into most vector editors. Eg. Inkscape, Illustrator, etc).. – Aerology

It just seem to me to be very time consuming, when working with illustrators is not really a job of developer. Maybe I'm wrong? I was looking for some tools that can make this process fast or at least automate it. – Fortis

No you are correct. If you need art in vector format, then it should be the designer's job to provide it in that format. They should know the difference between bitmap and vector art, and which software they should be using to produce it. – Aerology

Answer 1

After all I found most useful this tool - vectormagic (editor's note: after going through the process, it asks you for $10 to download your result). It convert to svg fast and very precise, and you don't have to do a lot of customization. On the image, first icon is inkscape result and second is from vector magic.

Maybe I missed something in inkscape for the result to be this perfect. In that case please point it out. Anyway, vector magic saves a lot of time and I haven't found flaws with it..yet.

Fortis

heads up. it seems not free. – Ganger

That's not a free tool, try this one instead. – Impromptu

@Mohammadlm71, I tried this tool and it is very imprecise – Fortis

@Annie-h, So the best tool is CorelDraw, just install it then using PowerTrace feature you can convert every image to SVG path. – Impromptu

Answer 2

1.- Open your icon with Illustrator. 2.- Clic in file > export > export to screen. 3.- Select the svg extention and save. 3.- Open your svg file with a browser 4.- Clic in Inspect Element (or F12) That's all, in the elements tab is your svg code path

Zinnia

Answer 3

Can try following free tools (Alternative to vectormagic):

1. Adobe Express PNG To SVG Converter - https://www.adobe.com/express/feature/image/convert/png-to-svg
2. Convertio PNG To SVG Converter - https://convertio.co/png-svg/

Tried this previously, giving good results so far.

Thermonuclear