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,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"/>
</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
  • 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 '19 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.

1
  • You are a legend @Scott – Lunaticbrain Jul 18 '19 at 8:14
-1

In order to save it as SVG, you need 1 more step:

  1. Right-click on text layer -> Convert to Shape
  2. Right Click on text ( now shape ) layer -> Export As ( select SVG from the export menu ). And Done :)

Version: Adobe Photoshop 2020 for Mac

3
  • I'm not sure why the downvotes... it actually works. – Luciano Aug 6 '20 at 9:38
  • May be a version issue. I will edit the answer :) – Aslam Aug 6 '20 at 13:20
  • How is this different than the other answer supplied a year ago? – Scott Aug 6 '20 at 18:20

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.