Current Date: Mon, Mar 8, 2021 6:31 PM

How to create SVG from PNG or JPG in Photoshop

How to create SVG from PNG or JPG in Photoshop

A few years ago, Adobe decided to add the "Export as SVG"Into Photoshop. This means you can now export SVG images directly from Photoshop without the need for Illustrator. In this tutorial, Make tech will show you how to convert PNG or JPG images into SVG using Photoshop.

Raster and Vector

SVG or Scalable Vector Graphic, as the name implies, is a vector graphic. Other formats like PNG, GIF, JPG, BMP are raster graphics. The main difference between these two types is that vectors include standard lines (paths) that make them scalable, while raster includes hard pixel data, so it cannot be scaled. (When you resize the raster image, just extrapolate the existing pixel data. On the other hand, the vector will recalculate the calibration line into the target size.)

  • What are the different image formats JPG, JPEG, GIF, PNG and SVG?

But isn't this an article on how to create SVG from PNG? It also depends on the image. Of course, you cannot create an SVG from a snapshot or detailed image. But for simple images with low color and shape complexity like cartoons, icons, or flat designs like the smiley face below, it's entirely possible.

How to create SVG from PNG or JPG in Photoshop Model

You'll need to create standard lines from the image, fill it with color, and convert it to a shape before you can export it as an SVG.

How to create SVG from PNG or JPG in Photoshop

1. Open the image in Photoshop and use the tool Quick Selection to select all black areas.

How to create SVG from PNG or JPG in Photoshop Use the Quick Selection tool to select all black areas

2. Once selected, right-click and select "Make Work Path ...".

3. Then in the menu Layer, click "New Fill Layer" and"Solid Color".

How to create SVG from PNG or JPG in Photoshop Click on "New Fill Layer" and "Solid Color"

4. Choose black.

5. Now you will get a new layer with black area. But it's a vector shape layer.

How to create SVG from PNG or JPG in Photoshop You will get a new layer with black area

6. Repeat the same process with the yellow area of ​​the smiley face. You will have to do this for each color on your image.

How to create SVG from PNG or JPG in Photoshop Repeat the same process with the yellow area of ​​the smiley face

7. When you have a shape layer for each color, select File> Export> Export As…

8. In the top right drop-down menu, select SVG format (Format). Then check the preview image, if everything is ok click Export All.

How to create SVG from PNG or JPG in Photoshop Click Export All

It's done! You now have the SVG version of the PNG image, which is expandable and with a much smaller file size.

See more:

  • How to create a 7-color text effect in Photoshop