CODEWITHSUNDEEP
svgpathtagsiconsphotoshop
Annie H.
Annie H.

Reputation: 267

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

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.

Upvotes: 6

Views: 35775

Answers (3)

Jerry Chong
Jerry Chong

Reputation: 9240

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.

Upvotes: 0

Miguel
Miguel

Reputation: 19

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

Upvotes: 1

Annie H.
Annie H.

Reputation: 267

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.

enter image description here

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.

Upvotes: 4

Related Questions