How to Convert Photoshop Text Into SVG [Quicktip]

By . Filed in photoshop

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).

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

Then, save the file in Photoshop EPS format.

Illustrator Stage

Open the EPS file in Adobe Illustrator. You should see that the text is now a 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).

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

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.

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement