Your Feature Presentation
JessyInk
Using Inkscape with the JessyInk add-on helps you to create graphically appealing presentations that can be run in a web browser and are indexable by search engines.
Giving presentations is a regular part of life at many jobs. For this task, Linux fans often choose LibreOffice Impress, which is installed by default in most distributions. In many cases, this will meet your needs and be relatively easy to use. But what if you want more than the options available in LibreOffice? The potential alternatives include LaTeX Beamer [1] or Impress.js [2]. However, these do not rely on the WYSIWYG principle, and they require some know-how. For this author, there is only one solution. I design my talks with my favorite graphics program, Inkscape [3].
Since the Inkscape software stores files in SVG format, they can be easily viewed in a web browser. To turn a collection of SVGs into a presentation with the usual functions, a little JavaScript is all you need. This may sound complicated, but it is not. Inkscape comes with an extension called JessyInk that is designed for precisely this purpose. Using this extension has other positive aspects. If you want, you can simply upload the presentation to a web server and present it at any location, provided you have Internet access. Search engines can index the text, and the slides can be reused. It's easy once you have familiarized yourself with the workflow, which is very different from that in office suites, and the results will make your presentation stand out from the PowerPoint crowd.
Master Slide
In this article, I'll show how to create a presentation using Inkscape, starting with how to create a master slide with a custom background. Any task in Inkscape always starts with the document settings. Since many projectors do not support the widescreen format, it is best to select the 4:3 format by opening Document Properties… (Ctrl+Shift+D) in the File menu and entering 1024 for Width and 768 in the field for Height. For Units, select the px option. Check the Border on top of drawing box. This option ensures that the document border is always displayed above the drawing. The border shadow, on the other hand, irritates many users, so it is best to turn it off.
Now select the Create Rectangles and Squares tool (F4 or R) and draw a rectangle that runs across the entire document. It can protrude a little on all sides. Since Inkscape always draws with the settings last selected for fill and outline, you might not see a rectangle now – don't panic, it's there.
The next step is to fill the rectangle with a color. The easiest way to do this is to click on the corresponding color on the palette at the bottom of the program window. For an appealing design and good contrast, select 90% gray right next to black. Since monochrome areas are boring, let's convert the fill to a gradient.
Press Ctrl+F1 to activate the gradient tool and then select a radial gradient in the tool settings, which are now visible. A simple double-click on the rectangle applies the fill using the alpha channel. Use the Shift+R shortcut to reverse the fill process (Figure 1).
Now click on the small circle of the gradient display. When enabled, the color of the element changes from white to blue. Then you can choose a color again – in the example I have used 70% gray. This makes the gradient fade into the background, but the area looks more lively (Figure 2).

Background
For the final touch, use Ctrl+I to import the Inkscape logo [4]. Beginning with version 1.0, when importing SVG files, the program displays a dialog that shows how Inkscape will process the imported graphic. You don't want to link or embed the SVG, but instead include the graphic as an editable object in the current file. It can then be modified directly.
The graphic always appears at the mouse pointer position when imported into the document, and elements of the graphic are grouped. Once the logo has made it into your rectangle, move it to a free space on the drawing area. You can use Ctrl+Shift+G to ungroup the objects, creating three path objects. In the next step you want to select the two white objects. To do this, press F1 to activate the selection tool and click on the two objects one after the other while holding down the Shift key.
Use Ctrl++ (a plus sign) to combine the two path objects into one; they will disappear in the background. Then use Shift to select the remaining path object and press Ctrl+- (a minus sign) to perform the difference operation. The white path object is thus subtracted from the black one; the previously white parts now appear transparent (Figure 3). These Boolean operations are needed time and time again when working with Inkscape, so you need to understand them.

Now drag the logo onto the document and resize it. Scale the logo uniformly to the full size of the workspace. To scale it proportionally, hold down Ctrl. To make the logo a little more subtle, adjust the visibility of the object.
Inkscape offers two ways to do this: via the visibility of the object, which can also be applied to groups, or via the fill color's alpha channel. In our case, both ways work, but it is recommended to work with object visibility only. You should only use the alpha channel when you really need it, such as for gradients with transparency.
To reduce the object transparency, you will find a field with the identifier O: at the bottom left of the program window. You can adjust the percentage value to between 20 and 30.
This concludes the work on the master slide. Save the graphic and check the results in a browser. It renders the graphic starting at the top left of the window without scaling or centering it to the actual size. JavaScript will do this for us later on, as soon as you convert the graphic into a presentation with JessyInk.
JessyInk
To convert the graphic, go to the Inkscape Extensions | JessyInk | Install/Update… menu and start the integration of the JavaScript module by clicking on Apply. The tool may display warnings, but you can usually ignore them.
Then save the document again and call the SVG file in the web browser again. This will now scale the graphic to the size of the browser window and display it in the center. But that is not all: Press I and JessyInk shows all slides in an overview. Press D to activate a drawing mode that lets you paint on the graphic.
Back to the master slide. The task is to convert the background we just created into a master. To do this, open the Layers dialog via Layer | Layers… and rename the existing Layer 1 to master_slide. After that, you call the JessyInk extension again, but now select the Master slide… option from the menu. In the dialog, enter the name of the layer again and accept the change by clicking on Apply. You have now created your master slide, and it will automatically appear on all other slides in the background. To avoid accidentally editing the layer, lock it by clicking on the padlock icon.
JessyInk supports two types of presentations: the page-based presentation, which you will be familiar with from LibreOffice Impress or Microsoft Office, and the view-based presentation, which I will discuss in more detail later.
To create a new slide, you only need to add a layer in the Layers dialog. The order determines the place in the presentation. For this example, I will now create another layer from the Layers dialog, which will sit on top of the master slide.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Direct Download
Read full article as PDF:
Price $2.95
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Find SysAdmin Jobs
News
-
MNT Seeks Financial Backing for New Seven-Inch Linux Laptop
MNT Pocket Reform is a tiny laptop that is modular, upgradable, recyclable, reusable, and ships with Debian Linux.
-
Ubuntu Flatpak Remix Adds Flatpak Support Preinstalled
If you're looking for a version of Ubuntu that includes Flatpak support out of the box, there's one clear option.
-
Gnome 44 Release Candidate Now Available
The Gnome 44 release candidate has officially arrived and adds a few changes into the mix.
-
Flathub Vying to Become the Standard Linux App Store
If the Flathub team has any say in the matter, their product will become the default tool for installing Linux apps in 2023.
-
Debian 12 to Ship with KDE Plasma 5.27
The Debian development team has shifted to the latest version of KDE for their testing branch.
-
Planet Computers Launches ARM-based Linux Desktop PCs
The firm that originally released a line of mobile keyboards has taken a different direction and has developed a new line of out-of-the-box mini Linux desktop computers.
-
Ubuntu No Longer Shipping with Flatpak
In a move that probably won’t come as a shock to many, Ubuntu and all of its official spins will no longer ship with Flatpak installed.
-
openSUSE Leap 15.5 Beta Now Available
The final version of the Leap 15 series of openSUSE is available for beta testing and offers only new software versions.
-
Linux Kernel 6.2 Released with New Hardware Support
Find out what's new in the most recent release from Linus Torvalds and the Linux kernel team.
-
Kubuntu Focus Team Releases New Mini Desktop
The team behind Kubuntu Focus has released a new NX GEN 2 mini desktop PC powered by Linux.