Using SVG icons with your WordPress plugins

When adding a plugin to wordpress.org, you have the ability to provide icons for it. There are 2 sizes, to take into account retina screens – 128×128 pixels and 256×256 pixels. However, I’ve recently noticed that they also allow an SVG icon as well – if you specify that, it will be used in preference to the other.

For years I’ve been making use of very talented designers on Fiverr to make the icons for my plugins but never thought to ask them for SVG files, only PNG. But, as is often the case these days, AI was the answer.

More precisely, the website Vectorizer.ai. This allows you to upload PNG or JPG images and, using AI, it will create an SVG for you. Does it work?

Here’s one of my icons, in the largest resolution that I had is for the original PNG (256×256)…

If I expand that to a much wider width, it gets pixellated quite quickly..

But here’s the SVG that I created with that site…

As you can see, the results are impressive. Being an SVG means that it doesn’t suffer from the pixelation when resized, but it’s also a damn good reproduction of the original too.

So, if you want to use SVGs for your plugins and don’t have anything available to do this, I’d highly recommend the Vectorize site as a rather excellent solution.

Update: Once I’ve created my SVG icon I use the excellent SVGViewer website to optimise it. Simple upload and then click on the optimisation details at the top of the screen before downloading the result.