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 Material.io 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!
AUTHOR

Neel Singh

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

Creating a diagram?

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

Learn more...

RELATED POSTS

October 28, 2018 · SVG · Web · Fonts

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...

October 25, 2018 · SVG · Web

How to create a customized vector background for your website within 1 minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics? You can now create a vector background like below for yourself in less than 1 minute! ...

August 30, 2018 · SVG · Web · Fonts

5 Great Reasons you should be using Google Fonts to Design SVG Images

Great typography adds to a great design. But oftentimes, getting a decent custom fonts showing up properly on screens comes at a price, either with extra effort or compromising in quality or even both. We experimented to find out the best way t...