You have been spending hours, perhaps days, perfecting that illustration. Or you have drawn the perfect icon pack and you know it's gonna be a hit. Now, as you sit back in your chair and admire your design for one last time before it meets the world, you get a feeling of great satisfaction.

But now comes the tricky part: exporting. Exporting your work is like packaging a physical product. It means preparing your design for those lucky enough customers to enjoy.

Don't worry. Through the tips in this article, we will help you make the right choices when it comes to the tricky export of your beautiful work.

You realise that your design occupies a lot of space and, as it turns out, the SVG file is huge. A heavy file like that will bring trouble when uploading and downloading from Iconfinder and also when eager customers will want to edit its colours. And you really want to give your customers the best experience.

Usually, SVG files occupy just a few KB. This is because they are simply text files with mathematical data. Sometimes, they can also weigh 2-3 MB as it happens in the case of some more elaborate illustrations.

If you dare to go this nerdy, I dare you to try and open the SVG file into a code editor (for example Atom or Visual Studio).

A simple icon's code will look like this - just a few lines of mathematical data.

For illustrations, there might be a few more lines of code.

But not all SVGs look this beautiful. You sometimes find yourself with a 7MB file that looks like this. There are thousands of lines of code. My code editor definitely doesn't like it.

I know that adding some cool and unusual effects to your icon or illustration can make you feel really creative and powerful. It can really go wrong with some effects like shadows or noise/spray-paint effects.

The illustration below is very pretty!

Yet, the SVG code is infinite. Our colour editor tool cannot open it and that is sad.

And all this trouble is due to the spray paint effect added. What is happening is that every single dot becomes a vector object and adds up to a very heavy file.

This can also happen with some shadow effects.

Sometimes, as unbelievable as it might sound, there are parts of an SVG (vector) file that are not actually vector. This creeps in as image data in the SVG code (an embedded image). You can easily find it if you search for "image".

This has to do with how you are drawing the illustration or icon, so you will have to be mindful of that. Sometimes, you can do the trick and try to run the file through this service to clean up the image data and any other unnecessary data, for that matter.

Sometimes, after you have exported your illustration, you upload it to Iconfinder and you then you can't believe your eyes: it looks so tiny!

Other illustrations look a lot larger. Whyyy?

Well, that is because the artboard of your illustration is much larger than the actual illustration. A small illustration (or icon for that matter) on a large artboard will always result in a small preview. And you really don't want that because customers will not be able to really appreciate your design.

A fitted artboard is always the way to go.

Another nightmare are the clipped edges. If parts of your icon or illustration are placed outside of the artboard, then there will be those clipped edges, ugh!

Here is a tip for exporting in Adobe Illustrator.

If you work with icons in e.g. 24px exporting with 1 decimal might ruin some shapes. You can fix this by increasing the Decimal Places.

Hopefully this article can save you lots of headaches and make exporting as smooth as it can be.