An introduction to SVG’s in CSS
Introduction
So what is an SVG and why should we even consider using them? This is an introductory blog about SVG’s. I’m going to quickly explain and show a few things that you can do with them, and after reading this blog you will have a basic understanding of them and how can you code them.
What is an SVG?
SVG stands for “Scalable Vector Graphic”, and a vector graphic is just an object that given certain mathematical instructions that will display a shape. Why should we even consider using them when we can always add an image from the internet or our files? There may be some shapes or structures that we have in mind that are just too complex to find an image online. Let’s compare a zoomed-in PNG image displaying an arrow to a zoomed-in SVG arrow and see the difference.
As you can see a normal image will render in pixel information. In other words, if we want to ever make our icon bigger, ugly pixels will show with the SVG. On the other hand, we have a crisp image no matter how close you zoom in or how big you make it.
Another great thing about SVG’s is that they are literally composed of code so their size is minuscule and you won’t have to deal with HTTP requests so your code runs a bit more efficiently.
How do we actually code an SVG?
SVG tags interpret everything inside them as XML so every attribute that will be used to create the SVG goes inside of an <svg/> tag. There are different elements that SVG’s use to create a shape, in this blog I will talk about: circles, rectangles, lines, and polygons. Each shape uses different attributes to define the object, let’s break down each one.
Circles
Circles have three main attributes: radius which is represented by “r”, center on X-axis which is represented by “cx”, and center on Y-axis. Let’s see how we can use these to actually form a circle.
So if we examine the image to the left part we see that there is an <svg/> tag that has a width and height and inside we have a <circle/> tag that only has an “r” attribute but why can we only see 1/4 of the circle? Well, that is because we haven’t specified where to center the circle, let’s see how to do that.
Here we are specifying where to put the center of the circle based on the X-axis or in simpler words, where to put the circle from left to right. We still don’t have a full circle so let’s use our third attribute.
Voila! We have a full circle now, notice that we specified the position of the circle in the Y-axis or from top to bottom.
Rectangles
Rectangles have six main attributes to form rectangular shapes. The “x” and “y” attribute in rectangles refer to the position of the top left corner of the shape unlike the center on circles. So if we specify the “x” to be 0 the shape will be all the way to the left and if we specify “y” to be 0 the shape will be on the top. We have width and height that specify just that and then we have “rx” and “ry” now these two are going the specify the “roundness” of the shape they act like “border-radius” in CSS. Let’s see how we can combine these to get a shape.
If we inspect the image we can see that the “x” is specified to be 10px away from the left and the “y” is telling the shape to position itself 10px away from the top. We can also see that we can apply the “fill” attribute so that our square changes colors. Now how do we use “rx” and “ry”?
Inspecting the image we can see that rx defines the borders on the X-axis or top and bottom borders, so if we specify “rx” to be 25 the shape will stop curving after 25 pixels in the X-axis and “ry” defines the borders on the y-axis or left and right borders; Note that if there is no rounding in either the y or x-axis no rounding will actually occur.
Lines
Lines are more straightforward. We have six main attributes in lines: “X1”, “Y1”, “X2”, “Y2”, “stroke”, and “stroke-width”. So “X1” will determine the starting point of the line on the X-axis and “Y-1” specifies the starting point of the line in the Y-axis, naturally “X-2” specifies the ending point of the line regarding the X-axis and “Y-2” specifies the ending point of the line regarding the Y-axis. “Stroke” will specify the color of the line and “stroke-width” will specify the width of the line. Let’s see how it works.
Polygons
Polygons are really just a template to build any shape you want. We use “points” to build polygons, we need at least 3 points to build a shape. The way “points” work is by specifying them all together in one attribute, let’s see an example and break it down.
So let’s inspect closely at the points attribute we have three pairs of numbers inside of the attribute, the first pair defines the first point, the second pair specifies the second point and the third pair specifies the third point, each point represents an extremity of the shape. A comma separates each pair, the left side number represents the position of the point in the X-axis, and the number on the right represents the position on the Y-axis. Pairs are separated by spaces. We can add any number of points to polygons.
Here we add another point that goes in the middle of the triangle making sort of an arrow shape.
Styling properties
SVG’s use slightly different properties to style them than CSS. The two essential properties are: “fill” used to specify the color of the SVG, “stroke” used to specify the border, “stroke-width” which specifies the width of the border. To specify width and height we use…width and height just like css.
Different ways to include SVG’s in markup
There are different ways we can include an SVG in our HTML file, I will show you a couple of ways to do it.
Importing SVG’s as an image from another file
One way of including SVG’s is importing them from another file as an image. So here I am creating a normal image tag in HTML and I’m indicating the tag that to look for an SVG file in the directory.
The down-side of using this method is that we can’t directly change the style of anything that is inside the <svg/> tag, we can only manipulate the style of the SVG itself but not the shape inside it.
Writing our SVG directly on our HTML file
So another way we can include an SVG is to code it directly in our HTML file. Including our SVG’s inline like this gives us a bit more control over the shapes inside of the SVG, we can now change the style of any shape inside of the SVG.
The disadvantage of embedding our SVG’s this way is that our markup can quickly get very large.
Using the <use/> tag
So the third method that we can use is using the use tag. The way it works is that we embed the SVG directly in the markup, the difference is that we wrap our SVG in a <symbol/> tag.
The <symbol/> tag will prevent the SVG from displaying, that is were the <use/> tag comes in.
Whenever we use the <use/> tag (no pun intended) wrapped inside an <svg/> tag, our SVG will be displayed, the advantage of this method is that we can create numerous SVG’s in our file and put them all in the bottom, so whenever we want to use it we would just use a <use/> tag.
Conclusion
So we have seen the basics of SVG’s, there is way more to explore about this subject and I am eager to keep learning more about it. The things that we can do with SVG’s are amazing, they give us the possibility to create, crisp and creative icons to display in our webpages. Happy coding!
