August 23, 2018 · SVG · Web · Diagramming · Javascript

Supercharge Vecta’s Functionality with JavaScript Based Plugins

Vecta is more than just a normal browser-based SVG editor, it's especially powerful when you have all the flexibility you need to make the most out of the platform. Plugins can drastically change the way you work, saves time and enhances productivity by eliminating repetitive work and human errors. It's like drawing with superpowers!

With plugins, you can programmatically customize certain functionalities and features to cater to your own needs and usage.

To get started, we test drive Vecta’s plugins firsthand ourselves and did cool stuffs like this:

Welcome to Vecta's plugins
Welcome to Vecta's plugins

And some other useful plugins below. All these plugins are available in your editor by default so feel free to try them out.

1. Material Design and Font Awesome icons

Doing a quick mockup in Vecta? Select from 932 icons from font icons or 1147 icons from Font Awesome icons to import directly into your drawing, and start moving them around!

Access to over thousands of icons use them directly in your drawing
Access to over thousands of icons use them directly in your drawing

2. Sharpener

Want your SVG graphics to always stay sharp and crisp? Forget about tweaking your shapes manually, all you need is a Sharpener! It automatically snap your shapes to the nearest grid to ensure that your shapes are always on grid, so your shapes stay perfectly sharp and crisp even when displayed on websites!

Use sharpener to ensure your shapes are crisp
Use sharpener to ensure your shapes are crisp

3. JSON to Tree

JSON is a great data format especially for a JavaScript developer. However, it's not easy to describe data in JSON format. Wouldn't it be great if you could just drop a JSON file in Vecta and a tree visualization is created. Using this plugin, you could just drag and drop a JSON file and have it converted to tree view for easy navigation, to analyze and validate JSON.

Drag and drop JSON file to get a tree view
Drag and drop JSON file to get a tree view

4. Pie Chart and Line Chart

Easily create pie chart and line chart in Vecta to convey data to your readers in presentations. With a click, your pie chart and line chart will be ready for you to tell your stories!

Use line chart to better visualize your data
Use line chart to better visualize your data
Input your data and get a pie chart done
Input your data and get a pie chart done

5. TSV to table

TSV is widely portable since it is universally accepted by Google Sheets and Excel, and now you can even show your data in Vecta drawing. Drag and drop a TSV file into your drawing and this plugin will automatically tabulate a table for you.

Drag and drop TSV file onto your drawing
Drag and drop TSV file onto your drawing

6. Scatterer

Scatterer randomly distribute shapes to make patterns on your drawing. Sometimes it’s just hard for us to intentionally randomize shapes to make nice patterns, but now with scatterer, you can easily make a simple and pretty background for your website or even desktop wallpaper.

Snowflakes pattern
Snowflakes pattern

Ready to build yourself a tailor-made superpower on Vecta? Here’s our API documentation to help you get started! Share to us what you’ve got, as we’re excited to hear about your badass plugins!

Like the article? Give the author some claps.

Share it with your friends!

Neel Singh

Software Engineer at, always wear black shirt, tech geek.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...


May 14, 2019 · SVG · Web

5 Most common problems faced by SVG users

As SVG adoption increases 100% year-over-year, front end developers and designers like yourself will increasingly be expected to use more and more SVG in websites, all around the world.

March 09, 2019 · SVG · Web · PNG

Improving mobile page speed by 200% using SVG and Nano

According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation t...

January 14, 2019 · SVG · Web

Best practices for SVG SEO in Google Image

With the proliferation of high resolution devices, SVG is definitely the future to serving high res screens with responsive images, at a small file size and low bandwidth. In fact, some sites that we check-in daily like Google, YouTube, Twitter...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.