Back to main.

Calmcode Shorts

We're very keen to keep calmcode lightweight. That's why we prefer svg's over images.

SVG images are much lighter to download and they will always render nicely because they don't rely on pixels. There have been moments however where we really wanted to draw diagrams in some of our educational content. At times, we've certainly tempted to add images and it's been a dilemma for a while.


But then we learned about It's a website made by Steve Ruiz that gives you a simplified drawing app that can export to svg. It's great!

Save as SVG

You can save the svg in a file, say diagram.svg and with a little bit of markup you'll get a resize-able svg-images that you can use in all of your blogposts.

<img src="diagram.svg" width="100%"/>

You can make simple diagrams like below;

But you can also get very expressive with colors.

And there's also support for simple diagrams.

Note that because these images are svg-images they will also zoom infinitely!


The app really strikes as a nice "just enough" drawing application for most blogs which is why we're promoting it. We're bound to use it more here at calmcode, which is also why we're going to sponsor the project for a few months.

Back to main.