Photoshop Question posted in
The official user guide can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search