Vector art, SVG code and all the things I have learned using them for website design

Vector art graphics aka digital design in my idea is a form of art and SVG code is underused in the website design. Photography will always be more relatable to us, but vector art is great for attention grabbing web design. What’s more it might be an image for us but for the computer it’s a code which means we get a better output at any size of the screen. Though keep in mind like any code it can be a little fussy and one more thing to know – different browsers and different software see the same picture differently, just like us human beings look at art very individually. 

I gave a lot of love to my own vector art based website at LuAru Studio. So, imagine my surprise when I created those lovely vector graphics for my website, uploaded them and rejoiced in the way they came out only to find that some browsers, in particular Firefox didn’t see my art my way. Well, more particularly like you can see in the image, it was distorted in weird ways. 

Firefox is a developer’s friend

At first, I thought that there must be some issue with WordPress (I was already having other things going on at the same time), and so I was searching for the answer in the wrong spot. Then I tried googling the issue but whenever there was “SVG”, there was always a word “icon” next to it and that just didn’t represent my issues at all. I couldn’t find what was wrong with my image. Now as I said I was a little stressed out already because of the web speed performance problems, so I didn’t have time to sit back and think what the real issue might be. Also, the images were fine in Illustrator and on Chrome, Safari, even IE. So, I thought it must be Firefox’s problem. But in reality, Firefox was the only one who didn’t compliment me just for the sake of it, it actually like a real friend pointed out what wasn’t working.

Just a side note, I heard from a lot of developers that Firefox’s debugging tool is one of the best, sometimes even better than Chrome.

How to debug an SVG image

Now that I had no idea what was wrong, all I could think of was to check inside of the image, so, I opened the image in a separate window and got a debugging tool, SVG is a pure code after all. And I was quick to find that when I inspect those distorted elements, they come up into specific path tags. I quickly opened my VSCode and looked if my original.svg file also had that path on. Once I found the exact match, I went back to the browser and selected “Delete Node” with the right click. In an instant the distortion was gone. Imagine my relief there and then.

I repeated the process with all the protruding lines at the same time deleting them from the original file on my computer. And my image was fine once again.

I should point out that I haven’t thought of opening the original.svg on the computer right that moment. If I had, I would have found that once in Illustrator original.svg actually shows those distortions that then can be deleted manually. But if you don’t have access to the visual editing software, fixing the code in your editor also works. 

It’s a tedious work but I have no explanation why that distortion happened in the first place. The original.ai – illustrator file that I created the vector in didn’t have those distortions they only happened once the file was exported as SVG. But it must have been something in the illustrator that didn’t connect correctly. It’s also so weird that only Firefox picked that up. 

My idea with this post is to show you all the different ways SVG can be edited and how helpful it is when you can use debugging tools on a graphic image and see on the spot what isn’t working.

I am happy to say that images were fixed, all that I was left to do now was to optimise the rest of the website. It was coming up with bugs since installing a caching plugin. You can read more about the process in this post here.

I hope you learned something valuable here. Let me know if you are having similar issues, maybe I can help you with my own expertise, or just check out my portfolio designs to see more of what I do.  

DISCLAIMER: everything I have written here is my own experience and opinion. I don’t advertise nor badmouth any of the names mentioned. It’s just what I went through trying to optimise my website, it’s your right to have your own opinion about any of the aforementioned brands.