In the field of graphic design, there are two types of graphic format: pixel and vector. Each type has its own strengths and limitations. If you decide to go with the vector, there are a bunch of handy vector graphic tools to use. Adobe Illustrator is one of the best and most popular one especially in the field of web design for creating SVG.
If you’re looking for an alternative to Illustrator which is free, portable and not too complex; then you must take a look on Mondrian. Let’s dive in and see what this web-app is capable of.
Recommended Reading: A Look Into: Scalable Vector Graphics (SVG)
Getting Started With Mondrian
Mondrian is an online vector-based editor which is simple and easy to use. With its minimalistic and flat UI, you won’t have any difficulties using it. The UI also has a smart feature which only shows the utilities that can be used at that moment.
To get started, we’ll import the available albq.svg design that is already in the web-app itself. Just go to File >> Open….
Basic Editing
For basic vector editing, Mondrian has a range of tools and features to start with. Each tool and some features have their own shortcut key. This is useful if you need easy access without touching the mouse.
There are about 10 tools you can use to manipulate the vector including the pen tool, the crayon tool, scaling and rotation for shape manipulation, typography, zoom and more.
In the menu, you can find some other features for additional assistance like import/export, opening files, copy/paste, undo/redo (through file history API), show the visual history, show the grid, positioning and sharing option.
When you hover over any shape, you can see and edit the path you created.
After you select a shape, a size option window will appear. Here you can define the size, position or thickness of the shape.
Zoom In And Out
Zooming in and out of the design can be achieved in 2 ways. You can use the magnifier glass icon from the tools list. To zoom in, easily hit left click and right click to zoom out. But with this way, you can’t zoom out beyond its actual size. Alternatively, you can use the zoom feature from the menu. You can zoom in and out as much as you want and restore it to the actual size easily.
Unfortunately, when using this feature (at the time of writing), I found a bug. After you zoom in or out and hover the path, it won’t follow the shape’s actual position. To fix this, you can restore it to the actual size. If it still doesn’t work, just reload the page.
Import And Export Files
To import some files, just navigate to File >> Open menu. You can only open/import files in SVG format. As stated in the basic doc, the import feature uses FileReader API. If you want to export the design itself, you can download it as a SVG or PNG (this uses canvas API).
DropBox Sync
One of cool things I found in Mondrian is its ability to sync with Dropbox. With this feature, all of the SVG files in your Dropbox are easily accessible and displayed through the “Open” menu. To activate this, you must firstly sign in to the app. Easily sign up by clicking the top right button.
Once you have signed in, you can navigate to File >> Connect to Dropbox… and allow the app access to your Dropbox.
Final Thought
Besides being free, Mondrian is also open source. If you want to install this app locally and use it offline, head over to the Running the app document to see how. With Mondrian, now you can design any SVG logo or icon whenever and wherever you want.
