How to have a non-blurry logo on the platform

You’ve uploaded your beautiful logo to your Kadanza installation and you’ve noticed that your logo looks blurry. Don’t worry (that rhymes!)

When you upload a logo with exactly the right pixel measurements for the area you want to target, the problem of blurriness can appear. The resolution of the screen and the size of your image is the precise cause.

The image you see on your screen is basically made up of a bunch of tiny pixels that each display a different color regardless of what kind of device you’re using. The resolution of more recent devices is substantially higher than older ones.

If your image is too small for the screen resolution, your browser will try to stretch the image and create more pixels... Which will result in quality loss.

What file should you be using?

This is the million dollar question, and it is not hard to answer. Preferably, you should use an SVG file.

SVG stands for Scalable Vector Graphics. “The SVG file format is a popular tool for displaying two-dimensional graphics, charts, and illustrations on websites. Plus, as a vector file, it can be scaled up or down without losing any of its resolution.”

The SVG format doesn’t have any pixels. Since the blurriness is related to the pixels, we recommend you use your logos in an SVG format. Because SVGs are vector based, they don’t have any pixels inside them and can be used at any scale on any screen without blurriness.

How to make an SVG file

There are several options to make an SVG file. As lo,g as you start from a vector-based file, you can use different tools:

1. Using Adobe Illustrator: since it is a vector-based design tool, it is easy to create or edit vector graphics (read more)
2. Figma: comes with lots of good features to help you to create good websites as well as SVG files (read more)
3. Sketch: there are lots of options to export in an SVG file (read more)

Fallback option: make the logo bigger

If you don't have an svg version available, you can consider enlarging your file. Make sure to enlarge it for at least 100%, so it is twice the size of the frame in which you want to place the image. This should also be done in a design tool. Just make sure your original image is vector-based (or a lot larger than the final file) to be able to scale the file when saving it for web.