Disruptive Diagramming

Strong opinions on SVG, diagramming and CAD.

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

Yi Qian

August 30, 2018

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?

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

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

July 20, 2018 · SVG · Web · Diagramming

You can now use Google Fonts in Vecta

When you’re drawing diagrams or illustrations in Vecta, sometimes you find yourself wanting to use some of your favorite fonts in your drawings. Now you can. Google fonts is now available in Vecta, and you have more than 800 font families to choos...

May 27, 2018 · SVG · Web · PNG

Making SVG easier to use (Why we build Nano)

There are a multitude of ways to embed SVG, each of them fraught with gotchas and compromises. In our quest to make SVG easier to use, we looked at different approaches and this is the story on why we build Nano.

May 26, 2018 · SVG · Web · PNG

Comparing SVG and PNG file sizes

You may have heard that SVG have the lowest size while offering the best quality. Is it true? Why are developers still using srcset and generating PNG @ 1x, 2x and 3x resolution? Can you save any bandwidth with using SVG instead of PNG?

May 25, 2018 · SVG · Web

The best way to embed SVG on HTML (2018)

You've probably came across various ways to embed SVG in HTML, but with the latest browser and technology updates, do we still need an <object> tag or can we use <img> instead? What are their pros and cons and how do they compare?

May 08, 2018 · SVG · Web

How Nano compresses SVG

Wanted to know how Nano compresses SVG? Of course you do, so let's have a look at the long list of techniques we used to compress your SVG.

May 03, 2018 · SVG · Diagramming · Web

How we ate our own dog food and used ONLY SVG on our website

It all began when we have a small problem, we wanted a small icon on our Google signup button, everything looks perfect, except when we view our website on high resolution or retina displays, and began to see pixelation:

September 19, 2017 · Diagramming

How to save more time using Vecta's color palette

How can we have a color palette that helps YOU save time? What colors do you use most and what colors can help you to be most productive? A behind the scenes look of how we made the best SVG editor online.

June 30, 2017 · SVG · Diagramming · Web

A guide to getting sharp and crisp SVG images on screen

Have you created any images lately that does not seem to be as sharp as you would like? Are you constantly adjusting your SVG coordinates to ensure your images are sharp?

February 25, 2017 · SVG · Diagramming · Collaboration

Talking about complex work

Some teams work on things more complex than others, and to talk about it isn't any easier than the work itself.