Scalable Vector Graphics(SVG)
While researching javascript animations for my first javascript project I came across the SVG element and scalable vector graphics. I learned they are capable of creating amazing animations and graphics, but I was also very intimidated by them. To get a better understanding of SVGS, here is a basic introduction.
The Basics
Computer graphics are either a bitmap graphic or a vector graphic.
Bitmaps are made of pixels, while vector images are software-created and based on mathematical calculations.
A bitmap graphic is a graphic composed of pixels. Which explains why some graphics can appear pixelated depending on their resolution. Vector graphics are basically shapes written in code that can maintain their quality when being scaled up or down unlike a bitmap graphic.
Some bitmap graphic file types are .png, .jpg, .jpeg. For vector graphics, the file type is .svg. That comes with no surprises 🙂.
Scalable Vector Graphics (SVG)
What really is a SVG? Developer modzilla says it best…
it’s a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.
So now that we know what a scalable vector graphic is. How can we use it? SVGs are used to make some amazing animations and graphics. As beginners, let us create a basic SVG.
The Syntax
The first step is the SVG element <svg></svg> in your Html file. The SVG element is the container where we create the graphic. There are two main attributes viewBox and xmlns.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
</svg>ViewBox
Viewbox has four attributes: x coordinate, y coordinate, width, height. These create and define where the graphic’s position and dimensions are.
xmlns
This specifies the xml namespace for a document. This attribute must always be included in the opening SVG tag.
SVG Basic Shapes
Below are the basic SVG shapes used for drawing. As an example, I will use the circle tag. To see the syntax for all shapes below, click this link.
<circle/>
<rectangle/>
<ellipse/>
<line/>
<polyline/>
<polygon/>
<path/>The circle element sounds like what it does, it renders a circle on the screen! It takes 3 basic parameters to determine the shape and size of the element, r is the radius of the circle, cx is the x position of the center of the circle, and cy is the y position of the circle as below.
index.html<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="35" /></svg>
I want my circle to be center to the viewBox so I made the cx and cy both, which will appear like below! I added a little CSS so we can see the viewBox border and make it a little more presentable.
That looks great, but wouldn’t it be even cooler if we could layer more circles? It is as simple as just adding more circle tags.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="35" /><circle cx="50" cy="50" r="20" /><circle cx="50" cy="50" r="5" /></svg>
which will give you…. this!
You might be thinking this was a lot of work to just do a simple graphic, and you are right! That is why there are many applications to create SVGs. One program is Adobe Illustrator.
SVGs and Illustrator
In just a few quick steps you can easily make an SVG file for the web! First set up your Html file.
index.html<div class="container"><h1 class="title"> SVG Illustrator Example!</h1><!-- svg will go here! --></div>
Next, save your Illustrator file as a SVG and open the text editor at the lower left side of the menu to view the code. You should see something like below pop up, just copy everything from the opening SVG tag to the closing SVG tag.
All that is left is pasting the code in your HTML file and admiring your work!
That is just a basic overview of what scalable vector graphics can do. To learn more and view some really cool SVG animations and graphics see the links below.
