Dancing Syntax
Working with SVG
My first exploration.
While working on my final project for Flatiron School, I had the opportunity to work with two EPIC designers for my project: Anna Wu and Kendra Jenel. They recommended that I export their designs from Figma as SVGs, a file type I have never worked with before….
Coooool, It’s time to learn something new!
Introduction
SVG was developed by the World Wide Web Consortium in 1999 and saw its official release in late 2001. SVGs are an Extensible Markup Language (XML) based graphic format for 2D images.
Scalable Vector Graphics (SVG)
Vector vs. Raster
To understand more about them, let’s look at a light comparison of image technologies.
Raster images are built with pixels arranged on a grid, usually drawn left to right, and top to bottom. One issue here is that large raster image files are costly to store and load, which can lead to pages loading very slow. Additionally, raster graphics don’t scale very well at all. You can try this out by trying to scale up (resize) a JPG or PNG image. You’ll notice that your image lost a lot of quality in the process, a similar loss of quality occurs when scaling down.
In the gif below, we see a raster scan at work. The beam travels line by line, in the case of a raster image, drawing the pixels based on the images pixel data, if a pixel should be drawn, the beam is on, if not, the beam is off.
Vector images consist of coordinates placed on a cartesian plane, connected by lines and curves to form polygonal shapes and more. The coordinates mark where a vector path starts, the direction they go and ends. These paths have attributes that describe the fill color, stroke color, shape, thickness, and curve of the path.
In the example gif below, the beam is drawing based on the coordinates it was instructed to draw at.
SVG
SVG is a markup language based on XML to represent vector images as code. Since they are a form of XML markup, they can be indexed and searched. This means that by including ARIA labels and roles, screen-readers can read what the file is from the browser.
Another benefit of the text XML is that and SVG can be edited in any text editor. Details can be easily added to or removed from vector images by simply adding or changing the values of a given attribute.
So far, the learning curve for what you can do with SVG seems pretty steep to my currently untrained eyes. I’ve read that you can do all sorts of things with them, including animation! SVGs are great for illustrations, user interfaces, and icons.
Examples:
SVGs can be created and edited programmatically.
In this codepen, we are defining a <svg></svg> with an XML namespace, width, height, and version. The XML namespace is specifying that we will use SVG XML elements and attributes in our file.
Inside our, <svg></svg> we are defining a rectangle with<rect></rect> to render on the pen. The rectangle has x and y attributes for its position, width, and height for its size, a stroke attribute which defines the color to draw the rectangle, a transparent fill color for nothing inside the stroke’s lines, and a stroke-width attribute to specify how thick the lines will be. Copy this code in your own pen and play with these attributes to see how they affect the rectangle!
SVGs can have events.
If you open you the Javascript Pen, you’ll see some code.
You should be able to click on the rectangle, toggling its inner fill color between green and transparent!
Depending on which Javascript library you use, working with events may be a little different than what you see in the codepen. However, from this example, we can imagine having all sorts of SVG icons that are clickable.
SVGs can be animated.
Remember how I said SVGs could be animated? It turns out those can be done programmatically too. I’m not sure how exactly to do that yet, but I found this really cool tool called SVGator that abstracts a lot of the SVG animation code into a GUI tool. You can use sample SVG from the library and upload your own SVGs. The tool allows you to view the properties of your SVG image and edit them. You can add keyframes, control the type of animation, and more!
With SVGator, I was able to turn this:
Into this!
My introduction to animation was in high school with Autodesk Maya, and I loved it so much. Working with SVG and learning what I have so far has been really fun. I hope this is useful to you beginning your own learning process.
Happy coding!
