Using SVG Images in Web Development
Hey everyone! This week’s post is a short tutorial for anyone looking to learn about SVG graphics quickly and use them in their website.
As always, I’d love to hear some feedback. Comment here, or reach out to me through email, Twitter, or my LinkedIn, or find more of my work at my portfolio or GitHub. As of the writing of this article I am actively looking for work. Don’t hesitate to reach out if you’d like to get in touch concerning an employment opportunity.
What Is SVG and Why Should I Use It
SVG stands for Scalable Vector Graphics. SVG are graphics that are able to scale to any size without becoming distorted. SVG are written in XML (kind of like HTML) and they’re great for web development. From MDN:
Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics. As such, 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.
(Text from here, emphasis my own).
They allow developers to worry less about which size icon to use at which screen size, and they can be styled by CSS. They act in contrast to raster graphics, which is probably the type of graphic you’re familiar with. Raster graphics cannot scale — they have a defined width, height, and pixel density.
This image from Inkscape’s website does a great job of explaining the difference between SVG and raster graphics. The images on the top row are raster graphics. These are what you would see in 2d pixel art video games like Mario, where everything looks very blocky. The SVG images on the bottom row are much more smooth than the raster graphics. These will look the same at 100x100 pixels as they do at 1,000,000x1,000,000 pixels.
SVG images do have the downside of sometimes being larger in file size than raster graphics. A raster graphic that is 100x100 pixels is limited in size by how many pixels there are in the image. SVG images are virtually unlimited in how large their file size can become because they’re written with code, and therefore can have as many lines of code as their developer wishes.
That being said, if you make your own SVG images or use simple icons from the internet like I suggest below, this probably will never be an issue.
How To Use SVG In Your Website
SVG images can be placed on websites in a few different ways. The best way is to use an inline SVG element. This allows for the most controls over the SVG image with CSS.
I’m going to use this Twitter icon image from iconmonstr. iconmonstr is a great site for free to use SVG icons. To use this SVG image on our site, we just embed the SVG code in our HTML:
A few things about this code:
- The xmlns attribute isn’t actually necessary here, but may be needed by some browser in the future, so should be left alone.
- Both width and height are not necessary, only one or the other. SVG images retain their ratio unless specified otherwise, so either width or height will always affect the other.
- The viewBox attribute is like defining the coordinates and size of the window we’ll use to look into our SVG element. It takes four values: x, y, width, and height. From what I’ve gathered SVG elements that have path element children need the viewBox attribute in order to correctly show the paths they contain. SVG elements with shape element children don’t need this attribute.
- The path element contains the logic for the line in this image. This is what actually draws the twitter logo.
- The image is black because that is the default color for SVG images. This can be changed with the ‘fill’ attribute.
There you have it, the Twitter logo! That’s all you need to make a scalable vector graphic for your website. But, let’s make this a bit more stylish.
We can target the SVG element just like any other element in HTML with CSS. We’re going to want the icon to be larger and the same color as the Twitter logo (which uses the ‘fill’ attribute for SVG images). SVG images by default scale at their original ratio, meaning we wouldn’t normally have to set both the width and height, but because inline width and height were both included with our icon (which is easily removed), we set both of them here.
We’ll spruce this up just a little bit more by adding a hover transformation and creating anchor tag around it to link to our Twitter profile:
Now when the user mouses over our icon to click on it, the bird will turn upwards and rise a little, as if flying. Neat!
And again, the best part about this is we don’t need to include icon images at different sizes. Screen sizes from that of the old iPhone 3 to the largest PC monitor will show the exact same SVG image:
SVG Shapes
SVG also supports basic shapes. These shapes are a great way to add animated shapes to your page without trying to hack a div element into the right shape. You can read about them in detail on MDN here.
We’re going to make a circle element to surround our Twitter bird. The circle element is a self closing tag that looks like this (lines 9–14):
Here we see that the circle element has taken the fill value that we declared in our CSS earlier, the same value that the bird has. We’ve given the bird’s drawing path element its own ID for easier targeting, and did the same for the circle element. The circle element has three important attributes:
- r: the radius of the circle.
- cx: the center x coordinate of the circle.
- cy: the center y coordinate of the circle.
We set the cx and cy both to the center of the viewBox, 12 pixels in. The radius is smaller than half the width of our viewBox because when we apply a border to it we want that border to stay inside the box. Let’s style our new circle element:
Here we have set the circle’s fill property to empty so it is transparent. We applied a stroke, or an outline, to the circle, set to the same color as our Twitter bird. We set the stroke width to be 1 pixel wide (which is scaled up for the width and height of our SVG element). We also scaled our Twitter bird down a bit in size to fit inside the circle element.
We now have a fully styled, sleek Twitter icon for any site we want.
And there you have it! That’s all you need to know for making some cool looking icon links for your website, and that’s most of what you need to know to be dangerous with SVG images.
What are you planning to use SVG for? Icons for navigation links on a website, a cool cloud animation across the top of your page, scalable and highly stylized text maybe? The possibilities are endless, and I’d love to hear your ideas! You can contact me using any of the links below. And I am still looking for work, so feel free to reach out about that too!
