Like A Girl

Pushing the conversation on gender equality.

Code Like A Girl

How to Build SVG Code and SVG Animations

For absolute beginners and especially for illustrators and designers.

“A man drawing on an iPad with a stylus” by Dose Media on Unsplash

Set Up Part 1: The Brackets Text Editor

First, download a text editor. I like Brackets (http://brackets.io/) because it’s easy to add plugins and quickly view your project live.

Open Brackets. It will default to the “Getting Started” page. On the far left panel is a file directory. On the far right panel, there’s a lightning bolt and an extensions lego. The lightning bolt lets you see your code as it will appear on a browser. The extensions lego lets you add features to Brackets.

Optional: Click the extensions lego. Search for “Emmet” and install. This is a way to use keyboard shortcuts to write code faster. Search for “SVG Preview” and install. This will let you see your SVG as you draw it.

Set Up Part 2: Creating a File

Create a new empty folder on your desktop. You can name it anything like “My Web Animation”

Drag the folder into Brackets. It now appears in the left hand panel.

In that left hand panel, right click and select “new file”

Right click and rename the file “index.html” An html file is what tells the browser what to do on a website.

Within the index.html write an empty web page. If you have Emmet installed, you can do this by writing an ! followed by the tab key.

<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Document</title>
   </head>
   <body>
   </body>
</html>

Everything you write between the <body> and the </body> will show up on your website. This is where the SVG will go.

SVG Graphics Part 1: Using a Pre-Built SVG

An SVG is a Scaleable Vector Graphic. It’s made of mathematical equations for lines and shapes rather than pixels. This is why it never gets blurry. It also means that we can open up that code and manipulate what is inside of it to animate it.

Create a simple graphic in Adobe Illustrator, Sketch, or Inkscape.

Name your layers and export the graphic as an SVG.

Drag the SVG into Brackets — It’s made out of SVG Code!

Notice that inside the code, there is id = “LayerName” We can use these ids to animate later on.

Copy and paste the code, then put it between the <body> and </body> tags in your HTML

Click the lightning bolt to preview your website. The SVG graphic is there!

SVG Graphics Part 2: Using a Homemade SVG

Since SVG graphics are just code, you can write your own. Try this.

Delete everything in between the <body> and the </body> and instead type

<svg>
    <rect id=”MyRectangle” x=”50" y=”50" width=”50" height=”50"/>       
    <circle id=”MyCircle” cx=”150" cy=”150" r=”50"/>
</svg>

Click the lightning bolt to see it in the browser.

It’s a rectangle at 50 pixels to the right, 50 pixels down with a width of 50 pixels and a height of 50 pixels. The circle has a radius (r) of 50px.

Change the number values to watch how they affect your graphic.

You can create more than just rectangles, for a full list of things you can create, check out https://developer.mozilla.org/en-US/docs/Web/SVG/Element

Animating SVGs Part 1: Using CSS Animation

SVGs are able to use CSS syntax to create animations.

For example, between the <svg> and </svg> write:

<defs>
<style type=”text/css”>
     @keyframes change-colors {
       0% {fill: red; transform: translateX(0px);}
       25% {fill: yellow;}
       50% {fill: blue;}
       100% {fill: green; transform: translateX(50px);}
     }
   #MyRectangle {
      animation-name: change-colors;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
  </style>
</defs>

defs stands for definitions. You are defining a style of the css type.

You can set keyframes, by using @keyframes then name your animation anything. In the example above, I’ve named the animation “change-colors”

Then, set the timeline in percentages. Within the { } beside each percentage, use CSS syntax to change values. You may change as many values as you’d like.

To assign an animation to a part of your SVG, use its id or class. For example a shape with an id of MyRectangle would start #MyRectangle

Then, within the { } use CSS syntax to link your animation, and set it’s duration and iteration.

Animating SVGs Part 2: Using SVG Animation

SVGs contain their own animation syntax as well.

Begin by making sure the shape you’s like to animate has a closing tag (a tag with a / before the name.) For example, after <rect> write </rect> and after <circle> write </circle>

In between those tags, use any of the following SVG animation tags to animate that shape.

<animate> , <animateMotion> , or <animateTransform>

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
> https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

SVG Animations are really helpful when you want your web animation to change depending on user input like a mouse hover or a button pressed. I find that it’s best to draw up the illustration in a design tool like Adobe Illustrator and name my layers really well so that multiple parts of the graphic can move independently from each other. Happy illustrating and animating. Hope you learned a lot and had some fun.