By Daniel K., Age 14
In web design (and in all computer graphics), there are two types of images:
Raster graphics and vector graphics. The difference between the two is that while raster graphics usually work better for images, they get pixelated or blotchy if you zoom in too much. However, vector graphics use math to display images. Although vector graphics don’t work for images, they can make illustrations. However, the best part about vector graphics is that you can zoom in however much you want and have the image stay sharp. Websites use vector graphics in the form of <svg> tags.
However, the best thing about SVGs in websites is that you can control how they are displayed. For instance, you could animate their colors with CSS or even change their appearance with Javascript.
To learn how you would go about doing that, we first need to understand a bit about SVGs. SVG files are a lot like HTML. If you open a .svg file in a text editor, you will see something that looks a lot like HTML code, but with some new tags. This will be useful later. There are two ways to add an SVG to your HTML: use an image tag that points to a .svg file, or embed the file straight in the HTML.
The first type of SVG is the simplest to implement, but offers none of the cool tricks I’m about to show you. You can implement it by using an IMG tag with a source ending in .svg (<img src=”someDirectory/example.svg”>).
The second type of SVG, however, takes the contents of the .svg file and copy-pastes them directly onto the HTML page. This works since SVGs are formatted a lot like HTML and almost all major browsers support SVGs. This way of adding SVGs to your webpage is much better as it allows you to directly modify the SVG data using Javascript.
An SVG consists of an <svg> tag, which contains all of the metadata for the SVG. This isn’t very important for our purposes, so act as if that tag is a <div> containing the actual drawing. Inside the <svg> tag, you will find one or more <g> tags. These tags mainly handle the layers for the SVG. You won’t need those either, unless you’re planning on transforming entire SVG layers with the transform=”matix()” attribute. The thing we’re looking for is inside the <g> tag. This is where the main graphics-drawing takes place.
Although you may see some <rect>, <ellipse>, <polygon>, and <polyline> tags, most SVGs are made primarily out of <path> tags. All drawing tags can contain a fill attribute, as well as several other attributes specific to drawing a shape. For instance, the <line> tag has x1, y1, x2, and y2 attributes that determine the two edges of that line, while the <path> tag has a “d” attribute that dictates the shape drawn.
Now comes the fun part: modifying the SVG. Since each drawing tag in an SVG is like an HTML tag, we can add IDs to them. Then, when the user does something, we can access them through CSS and apply styling to the shapes as you would normally.
To do more complex things with the shape, for instance change it with JS, we can use the <animate> tag. When an event is triggered, we can add the animate tag inside the drawing tag, like this:
<g>
<path d=”some value”>
<animate>
</path>
</g>
We can then add an attributeName attribute to the animate tag in order to specify the attribute that should be animated, in this case “d”. We can also give the animate tag a values attribute, which specifies the attribute values to animate, separated by semicolons. In this case, we can specify “some value;another value” since we want the path’s d attribute to animate from some value to another value. Specifying a dur attribute for the animation allows you to customize the duration the animation lasts.
Congratulations, you can now animate SVGs. When making websites, you can apply this in interesting ways, such as making animated buttons or backgrounds.