How To Create An Svg In Photoshop

SVG Introduction and Creating a custom SVG with Adobe Photoshop and Illustrator

There are a lot of great resources to find commonly used SVGs on the web such as http://fontawesome.io, but as an art-maker on the side I love discovering ways to customize my sites.

I made this scalable skull and cross-bone SVG with Photoshop and Illustrator in a few quick steps!

First, What are SVGs?

SVGs, or Scalable Vector Graphics, are vector grap h ics written in a markup language called XML (eXtensible Markup Language). XML has the ability to draw paths and shapes, so your image is essentially made out of code as opposed to a flat image file. Think of it as a drawing made with code!

Since the image paths are mapped out entirely in markup, SVGs are typically used for simple icons and graphics as opposed to actual photos.

Why use SVGs?
They are scalable, meaning that they will look clear and crisp at any size. Their small file sizes optimize your site for quick, efficient processing. SVGs can be used like any other image file in an <img> tag in the HTML, however, they are particularly beneficial when used inline.

Using SVGs inline
This leads to another benefit of SVGs: when the code is directly plopped into the HTML, your browser doesn't need to make an unnecessary HTTP request. What does this mean? Well, if we were to use the <img> tag sourcing to a .svg file in an /images/ folder, our browser would have to send an HTTP request to obtain the specific .svg file and load it to our page. Since the browser is doing all that work it can slow down our page. BUT when used inline directly in our HTML using the <svg> tag as a container, no HTTP request is required because all the XML markup (aka your code drawing) is right there in your HTML!

XML markup for SVGs
There are a variety of XML elements and attributes that can be used to create SVGs. Some common elements are <rect> for rectangle, <circle> for circle, <line> for straight lines. Attributes are applied to the elements to give them an x and y axis, a width and height, color, etc. This example shows how you can use XML markup to create and style a circle:

So that's pretty cool, but creating an image from scratch in XML markup is quite the task. How can we resourceful web devs reduce our production time? Have Adobe Illustrator do the XML markup for us!

Creating a Custom SVG Graphic with Adobe Photoshop and Illustrator

Step 1: Draw out your image and clean it up in Photoshop
First, I drew out and scanned my image (taking a photo with your phone will do if you don't have a scanner). I then opened it in Photoshop and adjusted the levels (Image>Adjustment>Levels) and threshold (Image>Adjustment>Threshold) to create a high contrast image, and erased any little imperfections that I don't want in my final image.

Step 2: Vectorize in Adobe Illustrator and Create your SVG file
I then opened the file in Adobe Illustrator and used the Image Trace function (Object>Image Trace>Make). This will trace your image into a scalable vector graphic! If your graphic doesn't take up the entire art board (aka the background needs to be transparent) we will have to delete the background. This can be done by expanding and ungrouping our image paths (Object>Expand and Object>Ungroup), then simply selecting the background by clicking on it and hit "delete." We can now save our graphic as an SVG! (File>Save As>select "SVG" file type). Note: Make sure that your art board only expands to the edges of your design to avoid blank space around your image.

Step 3: Open up the code in your text editor and paste into your HTML!
Next, I dragged the skull.svg file into my text editor (I'm using Sublime Text 3). This shows me all of the source code between <svg> tags, which you can copy and paste directly into your HTML! If you don't want to have to see that big blurb of XML code, Sublime has these handy little side-arrows that will collapse the code for you.

You can now style and view your custom SVG in your browser!

For a full list of SVG styling attributes, see https://www.w3.org/TR/SVG/propidx.html