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.
Get the JS library in its repository here, or consider using my hosted version of
Add the JS library and a
<g>object that wraps the entire vector image.
viewBoxreferences in the
<svg>block, if it's specified. (These would be added in if you exported your diagram from Draw.io).
Note though, removing
width may affect panning or scrolling in devices with touchscreens.
- If you're using custom fonts, you can load them by placing your
<style>block between a
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>
- 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.
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
<g>, look for the
<defs/> tag; it's almost always exactly at the end of the
<svg> tag you're looking for.