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.

RELATED POSTS

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...

August 29, 2018 · SVG · Web · Illustrator

The Best Way to Export a Web-Ready SVG from Illustrator (2018)

When exporting SVG from Illustrator, you're prompted with many options. So which settings are the best to produce a web-ready SVG?

July 28, 2018 · SVG · Web · Diagramming

Color selection made easy

Found yourself scratching head to pick a professional looking yet interesting color to give a final touch to your drawings? We worked some magic and created a color stencil in Vecta, for everyone who needs good colors laid out in their drawings w...

Sign up for a FREE Vecta account and start
creating your diagram online.

Create a Free Account