SVG is awesome for web design, but most svg files are simply uploaded and used like an image. That’s a waste, because there’s so much more that can be done with an HTML embed!
Manipulating SVG files is extremely easy. It also saves a lot of time changing things and re-exporting as you're working on a layout. For this walkthrough we’ll take a look at one of the icons from the Creative Things 2.0 icon set. I’ve purposely made the SVG files in that set to be extremely easy to edit.
If you’d like to follow along but don't feel very confident editing code, this walkthrough will be some really good HTML and CSS practice.
1. Open the file in an editor
There are a lot of text editor options out there for coding. You can use any text editor, but I use and highly recommend Sublime Text as an editor if you don’t have one installed already.
To get the HTML we’re starting with, I’ve simply opened the SVG using Sublime Text and copied everything. Here’s what the icon looks like without any adjustments.
{% c-block language="html" %}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><title>icon-camera-o</title><path d="M15.58,6.59l.83.83A2,2,0,0,0,17.83,8H19a2,2,0,0,1,2,2v7.51A1.49,1.49,0,0,1,19.51,19h-13A1.49,1.49,0,0,1,5,17.51V10A2,2,0,0,1,7,8H8.17a2,2,0,0,0,1.41-.59l.83-.83A2,2,0,0,1,11.83,6h2.34A2,2,0,0,1,15.58,6.59ZM13,10a3,3,0,1,0,3,3A3,3,0,0,0,13,10Z" style="fill:none;stroke:#231f20;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px"/></svg>
{% c-block-end %}
Pretty messy, right? It looks unorganized and kind of intimidating. So let’s clean this up real quick and see what we have to work with.
2. Make the HTML more readable
After a couple of quick adjustments, the HTML will start too look a lot better.
{% c-block language="html" %}
<svg id="Layer\_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
<title>icon-camera-o</title>
<path d="M15.58,6.59l.83.83A2,2,0,0,0,17.83,8H19a2,2,0,0,1,2,2v7.51A1.49,1.49,0,0,1,19.51,19h-13A1.49,1.49,0,0,1,5,17.51V10A2,2,0,0,1,7,8H8.17a2,2,0,0,0,1.41-.59l.83-.83A2,2,0,0,1,11.83,6h2.34A2,2,0,0,1,15.58,6.59ZM13,10a3,3,0,1,0,3,3A3,3,0,0,0,13,10Z"
style="
fill:none;
stroke:#231f20;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-width:2px"/>
</svg>
{% c-block-end %}
If you’re still not quite sure what you’re looking at, here’s a quick breakdown of what’s included in this file:
{% c-line %}svg{% c-line-end %} – contains the icon, which currently has an ID, a data name, and a viewBox (the size of the original artboard in Illustrator)
{% c-line %}title{% c-line-end %} – Sets the name of the icon. This is useful for accessibility but isn’t something that we’ll need to adjust.
{% c-line %}path{% c-line-end %} – Defines how the path should be drawn. If these just seem like a lot of random numbers and letters, that’s fine. We won’t be working with them but it’s good to know what they’re there for.
{% c-line %}style=“”{% c-line-end %} – Inline styles are included with the path. I’ve put them all on individual lines to make this a little easier to read, but we’ll be working more with them soon.
3. Add a CSS class to the icon
To break this down simply, a class can be applied to multiple icons, while an id can only belong to one icon on the page.
Currently our icon has an id, which is great. This means we can select that icon at any time and change it specifically. We’ll leave it there, but for the purposes of this example, we’ll be adding and using a class.
I’ve given this icon a class of {% c-line %}.ct-icons{% c-line-end %} (to represent Creative Things icons) and an ID of {% c-line %}#icon-camera{% c-line-end %} (starting with icon helps keep things organized).
We can also further cleaned up the HTML by removing a few things we don’t really need:
{% c-line %}data-name="Layer 1" {% c-line-end %}
{% c-line %}xmlns="http://www.w3.org/2000/svg" {% c-line-end %}
The remaining viewBox property is important because it helps contain the icon and keep it fixed to a square box.
5. Move styles to CSS
Now that we’ve cleaned everything up, let’s move the inline styles to CSS to make the icon styles more flexible. You may have a stylesheet for your website already, but for the purposes of this tutorial, I’m going to start a new file with only the icon CSS.
Start by declaring both the {% c-line %}.ct-icons{% c-line-end %} class and {% c-line %}#icon-camera {% c-line-end %} ID. These two will help us style this single icon and future icons added to the page.
You may notice at this point that the icon grows infinitely. We’ll want to adjust that and make sure the icon has a proper container by adding width: to the .ct-icons class in our CSS, as well as copying and pasting the inline styles from the HTML.
6.Make adjustments
Now comes the fun part! Your SVG icon is ready to be altered. Here are a few of the things you can do:
- Adjust the thickness by changing the {% c-line %}stroke-width: ; {% c-line-end %} property.
- Change the color by changing the {% c-line %}stroke: ; {% c-line-end %} property.
- Add a hover state by adding a : {% c-line %}hover {% c-line-end %} selector to {% c-line %}.ct-icons {% c-line-end %}
Remember, any of these changes can be made to either a collection of icons using the class {% c-line %}.ct-icons {% c-line-end %} or specifically this icon using the id {% c-line %}#icon-camera {% c-line-end %}
And there you go! A completely styled SVG fie. We broke down the code into easy to reach bits, simplified the markup, and styled the icon in just a few lines of CSS.
As you can probably imagine, there are a lot of uses for this. Entire sets of icons can be styled quickly and easily with this method. And as I mentioned at the beginning of this article, I’ve update the Creative Things icon set to include highly editable SVG.