Down the SVG Rabbit Hole
I’ve been mesmerized by animation and icon design since I was young. During my time on the internet, I would wonder what programs were used to create beautiful seemingly pixel-less images. I was fascinated by menu design and finding the easiest way to access them.
What I didn’t know at the time that the images that I was obsessed with were Vector Graphics. Vector graphics are designs rendered not with pixels but with math. What this means is that no matter how small or how big you make your image, it retains its shape and curves.
So after years teaching myself how to make Vectors using Adobe Illustrator. I learned that SVGs or Scalable Vector Graphics were available to me in web development.
So… I decided to take the red pill and learn how I can create and animate SVGs using Javascript and CSS.
What are SVGs?
SVGs are fully animatable with CSS and Javascript!
These SVGs can be seen on plenty of websites front page, showing some sort cool animated… thing.
Here are some examples of cool things you can do with SVGs:
https://www.hongkiat.com/blog/svg-animations/
What’s inside???
An SVG object is made up of an SVG tag and more specific tags nested inside. These could be circles, rects or rectangles, paths, polygons and more.
<svg x="233" y="73">
<circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>Try putting this in an HTML Document and see what it looks like. You can change the values of “cx” and “cy” and you will notice that this changes the circles position inside the outer SVG element.
You can check the SVG documentation in MDM for a number of different ways to write SVG in HTML.
But I’m more interested in how I can create these things in my javascript and interact with their properties.
Create an SVG in Javascript
To create an SVG element in Javascript, first you must create the outer SVG tag and then the inner circle.
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");//this creates an svg element
//give it some attributes the height and width of the boxsvg1.setAttribute("x", 600);svg1.setAttribute("y", 300);const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");//you can then create an element to append inside of it
//but you first need to give it some attributes cir1.setAttribute("cx", 80);cir1.setAttribute("cy", 80);cir1.setAttribute("r", 80);cir1.setAttribute("fill", "red");svg1.appendChild(cir1);
You cannot interact with these attributes with “.cx” or “.cy” in the way you might want to. If anyone can tell me how to access these elements with dot notation please do. I haven’t explored that part of the rabbit hole yet.
Paths
Paths are where things start to get really interesting. These are polygonal shapes or just lines that with points that can be added to or changed in an unlimited number of ways.
“The <path> element is the most powerful element in the SVG library of basic shapes. It can be used it to create lines, curves, arcs and more.” -MDM
<path d="M 10 10 H 90 V 90 H 10 L 50 50 Z" fill="transparent" stroke="black"/>Place this inside an SVG element to get start.
We will start from the ‘M’ piece of this ‘d’ property.
The ‘M’ is the starting point inside your outer SVG. So this one will start at “10, 10".
Now the H piece is a Horizontal line with a length of 90, then the V piece is a Vertical line of 90.
The ‘L’ property is a ‘Line to’ which will draw a line from the previous point to a new position. In this case it creates a with an x length of 50 and y length of 50.
The ‘Z’ will then close the shape from the final point.
Play around with this to understand how paths work. Try taking away the Z and see what happens when a path is not closed.
Bezier Curves
Oh, we’re deep in the rabbit hole now.
“Cubic Beziers take in two control points for each point. Therefore, to create a cubic Bezier, three sets of coordinates need to be specified.” -MDM
So in your path, in order to create a cubic bezier you will add a new ‘C’.
// C x1 y1, x2 y2, x yC 20 20, 40 20, 50 10
Your first point will be your previous point in your path. The end point will be the last parameter in this “C”. So in this case the line will end at “50 10”. The curves themselves are created by the “x1 y1” and “x2 y2” (20 20, 40 20).
Place one of these in your path and see what happens.
What is Possible?
The possibilities of SVGs are limited only by your creativity. Check out the MDM resources on SVGs. If you would like to get deeper in the rabbit hole you should start looking into how to animate the elements.
Thanks for reading! I’m @thedrewprint on Twitter
MDM Paths Documentation: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
Gifs of SVGs: https://giphy.com/explore/svg
