How To Make SVG Files In Photoshop

Spread the love

A few years ago, Adobe added the “Export as SVG” feature to Photoshop for users to know how to make SVG files in Photoshop. This means that you can now export the SVG image directly from Photoshop without using Illustrator. In this article, we’ll show you how to make SVG files in Photoshop using a PNG or JPG image.

Table of Contents

Raster vs Vector

SVG (Scalable Vector Graphic), as the name implies, is a vector graphic. Some formats like PNG, GIF, JPG, BMP are raster images. The only difference between these two is that vectors are composed of paths that make them scalable while rasters are made up of rigid pixel data which makes them unscalable. Since we are resizing raster images, we are simply extrapolating the current pixel data we have. While Vector recalculates the path to the target size.

However, this article is about creating SVG from PNG, but it depends on the image. Yes, we cannot make an SVG from a photographic or detailed image. But for simple images with low color and shape complexity, such as cartoons, icons or flat designs such as smiley images are possible.

We will need to create paths from the image, fill it with color and convert it to a shape before we can export it to SVG.

Let’s start!

Open the image in Photoshop and use a quick selection tool to select the entire black area
Once selected, right-click and click on “Make a selection…”
Then in the Layer menu click on “New Fill Layer” and “Solid Color”
Select the first color
Now you have a new layer with the first area. But it is a shape layer that is a vector.
Repeat the same procedure with the second part of the image. You must do this for each color in your image
Once you have the shape layer for each color, select File > Export > Export As…
Select SVG as the format from the drop-down menu at the top right. Then check the preview image if everything is OK and click Export All.

Photoshop SVG Plug-in

Photoshop SVG Exporter is a Photoshop Plug-in / Extension which enables designers to export their design as SVG vector images. One can convert Photoshop PSD documents to SVG with a simple click. Click here to download the plug-in.