SVG, Sketch and inset shadows

When it comes to SVG, I'm a novice. It's one of those aspects of web development I've had on my list to catch up on and have only just got around to it. Better late than never I suppose.

My primary graphics editor has been Sketch for some time now. The interface is quick to learn and the simplicity of creating vector graphics makes SVG creation a doddle.

I've been creating and exporting simple custom vector icons to SVG for a project currently in development and came across an issue yesterday with some icons rendering perfectly well and others rendering horribly pixelated.

As I'm not an SVG geek I was unsure what might be causing the issue. Most icons were fine but two or three appeared like the one above. I opened a good and poor SVG file in Sublime to see if there were any obvious differences. In the poor rendering file, there was some code appearing inside a defs element, whereas the good rendering didn't have anything.

With time not being on my side, I didn't really have time to delve into SVG code to see how to fix it there, so I decided to go back to the source.

I opened two icons up in Sketch and compared how I'd constructed them. Both were made up of simple vector shapes but one glaring difference was that one made use of inset shadows, which happened to be the image which rendered poorly.

In this case, the inset shadow was set with no blur, so with a few extra vector shapes here and there, I was able to achieve the same result without using inset shadows. I exported the file, pushed it to the server and was happy to see the file was now rendering as sharp as I'd expected.

This was a pretty simple solution to my particular problem, but hopefully it may come of use to someone out there. If anyone with much better knowledge of SVG knows alternative ways to solve this issue, I'd love to know more. Catch me on Twitter, or drop me an email at me [at] nocturnalmonkey [dot] com.