Hello! While this has probably been written about before, it’s a common issue I encounter when working with assets on websites– so I thought: what the heck, I’ll write a quick tutorial…


What is an SVG? Why do we care?

For the sake of keeping this post brief & to the point, all you need to know moving forward is that Raster image formats (such as JPG and PNG) are created with a set amount of colored pixels. If you have seen an image on the web that is blurry, it is because this image format is sized beyond it’s resolution and those square colored pixels that compose the image are now visible.

SVG does not have this resizing issue because it renders graphics in a fundamentally different way- using code to describe shapes and paths! whaattt? crazy! Learn more here.


In this tutorial, we will take a raster JPG image and convert it to an SVG using Photoshop.

NOTE: This method works best on images that have easily separated colors and good contrast. (For example: icons, simple line drawings, logos, text, .etc.)

Here is the raster graphic we will use for this example. I doodled it in about 5 seconds in Photoshop using the brush tool. screenshot

1. Open the image in Photoshop. On the top toolbar, go to: Select > Color Range

You can use the eyedropper tool to isolate a single color in your image and tweak the Fuzziness slider until the preview is your desired selection.

screenshot

2. Right click and select Make Work Path. A dialog will appear asking about Tolerance.

screenshot

Question: What is a work path?

Answer: A work path is a vector shape made of a series of anchor points.

Question: What is tolerance?

Answer: In Photoshop, tolerance essentially means the sensitivity of a tool. In our case, the higher the tolerance the looser the work paths tracing our selection will be because it will have fewer anchor points.

What tolerance should I pick? (Depends on the image!)

Filled Work Paths Tolerance Setting
screenshot 0.5
screenshot 1
screenshot 1.5

As we can see, it is never quite a perfect match but Photoshop tries it’s best. If you’d like to clean up the jagged edges you can use the pen tool to tweak the anchor points.

TIP: To avoid this issue, make your SVG larger than the size you’d like to use in production. It will seem crisper at a smaller size. See How to scale SVG by Amelia Bellamy-Royds.

3. Create a new fill layer. Layer > New Fill Layer > Solid Color

It will ask for a color, black is easiest to work with in my experience. screenshot

After creating your fill layer you can delete the original layer to see your work. screenshot

4. Export as SVG. File > Export > Export As…

screenshot screenshot

5. Optimize!

If you open your newly created SVG in a text editor, you might notice a lot of extra information. Things not related to the drawing of the image, like <metadata> or XML instructions. Removing this extra information not only simplifies the code but makes the file size smaller. woo hoo!

One of my favorite tools for removing all the cruft in SVG’s is SVGOMG by Jake Archibald, which is a very nifty GUI utilizing SVGO. You can upload your image or paste your markup in the tool and it will strip out all unnecessary data.

6. Enjoy working with SVG’s!

svg {
    fill: RebeccaPurple;
}

More tips about working with SVG’s:

/amy

☆ See a bug or typo? File a bug!