GPG guide/Graphics Howto

Back to the Translation Guide

Graphics to translate

There are 14 pngs to localize: NOTE: as of v4, there is a 15th image, on the workshops page. It is not listed below yet.

SVG name	PNG name	PNG size  (Width x Height)	Thumbnail
donate.svg	donate.png	160 x 45
gnupg-infographic.svg	full-infographic.png	749 x 2933
infographic.svg	infographic-button.png	253 x 300
join.svg	join.png	160 x 49
adele.svg	section3-try-it-out.png	600 x 425
web-of-trust.svg	section4-web-of-trust.png	600 x 436
identity.svg	section5-01-use-it-well.png	600 x 280
section5-02-use-it-well.svg	section5-02-use-it-well.png	600 x 404
elements.svg	section6-next-steps.png	600 x 365
step1a-install-wizard.svg	step1a-install-wizard.png	600 x 438
step1b-01-tools-addons.svg	step1b-01-tools-addons.png	600 x 438
step1b-02-search.svg	step1b-02-search.png	844 x 575
step1b-03-install.svg	step1b-03-install.png	844 x 575
step2a-01-make-keypair.svg	step2a-01-make-keypair.png	800 x 571
workshop-section1.svg	workshop-section1.png	800 x 571

Thumbnails are made from graphics under CC-BY 4.0 licence (or later) by Journalism++

Fonts

You may need to install the following fonts for a proper rendering:

• Dosis
• Archivo Narrow
• Roboto
• PXL-2000-12-0

The first three are in static.fsf.org/nosvn/enc-dev0/fonts/. Retrieval of PXL-2000 is described in the Pitfalls section.

The installation method depends on the distribution. In Debian/Ubuntu (Gnome), you just need to open one of the font files with the font viewer program, and click the "Install the font" button. The file will be copied to the .fonts/ directory in your $HOME. This has to be repeated for every file and the font will not be available to other users.

A more general method is manual installation, which is described here for Debian/Ubuntu. The location of the system fonts directory may differ in other distributions, but the principle should remain the same. Each font is stored in a specific subdirectory of /usr/share/fonts/; Roboto goes to freetype/, the other 3 to opentype/. After copying them there, you need to update the font database, so that the applications can use them. This is what the fc-cache command is for.

$ sudo su
# cd /usr/share/fonts/truetype
# mkdir roboto
# cp /PATH/TO/Roboto/* roboto/
# cd ../opentype
# mkdir archivo-narrow dosis pxl-2000
# cp /PATH/TO/ArchivoNarrow/* archivo-narrow/
# cp /PATH/TO/Dosis/* dosis/
# cp /PATH/TO/PXL-pixelfont/* pxl-2000/
# su [NORMAL USER]
$ fc-cache -f -v

To edit an SVG and export it to PNG

Edit

• Open the svg in Inkscape (program messages are from the English version).
• Display/Zoom to a convenient size.
• Select the text with the A tool (vertical toolbox) and edit it; adjust the font if needed (T menu, in the horizontal menu bar).
• If the text area takes up too much space and you can't use a narrower font, you can adjust its size:
  • Select the text with the arrow tool at the top of the vertical toolbox (double-click to degroup the image if it is not selected right away).
  • Move the right horizontal scaling arrow (if there is no horizontal arrow on the right side of the text area, it means that you are in the rotation menu; to go back to the scaling menu, click a second time on the text area with the arrow selection tool).
• Save the modified SVG to [...]/enc/static/svg/[LANG]/. To understand why you should save the SVG now and not after exporting to PNG, please read How to avoid leakage of personal information by Inkscape.

Export to PNG

• In the main menu, choose File/Export Bitmap
  • Export area: choose "Drawing".
  • Bitmap size: enter the width of the target PNG. The height of the target will be automatically calculated. If needed, you can change the Export area Height to fit the desired target size.
  • Filename: the complete path to the target PNG (make sure that the directory is [...]/enc/static/img/[LANG]/).

Pitfalls

PXL-2000 font

For some reason, this font was added to the Git repo in June and immediately removed. You can retrieve it by creating a local branch and resetting it to the relevant commit (dated 2014-06-16 21:21:12, with message "Added the pixel font..."), as follows:

Let's assume you are already at the root of the Git repo.

1. Display the history of the static branch.

$ cd static
$ gitk

2. Look for the "Id SHA1" of the relevant commit and write its first 7 digits somewhere. Let's assume they are 1381085 (the Id is probably different in your local repo).

3. Create a new branch (pxl) and check it out.

$ git checkout -b pxl

4. Reset pxl to the relevant commit.

$ git reset --hard 1381085

5. The PXL font is now in the static/fonts directory. Move it to the root of your home directory to make sure it won't disappear when you switch back to the master branch, or install it right away in the same directory as Dosis and ArchivoNarrow (opentype fonts).

elements.svg (section6-next-steps.png)

There is a small white arrow below the "PRIV" key in the svg. You must first ungroup the elements (select the drawing, then Object/Ungroup) before selecting and deleting this white arrow; save, then export (in this order; see "Leakage of personal information by Inkscape" to know why).

infographic.svg (infographic-button.png)

It's a subset of gnupg-infographic.svg which is partially invisible. In fact, infographic.svg is not necessary to make infographic-button.png.

• Open gnupg-infographic.svg with inkscape.
• In the main menu, go to Layer/Layers…
• In the Layer panel, make "botao para site" visible and unlock it.
• Translate the text.
• Save the SVG (you can choose to hide "botao para site" before saving, and unhide it afterwards; saving must be done at this stage if you want to keep the file anonymous, see the next paragraph).
• Select the dark-blue rectangular frame.
• Export the selection to PNG (the size doesn't need to be adjusted).

How to avoid leakage of personal information by Inkscape

If you open gnupg-infographic.svg in a text editor, you will notice lines such as:

• xlink:href="file:///home/[user]/[subdirectory]/image.png"
• inkscape:export-filename="/home/[user]/Documents/[subdirectory]/enc/static/img/[lang]/full-infographic.png"
• sodipodi:docname="gnupg-infographic1.svg"

What are those for?

• "xlink:href" is the URL of a bitmap or other document that was imported with the "Link" option to make this drawing. Linking does exactly what it says, and may leak local path names on which it depends. If the SVG is meant to be published, a better alternative is to use the "Embed" option, which adds all the necessary data to the SVG file itself.
• "inkscape:export-filename" is the local path to a PNG which was exported from this SVG, by you or someone else. Many PNGs can be exported from a single SVG.
• "sodipodi:docname" is the previous name of the SVG.

If you don't want the whole world to know your user name, the structure of your filetree and the previous name of the SVG (who knows, it may contain the name of your pet dinosaur), you can remove the content of inkscape:export-filename and sodipodi:docname. After removing the export-filename, you will not be able to use the File/Save menu entry anymore, but File/Export to Bitmap..., File/Save as..., and File/Save a copy... will work. The latter two are not recommended, however, because they don't preserve the transparency of the background.

Removing the xlink:href URLs is more delicate, because they may be in use. If they are in a layer which is hidden and will not be made visible again (such as a bitmap mockup), the link can be removed by deleting the layer. Otherwise, the document has to be imported again with the Embed option. As it turns out, there is only one of those links in the Email Self-Defense series. It corresponds to a layer of gnupg-infographic.svg named "Bitmap de fundo". This layer is hidden and can be safely deleted.

Examining all the SVGs of a directory may be rather tedious. This little script (named "detect-svg-leakage") will do it for you. The instructions are within the script (lines beginning with #)

#!/bin/sh

# "detect-svg-leakage" detects whether SVG files in the working
# directory have attributes with local path name values, and prints
# such attributes and their values.

# The script (or a soft link to it) should be placed in the directory
# containing the SVG files. It may be run either from the graphical user
# interface (see "anonymize-svg"), or from the command line without argument.
# In both cases, it will examine the SVG files in the directory and will
# print their names, and the attributes whose value may be a local file
# system path or a sensitive file name.

set -e
close_term () {
  printf '\n%s' '*** Close the terminal window or press Return.'; read OK
  test -z "$OK" && exit $1
}

for svg in *.svg; do
  test -s "$svg" \
  || (echo "*** This directory doesn't contain any SVG."; close_term '1')
  printf '\n%s\n\n' "=== $svg"
  perl -Twe 'while (<>) { print "$1\n" if
    m/([\w\-:]+="([\/\.]+|file:).+?"|[\w:]+docname=".+")/i; }' <"$svg";
done
close_term '0'

When it comes to the actual cleaning, "anonymize-svg" may prove convenient. It saves the non-anonymized versions for your own use.

#!/bin/sh

# "anonymize-svg" removes export paths and document names from all the SVG files
# in a directory, saving the original versions.

# The script should be in the same directory as the SVGs. It can be launched from
# the graphical user interface or called from the command line without argument.

# Detailed method:
# - make sure the first line (#!/bin/sh) wasn't lost during copy-pasting;
# - make the script executable (this can usually be done from the contextual
#   menu);
# - place it (or a softlink to it) in the directory containing the SVGs you
#   want to clean;
# - make sure none of the SVGs is open in Inskape;
# - open the SVG directory in the file browser (do not just unfold the parent
#   directory), then double-click on the script or launch it from the contextual
#   menu.

# A terminal will open and list the files which have been cleaned, and a
# subdirectory named saved-svg/ will be created to save the non-anonymized files.
# If the script is run twice in the same directory, backups of the non-anonymized
# files will be made in saved-svg/, but a third run will overwrite them.

set -e
close_term () {
  printf '\n%s' '*** Close the terminal window or press Return.'; read OK
  test -z "$OK" && exit $1
}

[ -d saved-svg ] || mkdir saved-svg
for svg in *.svg; do
  cp -b -S '.bak' "$svg" saved-svg/"$svg" 2>/dev/null \
  || (echo "*** This directory doesn't contain any SVG."; close_term '1')
  sed -i 's,sodipodi:docname="[^"]*",sodipodi:docname="",' "$svg"
  sed -i 's,inkscape:export-filename="[^"]*",inkscape:export-filename="",' "$svg"
  echo $svg
done
close_term '0'

To complete anonymization and avoid further leaks:

• delete any unused layers which might contain linked documents;
• if an external document needs to be imported, prefer the Embed option (the document will have to be embedded in the final version of the SVG anyway, if only for self-sufficiency);
• be sure to save the modifications before exporting to PNG and do not save in the SVG format again after export, when prompted by the Quit dialog;
• and last, but not least, don't forget to remove the backup files (presumably including non-anonymized SVGs) before making the source package.

Help

Feel free to edit the SVGs from the enc/svg/fr/ directory. This may prove useful for infographic.svg (the whole image is in SVG format, extracted from gnupg-infographic.png; the export size doesn't need to be adjusted), and donate.svg or join.svg (the circle can move, which makes it easier to place the text around it; the export size doesn't need to be adjusted).

Back to the Translation Guide