This quick little guide lets you export and share vector diagrams that can be panned, zoomed and loads custom fonts from the web, like Google Fonts. Perfect for sharing detailed diagrams to people without compromising quality and convenience.

Smarter-Better-Diagrams.md

Sharing Smarter and Better Diagrams

Exporting diagrams and sharing them is just business as usual; especially if it comes in PNG or JPG.

But what if you could make them better?

Well, yeah, you can by exporting them to a vector format like SVG or a PDF document. That way, details are drawn in 2D points and math and won't lose any detail if you zoom in.

But did you know you can make them better by adding a little bit of JS in it? Believe it or not, your browser can render SVG graphics and let you add some must-have quality changes to make it better.

This guide will let you improve your existing SVG diagrams (if you don't have one, consider drawing one out with draw.io) by adding these:

• Load SVGPan and allow panning and zooming with a mouse.
• Loading external fonts (e.g., from Google Fonts)

For a quick demo, download test-diagram.svg below and open it on your web browser. The GitHub preview won't work, so you have to download it as a file.

Instructions

1. Get the JS library in its repository here, or consider using my hosted version of svgpan.js here: https://s3-ap-southeast-1.amazonaws.com/cdn-js-libs/svgpan.js

2. Add the JS library and a <g> object that wraps the entire vector image.

3. Remove width, height and viewBox references in the <svg> block, if it's specified. (These would be added in if you exported your diagram from Draw.io).

Note though, removing height or width may affect panning or scrolling in devices with touchscreens.

4. If you're using custom fonts, you can load them by placing your <style> block between a <defs> block.

With those instructions in mind, you should end up with something like this.

<svg ...>
  <script xlink:href="https://s3-ap-southeast-1.amazonaws.com/cdn-js-libs/svgpan.js"/>
  <g id="viewport" transform="translate(0)">
    <defs>
        <style>
        @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,600,700');
        </style>
    </defs>
    <!-- All vector data goes here -->
  </g>
</svg>

4. Done! Try opening your SVG file in Chrome, Firefox or Safari. You should be able to pan, zoom and load the fonts even if it's not installed on your system.

Tips

As I mentioned above, my favorite tool to draw diagrams is Draw.io. It's great because it's free and it does everything you'd normally need to get things done. It's stable, it has a decent feature set and lets you export in multiple formats, like SVG.

Once you've drawn your diagram, consider selecting what you want exported, then use File -> Export As... -> SVG. Use the default zoom of 100 and select Selection only and Crop.

If you're having a hard time finding where to place <script> and <g>, look for the <defs/> tag; it's almost always exactly at the end of the <svg> tag you're looking for.

test-diagram.svg

A little footnote:

• Yes, this means you need an active internet connection since it'll have to download the library and fonts from the web, but you could always make this work offline by bundling the script along with the SVG file. Just zip them up together.

• The S3 URL comes from me. Yeah, it says cdn-js-libs but it's no CDN at all. I'm just too lazy to apply Cloudfront to host it.