After reading this, you may never use a .PNG file for an icon again.
First things first.
What is an .SVG file?
An SVG (Scaleable Vector Graphic) is a popular, web-friendly file format.
The advantages SVG files have over PNGs or JPGs:
Unlike raster files (i.e. JPGs and PNGs), which are made up of pixels, vector graphics like SVGs always maintain their resolution no matter how large or small you make them. No more blurry icons! You need not worry about SVGs losing their visual quality in certain browsers or when you resize them to appear in different places.
Basic SVG files often have smaller file sizes than PNGs or JPGs, which are built from tons of pixels as opposed to mathematical algorithms.
Because SVG files treat text as text, screen readers can scan any words contained in SVG images. Therefore, your website is more accessible and useful for people who need help reading webpages. Search engines can also read and index SVG image text.
If you’re interested in learning more, here's an SVG deep dive from Adobe: here.
Now for the fun part… adding SVGs to your project.
How to Add SVGs to your website:
You can insert SVGs directly into your HTML file and easily adjust them with CSS.
Let’s break it down step-by-step:
STEP 1: Create an SVG file or Find an SVG file:
When creating an SVG, it’s best-practice to use a vector graphics editor like Adobe Illustrator. Not a designer; not to worry. You can find free SVGs and/or purchase SVGs on sites like: The Noun Project or Icons8.
I’m saving this example SVG via Adobe Illustrator.
Step 2: Get the SVG code:
The easiest way to get your SVG file’s code is simply to right-click the file and open it in a simple text editor like TextEdit. I’m also going to change the attribute id to “icon” inside of my svg tags, but feel free to give your id any name you like. Like so: <svg id=”icon”… ></svg> Now, select all of the text starting from the SVG open tag through to the close tag <svg id=”icon”…. ></svg> and copy it (CMD + C on a Mac or CTRL + C on Windows).
Step 3: Adding your SVG code into your project:
There are a few ways to do this. So, feel free to go off-script here if you have a preferred method for adding elements to the body of your html file. Especially if you’re looking to place your SVG inside a specific <div>.
But for simplicity's sake, I’m going to paste (CMD + V on a Mac or CTRL + V on Windows) my SVG code directly inside the body tag of my html file: <body> (paste here) </body>.
<body id="body">
<svg id="icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12,.92A11.08,11.08,0,1,0,23.08,12,11.08,11.08,0,0,0,12,.92Zm5.52,15.191.41,1.41L12,13.41,7.89,17.52,6.48,16.11,10.59,12,6.48,7.89,7.89,6.48,12,10.59l4.11-4.11,1.41,1.41L13.41,12Z" />
</svg>
</body>
This is what you should see when you preview your html file.
Step 4: Styling your SVG code:
You can style your SVG any way you’d like. Choose the colors, size, attributes, etc. that fit your fancy. I’m going to change the size of my SVG to 5em. (Yes, I know that's too big. Ignore that... it's for screenshot visibility.)
In your CSS file, type: '#icon', which references id="icon" in your SVG code in your html file, and within the curly brackets, type: 'width: 5em;' or whatever size width you'd like your icon to be.
#icon {
width: 5em;
}
This is what you should see when you preview your html file.
I'm going to change the fill color of my SVG to blue in my project’s CSS file.
#icon {
width: 5em;
fill: blue;
}
Again, this is what you should see when you preview your html file.
And there you have it. Easy-peasy lemon squeezy.
It’s also pretty simple to add hover effects or animations to your SVG file with CSS. Design, experiment and iterate away.
If you liked this article, give it a like, share, or comment.
Thanks for reading.
Top comments (0)