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
-
LibreOffice 7.5 has Arrived and is Loaded with New Features and Improvements
The favorite office suite of the Linux community has a new release that includes some visual refreshing and new features across all modules.
-
The Next Major Release of Elementary OS Has Arrived
It's been over a year since the developers of elementary OS released version 6.1 (Jólnir) but they've finally made their latest release (Horus) available with a renewed focus on the user.
-
KDE Plasma 5.27 Beta Is Ready for Testing
The latest beta iteration of the KDE Plasma desktop is now available and includes some important additions and fixes.
-
Netrunner OS 23 Is Now Available
The latest version of this Linux distribution is now based on Debian Bullseye and is ready for installation and finally hits the KDE 5.20 branch of the desktop.
-
New Linux Distribution Built for Gamers
With a Gnome desktop that offers different layouts and a custom kernel, PikaOS is a great option for gamers of all types.
-
System76 Beefs Up Popular Pangolin Laptop
The darling of open-source-powered laptops and desktops will soon drop a new AMD Ryzen 7-powered version of their popular Pangolin laptop.
-
Nobara Project Is a Modified Version of Fedora with User-Friendly Fixes
If you're looking for a version of Fedora that includes third-party and proprietary packages, look no further than the Nobara Project.
-
Gnome 44 Now Has a Release Date
Gnome 44 will be officially released on March 22, 2023.
-
Nitrux 2.6 Available with Kernel 6.1 and a Major Change
The developers of Nitrux have officially released version 2.6 of their Linux distribution with plenty of new features to excite users.
-
Vanilla OS Initial Release Is Now Available
A stock GNOME experience with on-demand immutability finally sees its first production release.