1

I have a logo that is made simply by mixing two different fonts with custom settings (the image in the center is actually big G in Webdings):

logo

I want to export my logo as an svg (paths). Unfortunately when I just try to export it as SVG in Photoshop I get something like this instead of paths:

<svg xmlns="http://www.w3.org/2000/svg" width="396" height="124" viewBox="0 0 396 124">
  <defs>
    <style>
      .cls-1 {
        font-size: 125px;
        font-family: "Playfair Display";
      }

      .cls-2 {
        font-family: Webdings;
      }
    </style>
  </defs>
  <text id="fisGfix" class="cls-1" x="-2.745" y="118.162">fis<tspan class="cls-2">G</tspan>fix</text>
</svg>

And if I try to export smart object as svg it's even worse:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="396" height="124" viewBox="0 0 396 124">
  <image id="fisGfix" width="396" height="124" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYwAAAB8CAYAAAB63IfnAAAQKElEQVR4nO2d/3XjNhLHuff2f7MDKxWsrgI7FayuglUqiFJB5AqiVBBtBadUELmCkys4uQO5At9TbpjjYfljAA5AUPx83sPb9a4sQSQ4X2AwmPlQ5MWyKIqyKIpH6dVCWhOnoigu0q5/P0sDgGlTPfcaO1B/7o81ewARGFswrgNiJULxYPB+bzJYrgPnwMABmASPtWZhB648ix2oGhgwhmBcB8VahOKu43XPPauGatbRNcBeRTh2rD4AsuI6SdwY2oFlx/u81ewAk8iJsJab/t7SznJDlwFf5ypCe1mOtr3/vmNZCwBpWIvR7rMDjwG9WcrvdtmBY6CNmT0pB0iXUBwDB4dL2TMQq7ax/XoAoOBRMWFcG1zIUlYTfXZgx03Li4WIQdsNuxgNkEJmDF2ziqbVBgDEp8+AXwwncdpJY32yWjIGxmfdY8BPxu4hn0HCDAMgDY8KO2DpHuqaoDJ5zJRdzw06GKv6NmCQVM3CFQYA37LuefZOxnag7/O62or7Nw57xSCxpssvyuwCID0aO2DtCtLsW3RNYiExfYPkHGGQLAYMkndCbQHM6bMDl0jRikPswDvDIC19gySW++eRgQKQDRq3UAz3z9LADhBqmwjNIIm1wYxgAOSB5lmMdeLawg4gGAlYKMJZLxFD14bOLC5ZXU2AaVIqw9pjHpxl4jgBNGFs28hfw+f8hdvY7AIYjmbDOXaASUhofdVIF5IAbRhb7HQcmv2TtkY4HcAwtO6g2CHsmwF2gOwPCdCEs6ZQbu1y2G1ksAQYjsbLkCIasQwMsSdSMgHa1UUq5V55DpJYoX0Ac0K7ukiVVcE3RdCFze40aJU85c1YKQeLdToCgLmiPSyX0vWrFQ3EIhE+kUmpKTvSnJ9lA55kY1BnwZgIwufQbOrrW8qz3mQHLtiBtGg3mcfeI6hX8WImAXUW4i6tR9YcxNWKIdGh3WQee49giR0YF607ijxNkBNNIlEZNHcminj0ow1jJbhkxvi4o2KfvwDoo0sk3OqOqxZ3JuLxLaWHHaCMwIzxiXXmjAOMgY9ItIF4dOMTlcjEccb4pBCm1gSkok0kTgPqxFcgHt/iU4PGqqomTBCfgzEIBsSkSyQ2kc7ZLEWA3OdgbuLhU9kOOzBjtIPkfe4XCqIwhki0MWfx8Dkch2DMFN/MsAAW5CQSbcxNPHzsAIIxU3xzzgOEMgWRaOPWxQM7ACp8s0EC+DBlkWjjFsUDwQAVPpERDBTQ0CYSxwmLRBu3Ih6+iT5hpiAYYEFlOF2RmFOkUZtQHiYglNgBUOEzUKhgBXUIR21naq44BGPGfIz01XOtlb2QVkVujHUKdSFL+6X8/frnXcPrXsXInsRNc/S8tvUH9rvEieCWIgbX73nf8prP0n5L2K+p8Kkoil+kvcjhwQMFf0zIxQ5Mjo/yYGtmeD4znXKkcDr3u1Q/l/IA1nlO3LdSDOimw4C63Et7KIriR/m/32vGowv3+qeqerbtEQnwp0k8rHM0LZTPuO+KJwc7UH03aztQv2aXgZ6VJjt8Dnxum+6lbxLI+n37v374nNq8pZYqi2ZXbv56u0if9vL6rfzclhX03JOvy62KCNCFr6vpVtoQO9B3zS49z3BfC135WN/Lv/oRyyUF/2UpK4Gu2fZXEYm+gbuS9kV+vr7nP2WGtG6YieSU/HFNSdxgjqQInyx34h24GT4qjVUhD73WzfAaqR5GKUa4zeefE+se3/yrvEZrDA7StuKO+Cz//lDbIK2u+bL2/1feRr4u61t7cBKTQjC0n/HoeS+fAvuj6cfYduBYK9Bk2Y/ngROF6veq/VHXDaflTWzOX/344NkJ7UB5TuC7XImRDDVEMfvYJxYv8tlDggPWIhz1gVoJ9cb59xT3o4tq7PxEBJ2atawmnzLblL325WeP1/vYmBCW0qfPgb9v9WxspB9DhOOrvI910FAp7+vahTbexLbshvTFZ68j5RLa9wR67D725dyyLD6vLXg/tkujGjvkFdJT+aFzi+DJNazW3bMbww5on8exnlFN/05d7uO/JehkbK4q+GtG/elzxe0MZ9knMcJju5wAxmYvK9gxOQ2YFKWIYjz12KevIiqtfbkFwShk1pOD0Vwr/IXWezvV/gXA3NmJW3ZMrs/jDwGfv0p0gLXNxfRVU+zqVgTjEmmT3Zc+98FLpJnEXs5nAMydHGqIhzyPd4lsWJM7XCUWxQ0JRqE4yBabpSKKLKafcjMB19QfM4vxH9J8Npbhf4xtByrWAaudz5HD4ZsOVD/7lNG9JcEYe2NXc9Fjpkw5ZzK7AhiTcyYTp0tgPfN9RNeUGyX14itQtyQYxcj+S6vIpyHkKhiPTnjlB6dZpWl5ct73e6P3LUbo87P8TJ4jf3IJ3T4GBOTEck2Vzl7nmwia1yT21gRjzMRsmvMgsU87X8QfCQB5sA10TVkHsrhnRLYhwnprgpE7KVYhOWz+A4xJTtmyL4H7ElvDCeZjLXlpIRvyQd4IBCMtnxKsMo4ZhBYCjElu2QROASlSrFxTpfM+r4F7K3+CYKQnhU+aZHUAebGVTWYfHgxcUzsnetN736IOgpGeLwlcU7mEFjbBqfRuci0+BsNZB4z/XwbYi3Utu3Uhq5xBk0kEYxwOkU915rzCiOkuuAVjS3LG2+UU6GEIcU0tnH2KFwvvBoJhh89y816MeizRuMx0HyOWsW2aFeL2gxB2ASHZnwKM/aEWFfVmdSAQwbDD11h9iiwazFTtjDrXEiwJcU397OGa2jo57ZoKrAWBYNgRsm/wSYxRjD2NnfgsnyYQajtng8xKZX6cAzezNafAH520Ml8t9zQRDDsOgRu6lXvK+qDOsVYbPAfB6BJFNnq/hZK2t01IgsI+15QbQvtibVcQDFtCU3PcSTRETBfV2Nzq94qFthwyTJcQ19SPHTU39pYhtE0gGLbsBoaNPgxYrgLAtLBMULh2ytRGKYeMYNgSOgDq1FcbuCUAbptDQP63e8eb4YbQPsdKRIpg2BMyAJq4rjb+TbZSgJtnExAG/6UWKhslhLYJBCMOm4A0AG38LG6q0FrBAJA3Q1xTOyeEdhUziATBiMNFDLyVaNxLtbodm8cAN0lo7Yx6FtpfY4dpIxjxsBaNQgbHidUGwE0SkqCwwjyEtgkEIy6VaPjGW3dRrTZilnKMCaem+yE9/TwZEjSTJLISwYhPVUDFNx9+H18mutqIeUgvpRjFrO44ZuVIGJeQ2hlFquAYBCMdW6nXbJneu763Ac1iZHG9mww4Rh1iMVbtjF4QjLRUZyssXVRFbW9jiIvq2rf3iO2Pjs/OfdUx1moi5v14J2Q7a1YBk51t7Fo7CEZ6KhfVP4xXG5/E+KSoG27NnPc1WKlAE+cAQbcq69oKgjEehwirjeuA+ZfBaXMAGJ9UtTPUIBjjUq02vjeOjPkN0QCYPGWgm9mndoYXCEYeHOUGW0ZSIRoA08Y9xe1DlLB7BCMfLrKU/LvhYb/fOOQHMEnWEjofShTXFIKRH1UFvp+MNsUPZL0FmBRLJ1T+age+M66dEQSCkS87GThDVxvRIycAwIyqat5d7Q1XEjVlVTsjGAQjb85GexsP7GcATAJ33+KpllDwEJCg8N7SNYVg2FE/EGW92WRxSpxDWgB5s3H2LX5veG63ARGVP1rVyEAw4hAjpO04MPvtfSarjKjpl28ErtH8WEqlzYrXlufVsqyrNwhGHGJlkT0NFI1olbgywPeA01DIugtWlOJuqtNVCCm0dsbgvUwEIw4x03NUKdNDDvp9Vrzm1rAw7E0z/pj5r2Be7MUDUPGDYtyGJCj8PHTSiGDEIXY+p0tgcrIi03MZMfMp5WzYLYtrwTTZOBO5r8qVwBDXVHCYPYIRhxTnHk6Bac3nJhg5wypl3rj7Fr5V80JqZwxyTSEYcQg9zu9LSMQEAIyPu2/xJisG30lE0toZCEY8Us3kfVcZnPoGGJ+Ds2+xHrDftg6sneFtCxCMeKSqS+FGV/SBYACMy1Zm+RW/BjzHdU6pamcgGDY0GeFUK4yz5+yCcFCA8XiU9OMVvvsWbYTUznjwFRoEw4YxBaPwFAE2WgHGoe28hRUhrimv2hkIRjzuMj0oh2AAjMPBSSr4ZBwhGFLWtfBxTSEYcclRMEg7AZAed9/iLTAsvo9dQNlnde2MWIKRasM3d1IJhjYVyVsGexhzPXPhA6vAYfjYnwfFa4aycvYtCpnVx7rPoa6pXjd6LMG4U7xmbGLle6pzlyjhn/bcx5BIDCtiCcYYRtaiwFUTOQcm+D43KZ6zHD6zjWWLyyfmsxgtQaGPYPjehDFWGT6zhZSH62Lis7keYwmcCzGNbJsYzTHizPe5HiOzQC6i1lQMqSK2a/gQ4Joyq51ROvUeNM0iVMyHZUAfrUTtsedzYl6LnfK79s1ojgHXjzbtFmIcLp7fOXW1xxBbFcN1XMqEou0zU6yCyoD7ZXI91gEfek68HN0G9NFqxt0nGJdIB+a0A0Lz+QjG/JqvYKwCrtElsR0IsVXWotYnFu8Ja9OE3rPgyXQpxj/kgUo1uwhVUitD3icY7zKAYlTi03xPzeC0EAwisNJhIXC+gtFnBNtaqr2zIbbKytugEYv3xBPqENsYZK+0X75PNGJemKF9tDDkGsGwFg3tZ2pXUQjGtEgtGPuBn3VIYAeGjOGzgWgsPW3RKcFeb4iLzrt/pcxKQ9W66WZsjN0yCxnwIerptktoMi6hyXgfpDXdhKHXYan83j4uNwRjWlg8l32CYW0HqufM0kha9jHUDpSBLvGq7SPtozwaTPira/Kn2H+Qi7OWm1jKz/f9fQmmfhbgKDe6z3WVso+v0qeL9HOvCAXdOnHWv9cGwKohUqI6tLMLTGfsxnS7vIlA+7gEjwEx6a/OZ2juJdjgGvu+MdHEk/M+lbFcyHMWM5KwbgdOtWetizHsQCHPRtXqrOX5tqxk+Syfe1baHpe1tBjX5s9cVVrXRqymmZWO2UdNWKA7u3BnUIuWGfylNrvoWq4vRAA0s6hj4AomZIXBiiIfQsa2KzrYAf21KhIEioSEJEft00fPzmizIcZepXSh7WOsE56vDfH5Z7n5a1lVVKuN659fpBXOrKZiqTwI+SyDGiMOsZmCHXhRrt5TnPTOkSZb03tdPopx+772b+fI6RsWzgxYc1NT9tHtn+/hrK7X72Vfo1o2ukv+e88H7FXeb0/acjCg/oxdIo+p3O1A6XgKmj5nU4vMsujHUNtT71OFxQTyr2vxweDN4P9vtM/gWcjKYymta0ZW+XzP8ufR+IHW7GG4uftjGxXQ47ov/lD8pruHAQCgQuP7xN01HUL98gCtkN4cAABU+G56w7xZMCsFmC8IBvhwHxjvDwA3AC4pAABQgWAAAIAKBAMAAFQgGAAAoALBAAAAFQgGAACoQDAAAEAFggEAACoQDAAAUIFgAACACgQDAABUIBgAAKACwQAAABUIBgAAqEAwAABABYIBAAAqEAwAAFCBYAAAgAoEAwAAVHzgMoGwLIqi5GLMirM0gH6KovgPlvTIRRlnwXIAAAAASUVORK5CYII="/>
</svg>

I desperately need paths here because I need to animate the svg like this: https://medium.com/@anatacreative/handwriting-animation-with-svg-638931410cfa

How can I export the image in a form that will use paths? I'm on Mac and can't afford Illustrator, is it maybe doable online? Or should I use Inkscape?

Thanks a lot!

  • 1
    I'm not a photoshop user, but a frequent Inkscape user and suggest that if there is no other answer, Inkscape is a good choice. You can use Trace Bitmap to convert your work to vector to make things easier. – fred_dot_u Jul 17 at 23:40
3

Highlight the text layer... and choose Type > Convert to Shape from the menu. The live text will then be converted to a shape layer and be paths with no direct connection to the original font.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.