Designing mockups for user interfaces is something I only do occasionally and therefore I’d rather not invest my time, money, and disk space in the industry standard tools such as Adobe XD or Sketch. Instead I’d like to use Inkscape which is my prefered open source tool for editing vectors.

Turns out that Inkscape is capable of making interactive mockups allowing you to simulate a real app with working buttons etc. I discovered this after finding some guy’s tutorial video where he uses the “Interactive Mockup” extension, the only problem is that my version of Inkscape doesn’t have such an extension and I can’t find it on the Offical Inkspace Extensions Page.

I figured out how to get it working but it took a whole load of searching the web because it’s not particularly well documented and most of the info I could find on the technique were over a decade old. The missing piece of the puzzle was found on page 28 of an Independent Linux magazine called Full Circle.

How to make interactive Inkscape mockups

The technique is to add Javascript into the SVG which can listen for button clicks and react by making the relevant part of the SVG visible. You don’t need any plugins or extensions to do this, stock Inkscape is all you need.

To apply a Javascript event onto part of your SVG you must:

  1. Click on the object
  2. Open the Object Properties menu
  3. Expand the Interactivity menu
  4. Add some code into the onClick option

The moveViewbox method doesn’t work for me

My man IT Memo’s video uses the moveViewbox method but I couldn’t get this to work, possibly because I have a different version of Inkscape to what he uses?

// This doesn't work
InkWeb.moveViewbox({fromthis, to: 'id-of-target-screen-here'})

// Error message when using the moveViewbox method
Uncaught ReferenceError: InkWeb is not defined
    onclick file:///home/planetroast/Desktop/mockup.svg:1

Create your own script to hide or show layers

As described in Full Circle Magazine on page 28 of issue 186 (PDF available here), the technique I used was to create a custom script which is added to the document then called using the interactivity menu as mentioned above.

  1. Click ‘File’
  2. Open ‘Document Properties’
  3. Click ‘Scripting’ tab
  4. Click ‘Embedded Scripts’ tab
  5. Click ‘+’ to add a new script
  6. Paste this bad boy in there…
function showLayer(id) {
	const layers = document.querySelectorAll("svg > g[*|groupmode=layer]");
	layers.forEach(layer => layer.style.display = "none");

	const layerToShow = document.querySelector("#" + id);
	layerToShow.style.display = "inline";
}

You’ll now be able to use the script on any object by opening the object properties -> interactivity menu and adding it to the onClick setting.

showLayer("layer2")

Now you can save your SVG, open it up in your browser, and you’ve got interactive mockups.

Last minute gotcha’s

Why mockups in Inkscape are so useful

Why is Inkscape mockups better than using Adobe XD, Sketch, Figma, Invision, Fluid UI, or any of the other UI designer tools?