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

How do I convert svg code to svg path image? – Photoshop

How would I be able to convert this type of svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" viewBox="0 0 250 250">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c145 79.163499, 2018/08/13-16:40:22        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/"
            xmlns:xmp="http://ns.adobe.com/xap/1.0/"
            xmlns:xmpRights="http://ns.adobe.com/xap/1.0/rights/">
        <xmpRights:Marked>True</xmpRights:Marked>
      </rdf:Description>
   </rdf:RDF>
</x:xmpmeta>

<?xpacket end="w"?></metadata>
 <image id="N_side_slit" data-name="N side slit" x="21" y="44" width="178" height="148" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAALIAAACUCAYAAAA3f3NDAAADx0lEQVR4nO3a3Y3rNhCA0dm9eUtTaSA9pIX0ky5SQFJCmslj4GCBXcAw1j+SSHGGPN+zJdP0sSCTertcLpeo2VvRcc/eEE/vhUFU/QGqQ++fp4RZpXu/GjzMKtv7zcBhVsluIQfMqth3kANmVese5IBZlXoEOWBWlZ5BDphVoVcgB8zK3quQA2ZlbgvkgFlZ2wo5YFbG9kAOmJWtvZDjE/M/BXHAPGFHIH/0e0T8C7NGdxTy3xHxK8wa3VHIAbMy1AJywKzRtYIcMGtkLSEHzBpVa8gBs0bUA3LArLPrBTlg1pn1hBww66x6Qw6YdUZnQA6Y1buzIAfM6tmZkANm9epsyAGzejQCcsCs1o2CHDCrZSMhB8xq1WjIAbNalAFywKyjZYEcMOtImSAHzNpbNsgBs/aUEXLArK1lhRwwa0uZIQfMerXskANmvVIFyAGznjUS8m8bXw+z7jYS8h8wq1UjIf+AWa0afY8Ms5qU4c8ezDpcllULmHWoTMtvMGt32daRYdauMm6IwKzNZd3Zg1mbyrxFDbNeLvuzFjDrpSo8NASznlbl6TeY9bAqkANmPaoS5IBZ96oGOWDWd1WEHDDrtqqQA2ZdVxlywKyvqkMOmBWTQA6YNQvkgHntZoIcMK/bbJAD5jWbEXLAvF6zQg6Y12pmyAHzOs0OOWBeoxUgB8zz93a5DPu8I974v4j4acdxv0TEnxHx88ecdRhXz84e7xBQq1yRv/qx8zhX5uStBvlIMCcO5G3BnDSQtwdzwkDeF8zJAnl/MCcK5GNdY67WVJhXW0eOTuuqH+vMf3U47xm1no8h3yvIbat6lWs5JzZEJqjart9X5W8zQG4fzAMCuU8wnxzI/YL5xEDuG8wnBXL/YD4hkM8J5s6BfF4wdwzkc4O5UyCfH8wdAnlMMDcO5HHB3DCQxwZzo0AeH8wNAjlHMB8M5DzBfCCQcwXzzkDOF8w7AjlnMG8M5LxVxTwkkHMH84uBnD+YXwjkGsH8JJDrBPODQK4VzHcCuV4wfxPINYP5JpDrBvNVINcO5s9Art/ymAPkaVoeM8jztDRmkOdqWcwgz9eSmEGes+UwgzxvS2EGee6WwQzy/C2BGeQ1mh4zyOs0NWaQ12pazCCv15SYQV6z6TCDvG5TYQZ57abBDLKmwAyyYgbMIOur0phB1nVlMYOs20piBlnfVQ4zyLpXKcwg61FlMIOsZ5XADLJeKT1mkPVqqTGDrC2lxQyytpYSM8jaUzrMIGtvqTCDrCOlwQyyjpYCM8hq0XDMIKtV4zBHxP/bUFzI1KMfEAAAAABJRU5ErkJggg=="/>
</svg>

To a type of svg that has a path and is usable in html like this:

<svg width="36px" height="24px" viewBox="0 0 36 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path d="M8.98885921,23.8523026 C8.8942483,23.9435442 8.76801031,24 8.62933774,24 L2.03198365,24 C1.73814918,24 1.5,23.7482301 1.5,23.4380086 C1.5,23.2831829 1.55946972,23.1428989 1.65570253,23.0416777 L13.2166154,12.4291351 C13.3325814,12.3262031 13.4061076,12.1719477 13.4061076,11.999444 C13.4061076,11.8363496 13.3401502,11.6897927 13.2352673,11.587431 L1.68841087,0.990000249 C1.57298556,0.88706828 1.5,0.733668282 1.5,0.561734827 C1.5,0.251798399 1.73814918,2.85130108e-05 2.03198365,2.85130108e-05 L8.62933774,2.85130108e-05 C8.76855094,2.85130108e-05 8.89532956,0.0561991444 8.98994048,0.148296169 L21.4358709,11.5757407 C21.548593,11.6783875 21.6196864,11.8297916 21.6196864,11.999444 C21.6196864,12.1693815 21.5483227,12.3219261 21.4350599,12.4251432 L8.98885921,23.8523026 Z M26.5774333,23.8384453 L20.1765996,17.9616286 C20.060093,17.8578413 19.9865669,17.703871 19.9865669,17.5310822 C19.9865669,17.3859509 20.0390083,17.2536506 20.1246988,17.153855 L23.4190508,14.1291948 C23.5163648,14.0165684 23.6569296,13.945571 23.8131728,13.945571 C23.9602252,13.945571 24.0929508,14.0082997 24.1894539,14.1092357 L33.861933,22.9913237 C33.9892522,23.0939706 34.0714286,23.2559245 34.0714286,23.4381226 C34.0714286,23.748059 33.8332794,23.9998289 33.5394449,23.9998289 L26.9504707,23.9998289 C26.8053105,23.9998289 26.6733958,23.9382408 26.5774333,23.8384453 Z M26.5774333,0.161098511 C26.6733958,0.0615881034 26.8053105,0 26.9504707,0 L33.5394449,0 C33.8332794,0 34.0714286,0.251769886 34.0714286,0.561706314 C34.0714286,0.743904453 33.9892522,0.905573224 33.861933,1.00822006 L24.1894539,9.89030807 C24.0929508,9.99152926 23.9602252,10.0542579 23.8131728,10.0542579 C23.6569296,10.0542579 23.5163648,9.98354562 23.4190508,9.87063409 L20.1246988,6.8459739 C20.0390083,6.74617837 19.9865669,6.613878 19.9865669,6.46874677 C19.9865669,6.29624305 20.060093,6.14198767 20.1765996,6.03848544 L26.5774333,0.161098511 Z" fill="#FFFFFF"></path>
</svg>

(These are 2 different images)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After 2-3 hours of messing with every possible online program. I downloaded Inkscape and tried to make a svg. It took another 2 hours because it was showing 0 path every time I was trying to make a svg. Then I found out it didn't detect the shape because it was white.

    So I had to go back to photoshop, change the colour to black, save as a PNG then open it on Inkscape then re-path it. Took me way to long to figure this out.

    You will need a thirdparty program to make svgs, there is no escaping them. I tried.

    Thank you Paul for the suggestion.


  2. 0

    You’ll need to load the first one into a vector editor (eg Inkscape) and use the editor’s drawing tools to manually recreate the shape(s).

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

Back To Top
Search