How to Convert Photoshop Text to SVG

With the advent of high-definition screens, web designers now have to make sure that the images they use are optimized for HD. Skipping this process may render websites blurry or pixelated, leaving a not so good impression on visitors. One of the best ways to deal with HD screens is to use Vector Graphic whenever possible.

Vector Graphic is scaleable at any size, so it will look great on an HD screen. In this post, we would like to share a quick tip on how to convert your Photoshop Text into SVG. If you have, for example, a text-based logo in your design, you’ll probably find this tip very useful.

Photoshop Stage

For this example, we will use a simple text-based logo created using the Pacifico font family (screenshot).

logo example

On the the Layers tab in Photoshop, right-click on the text layer and select Convert to Shape (screenshot).

convert to shape

Then, save the file in Photoshop EPS format.

save eps

Illustrator Stage

Open the EPS file in Adobe Illustrator. You should see that the text is now a vector object.

vector object

In this stage, you can make a few adjustments such as removing unnecessary layers, changing the background colors, or resizing. To resize the document in Illustrator, just go to File > Document Setup and select Edit Artboards.

You can use your mouse to resize the Artboard, or specify the size more accurately by filling in the Width (W) and the Height (H).

resize artboard

Next, save the file in SVG format, which is the default option. And that’s it.

save svg

Conclusion

The act of converting the font into Shape is to ensure compatibility across multiple computers – when you are working remotely, different fonts installed on different systems may cause the "Font missing" error. This may also happens with different versions of Adobe Illustrator or Photoshop. Turning text to SVG will help minimize or eliminate issues to do with compatibility.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail