photoshop-svg-from-png-8
Others

How to Create SVG from PNG or JPG in Photoshop

Couple years ago, Adobe decided to add “Export as SVG” feature to Photoshop. Which means you can now export SVG image directly from Photoshop without the need of Illustrator. In this tutorial, we’ll show you how to turn PNG or JPG image into SVG with Photoshop. Let’s check it out!

Raster VS Vector

SVG or Scalable Vector Graphic is, like the name said, a vector graphic. Other format like PNG, GIF, JPG, BMP are raster graphic. The main difference between these two is vectors are composed of paths which make them scalable while rasters are composed of hard pixel data, thus unable to scale. (When we resize the raster image, we simply extrapolate the current pixel data we have. Vector, on the other hand, recalculate the path into the target size)

But isn’t this article about creating SVG from PNG? Well, it depends on the image. Of course, we can’t create an SVG from photographic or detailed image. But for simple image with low color and shape complexity such as cartoon, icon or flat design like smiley image below are possible.

photoshop-svg-from-png

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

Let’s Start!

1) Open the image in Photoshop and use quick selection tool to select all the black area

photoshop-svg-from-png-1

2) Once selected, right click and select “Make Work Path…

photoshop-svg-from-png-2

3) Then, in the Layer Menu, click “New Fill Layer” and “Solid Color

photoshop-svg-from-png-3

4) Select the black color

photoshop-svg-from-png-4

5) Now you’ll get a new layer with the black area. But it’s a shape layer which is vector.

photoshop-svg-from-png-5

6) Repeat the same process with the yellow area of the smiley. You’ll have to do this for each color on your image

photoshop-svg-from-png-6

7) Once you have the shape layer for each color, select File > Export > Export As…

photoshop-svg-from-png-7

8) On the top right dropdown, select SVG as Format. Then check the preview image if everything is OK and click Export All

photoshop-svg-from-png-8

And that’s it! You’ll now have the SVG version of your PNG image which is scalable and has much smaller file size.

Written By

Leave a Reply

Your email address will not be published. Required fields are marked *