Wix is a great platform, but it has many flaws. The only reason I still use it is that I have no choice in the matter. One of the tools it provides is a logo maker, which lets you generate a logo depending on your type of brand. I used it to generate the logo, and noticed an issue. To get my logo in SVG format, which would be ideal, it would cost £34.74. That's a rip-off and I'm not paying £35 for some logo an AI generated. I opted to use the free sample and went along with my day.
That logo is still in use, although I have AI-upscaled it. Unfortuantely, it has some weird artifacts from said upscaling, and the colour bleeding from the low resolution of the sample seems to stand out even more.
This annoyed me, so I decided to make my own vector graphic of the MHT logo.
What Are Vector Graphics
There are 2 types of images; rasters and vectors. Raster formats include PNG, JPEG, GIF, Bitmap, TIFF, and so on. They represent images using a grid of pixels. As such, they look bad when zoomed in and are pretty inefficient at storing images, even with compression algorithms.
SVG is the most popular type of vector graphic. It stores images using XML, defining lines, shapes and so on in that format. As such, all it takes is some basic multiplication to make the image larger, and it doesn't lose any detail. The below graphic should help you out.
Vector graphics work best for simple shapes, however they can also represent complex ones. Good enough for a logo. Incidentally, most companies let you download SVG's of their logos in the Press Center of their website. This lets you do cool things such as change the colours of certain elements, or remove them. Firefox without the fox, anyone?
Editor
In order for me to begin creating an SVG from scratch, I needed an editor. For that, I used Inkscape, the industry standard. It's free and open source, so it should be good, right?
RIGHT?
No. Inkscape's design is horrible. It's unintuitive, even for most basic features, and I nearly died trying to make the new MHT logo.
Okay, it's not that bad. Sure, it's a navigational hellhole, but it's great at what it does.
The "Easy Way"
I began by doing some research. I knew that some utilities would convert PNG's to SVG's by converting the raster data to pixels using machine learning. This went horribly. One result produced strange artifacts which, when deleted, would end up leaving half of the logo missing. I knew I had to do the unthinkable. I had to trace over the logo myself.
Importing
Thankfully, the SVG format is somewhat permissive, and Inkscape allows you to simply import a raster image into its editor.
Now to trace over the logo.
I won't bore you with the details. It took me about half an hour, and the end result was this:
It's almost perfect. However, there are a few weird details.
The point is, for a first-time effort, it's not bad. It won't scale up at a very large size, but that's easily fixable.
Conclusion: My Experience
Inkscape is interesting. On the one hand, it's incredibly poweful and supports a wide variety of use cases. On the other hand, it's difficult to navigate and someone with no experience, like me, will stumble. It's a bit like the Adobe suite of programs in that sense.
Drawing rectangles was simple enough. Lining them up, though? It was a nightmare. Inkscape doesn't seem to have a grid feature, and when I tried to align a rectangle to another, they snapped so that one was just too far apart. I spent far too long typing in co-ordinates to match it up.
The curves were difficult. I had to conduct a friend who knows his way around inkscape, only to be told to use the Bezier curve tool. I searched for said tool, looked it up online, and found that the tool named "Pen Tool" is what I was looking for. Just call it Bezier Curve.
It was all worth it, however, and I have now replaced the MHT logo in the Wix Website Editor.
Comments