Building an SVG Image

in Front-end

Learning how to use the SVG image format opens up a whole world of possibilities for interesting visuals — I mean, you could practically create SVG images to scale to the size of the world, really. If you’ve taken our SVG course or read our previous post about its benefits, you know SVG can help you scale your assets without losing their quality, animate every piece of an asset using only code, and so much more.

Today, I’m going to show you how to tweak and draw SVG by hand. This may sound crazy — I mean, we are humans, and that kind of work is what computer programs were built for, right? There are times, though, when you will need to dig into the nitty-gritty of a .svg file and tweak a few things.

One of those times, for instance, is if you wanted to create something like this lockup here:

The above image is selectable (copy and paste that logo!), screen-reader accessible, full-width capable, and more! Let’s dive into how I made it.

Creating Our SVG

First, you need to create the vector and then, upon exporting it, tweak it and add the styles/animations you so desire. To create vectors, one usually looks to a program like Illustrator or Sketch. The process varies depending on the program you use, but there is generally a lot of work with a pen tool.

Once you’re satisfied with your illustration, it’s time to add the text.

At this point, you need to split up the different parts of your illustration to better integrate it with the text. Here, I removed the feet and nose elements and placed them above the text, so it looks like the pony is hugging the “A” in my name. I also put her bangs on top, overlapping the “A” to really bring home the layered effect.

Once you’re satisfied with your lockup, it’s time to export it as an .svg! This process is a little different in each program. In Sketch, you need to group together what you will be exporting first.

Then, use the “Make Exportable” button in the bottom right corner of the app.

Now our lockup is ready to go online! We could use the <img/> tag to include it on our site, but this method doesn’t allow you to style and animate the different pieces of the SVG. Instead, let’s copy the .svg code we just exported and paste it into our HTML.

Cleaning Up Our Code

At this point, we need to clean up our SVG code a bit. We want to delete the hard set height and width attributes off of the SVG tag, and instead set this height in the styles. For this simple example, we’ll do this inline.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Alyssa Nicoll</title>
    <style media="screen">
      svg {
        width: 30%;
      }
    </style>
  </head>
  <body>
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg viewBox="0 0 2249 842" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...

There are also a few arbitrary lines we can delete: xml version, the xlink attribute, the Sketch comment, and the empty defs tag. I usually get rid of useless lines of code because they drive me bonkers, but feel free to leave them in if you like.

Here’s how we could remove those lines:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <svg viewBox="0 0 2249 842" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
    <title>Group</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    ...

Doesn’t that look so much better?

Next, I replace the not-very-meaningful title and desc with more accurate descriptions.

<svg viewBox="0 0 2249 842" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <title>An SVG Lockup Logo</title>
  <desc>Pinkie Pie hugging the `A` in Alyssa.</desc>
  ...

Our SVG is really starting to look nice, but hold your horses (pun so intended) — we’re not done yet! Let’s get animated.

Animating SVG

When you start creating your SVG image, you might not how you want to animate it. For instance, when you get the SVG on the page and in the browser, you might realize you need to group it a bit differently, or that the paths need to have ids.

Here, I want the pony to hug the letter “A” tighter on hover. In order to do this, it would be easier if the parts I want to animate were all named to start. I’ve already named some of the paths, so I can now go in and rename the rest.

Whatever you name the path or shape, that’s the name it will be given as an id. Since these names are usually lowercase and dash delineated, I carry that naming convention over to the app so they’ll be good to go when I export. Now, I’m going to export again with our updated names and grab the code inside of the SVG. (We don’t need to replace the entire SVG since we already cleaned it up, so just the inside elements will do.)

As you can see, now each element has an id that’s lowercase and dash delineated, and we’re ready to add some animations on hover! I went ahead and added four keyframes for moving parts — down-right, down-left, up-right, and up-left.

As you can see, now each element has an id that’s lowercase and dash delineated, and we’re ready to add some animations on hover! I went ahead and added four keyframes for moving parts — down-right, down-left, up-right, and up-left.

See the Pen SVG Lockup by Code School (@codeschool) on CodePen.

I also added a wiggle animation to the nose and mouth. So on hover, it looks like she is squeezing tighter with her arms and legs, as well as munching on the “A” with the wiggle animation.

See the Pen SVG Lockup by Code School (@codeschool) on CodePen.

Time to Use SVG Everywhere!

Well, not quite. As we all know, too much of a good thing can actually be a bad thing sometimes — in this case, for both your web apps and users’ health. There is a time and place for everything, including SVG usage — hence why not all of the assets on Code School are SVG. For example, the Code School logo is SVG, while badges are not.

The logo isn’t inline, though, it’s just being pulled in with an <img/> tag. Our 404 rocket, however, is inline — notice how it has multiple animations going on.

It’s beneficial for the SVG to be inline, so the front-end devs can access the inner parts to iterate on the style and/or animate them.

When looking at a project, you need to weigh the pros and cons and decide for yourself where to draw the <line/>. Never allow user experience to suffer for an “eventually prettier” asset — they might not stick around to see that pretty asset load.

That being said, there are cases where it simply cannot be done any other way, like our lockup. There is no other way to create a header that scales, is full width, can be mixed in with an image and text like this, and is selectable with screen-reader accessible text.

Have some SVG tips of your own? Let us know in the comments below! And don’t forget to play through our SVG tutorial, You, Me & SVG, now to learn even more about this versatile image format.

Resources

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Alyssa Nicoll

Alyssa is a passionate, kooky Code School Instructor and Content Producer. She thinks of herself as a lifetime student and Angular enthusiast — bring on the challenge!

Might We Suggest

You, Me & SVG Course

Learn how to create and use scalable vector graphics online. Whether your icons, shapes, and assets are on small or large screens, SVGs have you covered!

View Course