In this post we will review Vectr, a free, web-based vector drawing application. Designers tend to have very strong feelings about their tools. Ask any icon designer or illustrator which vector authoring app they prefer and you will probably get a very passionate reply, not just about the product but also about its makers. This passionate view of one’s tools, however, can occasionally cause us to miss a great opportunity to make our lives easier or to miss a diamond-in-the-rough whose future we have an opportunity to help shape. We believe Vectr offers users one such opportunity.
Iconfinder has published a few vector software reviews over the past few years and we’ve learned a lot about the different software offerings, how to review software in a way that is useful, and some lessons about how not to review software as well. The main thing we have learned is that nobody really cares about our opinions – and that is as it should be. So rather than tell you what we like or don’t like and why you should or shouldn’t give Vectr a try, we decided to learn the software, make some icons, and to write this post more as a roadmap of how Vectr can make their application a top-notch tool for icon designers.
Let’s establish this one key point from the start: We had no intention of evaluating Vectr in terms of how it compares to Adobe Illustrator, Sketch, or Affinity Designer. It is not a fair or even useful comparison. It isn’t those tools and it isn’t intended to compete with those tools – yet. Vectr are trying to create a tool that is accessible nearly anywhere, by anyone, and very easy-to-use. According to Vlad Shvets of Vectr, the basic version of Vectr will always remain free, but their goal is to create a tool that rivals, and even surpasses the bigger players like Adobe Illustrator. But keep in mind, Vectr is a young product and everyone starts somewhere.
For conducting this review, we started out with one basic question: Can Vectr be used to create premium icons that are good enough both technically and aesthetically to sell on Iconfinder? Designers are not interested in a tool that greatly limits them or dictates the designs they can create. The tool must allow one to express one’s creative ideas, not require the designs be dumbed down to fit the tool.
We started with one basic question: Can Vectr be used to create premium icons that are good enough to sell on Iconfinder?
Armed with our evaluation criteria, we downloaded the desktop version Vectr from the Apple Store. We also fired up the web-based version so we could see how well both perform individually and how seamlessly they work together. It was a pleasant surprise to discover that the two versions were nearly indistinguishable and the user experience is essentially identical in both.
The measure of whether or not Vectr is a useful application as far as icon designers are concerned is not whether or not it is better at drawing icons than Adobe Illustrator, Sketch, Affinity Designer, or any other application, for that matter. The question really comes down to: Can I make and sell icons with it? The answer to that question is a clear “Yes” – with some caveats, which will be covered in the remainder of this article.
For this review we aren’t content to create sample icons that look good on the web page in PNG format. We want to create icons that we can actually upload to Iconfinder, meeting the technical requirements of the upload and review process, and that we can sell. Based on these real-world criteria, we did not encounter any significant problems when creating our icon set.
In our article “6 Easy Steps to Better Icon Design” we outlined a typical approach to designing icons. There are some great icon designers who can create amazing hand-drawn icons that don’t follow a grid but for many designers it is easier to use a grid and start with the simplest shapes possible, i.e., circles, rectangles, and triangles, and add essential details from there.
Vectr’s user interface is pretty simple but even still, let’s familiarize ourselves with the interface before going any further with our review.
A. Pages & Layers
B. Size & Positioning
C. Tool bar
E. Edit Panel
Grids & Snapping
Vectr has only a single grid size and does not offer any custom options. However, the development team at Vectr assures me that this is next on the roadmap – a welcome update. Since we are not looking for excuses to not use the application, but rather for a path to bend the tool to our will so we found a work around. We created the basic template using the rectangle shape tool, line segments, and locking the layers for those elements. It was a little more work but the end result is functionally no different from using shapes converted to guides.
The snapping in Vectr is pretty nice. When a point or edge of a shape is aligned to the grid, a highlight appears to show the orientation of the alignment, either horizontal, vertical, or both. When aligning shape elements to the grid, Vectr also highlights the center line when it is aligned. This is a very nice feature. I do wish it “snapped” a little more noticeably but the visual indicators when the cursor, node, or edge is aligned to the grid is very nice. Vlad Shvets, our contact at Vectr has assured us that the snapping is being improved as you read this.
One thing to take note of when zooming in on the Vectr grid is that visually the grid will stay roughly the same size, unlike in Adobe Illustrator where you can zoom in on a pixel-sized grid marker to fill the screen. Whether or not this impacts your work is probably a matter of personal preference.
The Pen Tool
Vectors, regardless what other decorations they may have, are simply nodes and paths so the Pen Tool is the cornerstone of any vector authoring software. Get the Pen Tool right and you can be forgiven a lot of other omissions. Get the Pen Tool wrong and the other bells-and-whistles are not likely to redeem that app. The good news for Vectr is that the Pen Tool is pretty nice. It works pretty much as you’d expect and has a pretty nice feel to it.
Select the Pen Tool from the tools palette just to the left of your work space. Click anywhere on the artboard and drag to create handles for your curves. To close a path simply click on the starting node. This latter behavior is, surprisingly, not ubiquitous in all vector software but it is the most intuitive behavior.
You do not need to have the Pen Tool selected to edit a path once you have closed it. To edit the nodes and curves by double-clicking on the shape. You can remove nodes by clicking on the node to select it, then pressing the Delete key. You can tell when a node is selected because the color will change slightly. I think that Vectr should consider making this visual cue more prominent as some users may have a hard time distinguishing the subtle shade change, but I had no problems with it.
Vectr has direct selection of nodes and smart corners. These two features are not directly related but to access them both you need to double-click on an object. Another area of opportunity for Vectr to win over icon designers would be to add the ability to direct select paths so individual path segments can be deleted. Vectr can also win over icon designers by adding the ability to expand paths.
The Pen Tool in Vectr lacks some more advanced customization features like changing the size of the nodes but overall I found the Pen Tool to be very comfortable to use and easy to draw shapes with. I do wish the snapping of nodes and path handles was stronger, however.
The Shape Tools
Vectr has the standard set of Shape Tools: rectangle, circle, rounded-corner rectangle. Additionally, under the ellipses (…) in the Tool Bar there are many more shapes available as icons you can embed directly in your artwork. Vectr has some basic sizing, rotation, and positioning tools available at the very bottom of the left-hand column. These are sufficient for creating icons as far as I could tell. You can access rounded corners on an object by double-clicking the object. You can round individual corners by clicking the node for the corner or for all corners by selecting the entire object. One feature that Vectr should add is the ability to specify rounded corners numerically. Currently you have to guess the amount of rounding, which is insufficient for some designers.
What would greatly improve the UX for this functionality would be the introduction of:
1. Move to Back and Move to Front commands instead of only moving one layer at a time.
2. The ability to select a target element and Paste in Front or Paste Behind that element in the layer stacking order.
3. The ability to remove sections of paths, thus breaking the path, rather than just removing nodes but leaving the path unbroken.
Vectr’s Pathfinder capabilities are very useful as-is. There is no doubt that more functions can, and probably will, be added but designers should not find them to be greatly limiting. They also have one very nice feature which is that Vectr shows you a preview of each action when you select two or more elements and hover over each action button.
One of the areas where Vectr is most lacking is in aligning elements to one another and to the artboard/page. While the lack of these features is pretty painful, if you are comfortable with the X/Y coordinate system and some fairly simple math, you can still align elements precisely. Or, better yet, if you create your own grid as we did earlier, position it in the center of your page, you can drag elements into place and use Vectr’s snapping and alignment indicators to position elements where you want them.
Fills & Strokes
The Filters Panel in Vectr is really nice and probably the most advanced set of tools in the application. Unlike in many other popular vector editing software products, you can apply multiple backgrounds and multiple strokes to any element. Any of these can be easily turned on or off, changed from solid color to image to radial and linear gradients, and adjust the opacity. You can also drag any filter in the list to change the order in which they appear.
Objects can have multiple strokes with a different width, alignment, and opacity. Additionally, you can set the stroke alignment to center, inside, or outside. You can also add inner and outer shadows as well as set an opacity for the selected object as a whole. Unfortunately there is no option to add rounded end caps, or any other kind of end caps to lines.
The gradients in Vectr are pretty simple to use. Select an object then set the Background in the Filters palette to “Linear Gradient”. To adjust the colors in the gradient, click one of the color points in the gradient spectrum line then click the color selector for the gradient in the Filters palette.
Opportunity for Growth
Now, for the bad news
One thing that we really love about Vectr is that it is free and can run virtually anywhere, even on Chromebook, which makes the barrier of entry for icon designers very low. Our mission is to help designers make a living doing what they love. We mean “all designers” no matter what their country of origin or economic circumstances. The ability to create premium icons to sell, with a free application instead of costly software licenses or subscriptions is very exciting.
And anyone can learn Vectr quickly and easily. Our reviewer, Scott Lewis, had never used Vectr before undertaking this review. He was able to learn the software very nearly completely in about a day. Admittedly Vectr’s feature set is basic but that is not a bad learning curve. Vectr has only the tools you need and we are confident that the answer to our original question, “Can Vectr be used to create premium icons that are good enough technically and aesthetically to sell on Iconfinder” is a very emphatic “YES” … judge for yourself by downloading this free set of Food icons we created with Vectr especially for this review. You can also click on the image below to analyze the original icon files in Vectr.