2

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, 2019 at 23:40

3 Answers 3

4

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.

2
  • You are a legend @Scott Jul 18, 2019 at 8:14
  • Use caution with the faux font features that you want to convert to a shape. However, I was able to go from PS to Illustrator as shapes and recolor them, then saved the file as an AI file, and opened it up in CorelDraw. It was as if I had made in CorelDraw to begin with. Thanks!
    – nocturns2
    Sep 20, 2022 at 21:15
0

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, 2020 at 9:38
  • May be a version issue. I will edit the answer :)
    – Aslam
    Aug 6, 2020 at 13:20
  • How is this different than the other answer supplied a year ago?
    – Scott
    Aug 6, 2020 at 18:20
0

The export as SVG is deprecated since the release of Photoshop 22.5.

You can reactivate the SVG option by the following steps, which can be found in the Adobe documentation:

If you still want to export your Photoshop document as SVG, you can follow any of these workarounds:

Navigate to Preferences > Export and enable Use Legacy "Export As". Quit and relaunch Photoshop.

Futher information can be found here:
https://helpx.adobe.com/photoshop/using/export-artboards-layers.html#discontinue-export-as-svg

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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