{"id":22223,"date":"2014-10-15T18:01:06","date_gmt":"2014-10-15T10:01:06","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22223"},"modified":"2022-08-23T18:30:55","modified_gmt":"2022-08-23T10:30:55","slug":"mondrian","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/mondrian\/","title":{"rendered":"Mondrian – Easy-to-use Vector Graphics Editor"},"content":{"rendered":"

In the field of graphic design, there are two types of graphic format: pixel and vector<\/strong>. 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<\/a> to use. Adobe Illustrator is one of the best and most popular ones, especially in the field of web design for creating SVG<\/abbr>.<\/p>\n

If you\u2019re looking for an alternative to Illustrator which is free, portable and not too complex<\/strong>; then you must take a look on Mondrian<\/a>. Let\u2019s dive in and see what this web app is capable of.<\/p>\n

Recommended Reading:<\/strong> A Look Into: Scalable Vector Graphics (SVG)<\/a><\/p>\n

Getting Started With Mondrian<\/h2>\n

Mondrian<\/strong> is an online vector-based editor which is simple and easy to use. With its minimalistic and flat UI, you won\u2019t have any difficulties using it. The UI also has a smart feature<\/strong> which only shows the utilities that can be used at that moment.<\/p>\n

To get started, we\u2019ll import the available albq.svg<\/strong> design that is already in the web-app itself. Just go to File > Open\u2026<\/strong>.<\/p>\n

Basic Editing<\/h3>\n

For basic vector editing, Mondrian has a range of tools and features to start with. Each tool and some features have its own shortcut key<\/strong>. This is useful if you need easy access without touching the mouse.<\/p>\n

There are about 10 tools you can use to manipulate the vector<\/strong>, including the pen tool, the crayon tool, scaling and rotation for shape manipulation, typography, zoom, and more.<\/p>\n

\"mondrian\"<\/figure>\n

In the menu, you can find some other features for additional assistance like import\/export, opening files, copy\/paste, undo\/redo (through file history<\/a> API), show the visual history, show the grid, positioning and sharing option.<\/p>\n

\"mondrian\"<\/figure>\n

When you hover over any shape, you can see and edit the path you created.<\/p>\n

\"mondrian\"<\/figure>\n

After you select a shape, a size option window will appear. Here you can define the size, position or thickness of the shape.<\/p>\n

\"mondrian\"<\/figure>\n

Zoom In And Out<\/h3>\n

Zooming in and out of the design can be achieved in 2 ways. You can use the magnifier glass icon<\/strong> from the tools list. To zoom in, easily hit left and right to zoom out. But in this way, you can\u2019t zoom out beyond its actual size. Alternatively, you can use the zoom feature from the menu<\/strong>. You can zoom in and out as much as you want and restore it to the actual size easily.<\/p>\n

\"mondrian\"<\/figure>\n

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\u2019t follow the shape\u2019s actual position. To fix this, you can restore it to its actual size. If it still doesn\u2019t work, just reload the page.<\/p>\n

\"mondrian\"<\/figure>\n

Import And Export Files<\/h3>\n

To import some files, just navigate to File > Open<\/strong> menu. You can only open\/import files in SVG format. As stated in the basic doc<\/a>, the import feature uses FileReader<\/code> API. If you want to export the design itself, you can download it as an SVG or PNG (this uses canvas<\/code> API).<\/p>\n

\"mondrian\"<\/figure>\n

DropBox Sync<\/h2>\n

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<\/strong> and displayed through the \u201cOpen\u201d menu. To activate this, you must first sign in to the app. Easily sign up by clicking the top right button.<\/p>\n

\"mondrian\"<\/figure>\n

Once you have signed in, you can navigate to File > Connect to Dropbox\u2026<\/strong> and allow the app access to your Dropbox.<\/p>\n

\"mondrian\"<\/figure>\n

Final Thought<\/h2>\n

Besides being free, Mondrian is also open source<\/a>. If you want to install this app locally and use it offline, head over to the Running the app<\/a> document to see how. With Mondrian, you can now design any SVG logo or icon whenever and wherever you want.<\/p>","protected":false},"excerpt":{"rendered":"

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 ones, especially…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3543,3414,871],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nMondrian - Easy-to-use Vector Graphics Editor - Hongkiat<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/mondrian\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mondrian - Easy-to-use Vector Graphics Editor\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/mondrian\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-15T10:01:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-23T10:30:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/mondrian\/tools.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Mondrian – Easy-to-use Vector Graphics Editor\",\"datePublished\":\"2014-10-15T10:01:06+00:00\",\"dateModified\":\"2022-08-23T10:30:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/\"},\"wordCount\":641,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mondrian\\\/tools.jpg\",\"keywords\":[\"Image Tools\",\"toolkit\",\"vector\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/\",\"name\":\"Mondrian - Easy-to-use Vector Graphics Editor - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mondrian\\\/tools.jpg\",\"datePublished\":\"2014-10-15T10:01:06+00:00\",\"dateModified\":\"2022-08-23T10:30:55+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mondrian\\\/tools.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mondrian\\\/tools.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mondrian\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mondrian – Easy-to-use Vector Graphics Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mondrian - Easy-to-use Vector Graphics Editor - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/mondrian\/","og_locale":"en_US","og_type":"article","og_title":"Mondrian - Easy-to-use Vector Graphics Editor","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/mondrian\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-10-15T10:01:06+00:00","article_modified_time":"2022-08-23T10:30:55+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/mondrian\/tools.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Mondrian – Easy-to-use Vector Graphics Editor","datePublished":"2014-10-15T10:01:06+00:00","dateModified":"2022-08-23T10:30:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/"},"wordCount":641,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/mondrian\/tools.jpg","keywords":["Image Tools","toolkit","vector"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/mondrian\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/","url":"https:\/\/www.hongkiat.com\/blog\/mondrian\/","name":"Mondrian - Easy-to-use Vector Graphics Editor - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/mondrian\/tools.jpg","datePublished":"2014-10-15T10:01:06+00:00","dateModified":"2022-08-23T10:30:55+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/mondrian\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/mondrian\/tools.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/mondrian\/tools.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/mondrian\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mondrian – Easy-to-use Vector Graphics Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/s4uxU-mondrian","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=22223"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22223\/revisions"}],"predecessor-version":[{"id":61883,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22223\/revisions\/61883"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=22223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=22223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=22223"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=22223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}