DIY : Creating custom SVGs for Beginners – Jesse Huynh – Medium
There are many resources online to finding the perfect icon or SVG (Scalable Vector Graphics) for your websites and applications. A few of my favourites are Font Awesome (https://fontawesome.com), The Noun Project (https://thenounproject.com) and Icons8 (https://icons8.com). But you might find yourself working for a client that wants a custom logo, or perhaps, you just can’t source the illustration you need.
Have you noticed when resizing file formats like .jpg or .jpeg, though rich in colour and texture, are lossy. SVGs are scalable vector graphics. This means that they can be resized larger or smaller and its resolution remains unaffected. Additionally, the separate layers and paths within an SVG can be targeted with CSS styles, allowing easy manipulation for you and your client when changing properties like fill or stroke paths without having to entirely re-create an image.
Today, I’m going to show you how you can make your first SVG using Adobe Illustrator, and as a bonus, how you can animate them with CSS keyframes and animations!
First, open up an Illustration program of your choice. I’m going to be working with Adobe Illustrator. Create your base of your illustration using the shape tools. This will heavily depend on what you’re creating. If you need hard edges, consider the line/rectangle tool. In this case, I chose to do a free-hand illustration with the brush tool and refined the lines by targeting the anchors and merging the paths! You should end up with something like this:
Notice the layers palette on the right. I’ve named my layers and grouped them based on their role in the illustration. This is important to name your layers and group them based on how you plan to manipulate them with CSS. These names become the path’s unique ID when you target them later.
At this point, you can fill your layers/paths in illustrator or wait to do them later. In this example, I’m going to do it both in illustrator, and show you how you can later override the styles in your CSS if you or your client decide it’s time to switch up the colour palette.
If you take a look on the left, you will notice two coloured boxes. When you select each layer, you can use the “filled” box to fill the layer, or the outlined box to add a stroke.
The next step is to export your illustration as an SVG. In your Illustrator, go into File > Export > Export As.. and then choose SVG. Remember to grab that SVG code so you can import it into your HTML. Don’t worry, if you forget to grab it, you can always get the code later by dragging your SVG into your text editor!
Usually once you’ve exported an image, you can’t make stylistic changes to the image without going back into your Illustrator or Photoshop, and editing the image to export it again. However with SVGs, you can continue to make some changes like fill and stroke to your illustration. In your CSS, target the layers with the unique ID/name you used in the layers palette.
It should look something like this in your CSS file:
As you can see here, I’ve changed my SVG’s hair, lips, and shirt colour! See below how the layers take the new CSS changes:
If you’re not interested in animating your SVG, you’re all set!! Don’t be intimidated to give it a try. And feel free to tag me in your work on twitter (www.twitter.com/jessehcodes). I’d love to see what you come up with!
BONUS: By using a few keyframes, I targeted the same unique IDs with some CSS animations to make my SVG wave and blink. Here’s a peek at the code on how I did it.
You can see it live here: www.jesseh.codes/svg
I hope you enjoyed this short tutorial on custom SVGs for beginners! Thanks for reading!