Skip to main content

Section 5.7 Creating Images with Inkscape

A strength of PreTeXt is the ability to create diagrams and images with editable source code, embedded alongside your other PreTeXt source material (Subsection 4.13.3, Section 5.8). But sometimes you want, or need, to be more artistic. Inkscape 1  is a great tool for creating images. It ticks all the boxes: open source, mature, cross-platform, standards-compliant. Bethany Llewellyn heped research Inkscape capabilities for this section.

Inkscape's native file format is Scalable Vector Graphics (SVG). As the name suggests, this translates into excellent support for vector graphics. (See Subsection 4.13.1 and Subsection 4.13.2 for the distinction.) Why use Inkscape?

  • SVG files are small and scale smoothly when you zoom in on a web page. So this format is our top choice for how images are realized in the HTML output. They will also work well in formats based on HTML, such as EPUB.

  • The SVG format is how Inkscape works with images internally. The file format it calls “Inkscape SVG” is valid SVG, along with additional information to make editing better and/or easier. So any author may come back and easily edit an image saved in this format.

  • Inkscape will export easily and efficiently to Portable Document Format (PDF), another vector format. This is our top choice for realizing images in output, which will become print or PDF output.

  • SVG is an XML format, just like PreTeXt.

When would you use Inkscape?

  • Your image is more free-form and artistic than what a source language like TikZ or Asymptote will provide, and you do not need to embed any mathematical symbols.

  • You do not want to learn some new source language (there is a significant learning curve for most of these).

  • You want to annotate screenshots (see List 5.7.1).

Note that when you save an image as SVG from within Inkscape, you have two choices: “Plain SVG” and “Inkscape SVG”. The latter contains additions to the former which make subsequent editing better and/or easier. So, you can choose to use “Plain” as the format used for your HTML output, and it will be smaller and provide great performance. But you can also make an “Inkscape” version of the same name, and distribute it with your source files in a different directory, so you and others can edit it easily later.

List 5.7.1. Annotated Screenshot

Suppose you want to include a screenshot of some application, and point out some aspect of it.

  1. View the application on the highest-resolution monitor you can get your hands on. Not a laptop and not a phone.

  2. Zoom in, so the area of interest fills as much of the screen as possible. You are trying to capture as many pixels as possible.

  3. Use a screen-capture tool that allows you to save the result as Portable Network Graphics (PNG). This is a lossless format, and you may be able to elect a high level of compression as part of the file-saving process.

  4. The only raster format explicitly supported by Inkscape is PNG. So you can import the screenshot into Inkscape, and use the tools there to add arrows, red ovals, etc. to highlight key parts of the image.

  5. Save the result as PNG, since it already has a significant raster component, for use in HTML conversions. And save again as PDF for use in print and PDF output.