SVG’s are great. And not super complex. But over the last couple of years I’ve picked up a few tips that made my SVG’s look better.
1. Put all icons on a shared size background
Chances are that you’ve downloaded an icon pack like Material Icons at some point. If you ever open one of these icons in Sketch you’ll see that it sits on a 24px by 24px background.
I used to think this was super annoying. It caused problems with alignment and I didn’t like this implicit box around the icon. But it turns out there is a meaning behind the madness.
SVG icons can have many different shapes. Some are wide, some are tall. By using a common size background it makes it easy to resize the icons without any issues. It ensures that all icons are scaled properly.
Let’s say that your design says that all icons should be 20px wide. The first icon you use is wide and it looks fine in the design. But the next icon is more tall than wide, and now you run into problems. The tall icon will be 20px wide but a lot taller than the other icon. It will scale differently and look bigger.
2. Convert text to outlines
You’ve just created a new logo for your side project. It has the company name and a custom shape next to it. It’s super cool. You export it as an SVG and put it on your website. But it doesn’t look right. The brand new font you used is gone and it looks like Times New Roman.
I’ve made this mistake countless times. The problem is that the SVG uses a text element. This text element is using a font. This problem will never occur if you use a standard web font. But if you use a custom font and don’t import it on the website then it won’t work.
The danger with this is that you might not notice until you deploy to a server. Since you designed the logo on your own machine you most likely have that font installed locally. But it’s not installed on the server.
There are several ways to avoid this issue. The simplest one is including the font on the website. This can be a lot of extra bandwidth and if you aren’t using the font in other parts of the website I don’t recommend this approach.
A better approach in my opinion is converting the text to a path. This can be done in any vector design app like Illustrator or Sketch.
Just make sure to keep a copy of the logo with the original text in case you ever have to adjust the text styles or the text itself.
3. Use icons from the same icon pack
This is more of a design tip than technical advice. In the past I used to go on FlatIcon and find all icons individually. The problem with this is that they are all designed in different styles. They vary in stroke, shape and other small design elements. This leads to an inconsistent and confusing design.
Now I always pick an icon pack and make sure to only use icons from that pack. This means sometimes compromising about finding the perfect icon if it’s not already in that pack. I think this trade off is worth it.
Conclusion
These are some of the small gotchas I’ve learned about SVG’s in the last few years. It might seem obvious to you but I never thought about any of these things before they became an issue.
Top comments (0)