Image Processing Scripts

These scripts help manage images in the Jekyll site, particularly for removing gray borders that appear when converting SVGZ files (from Wacom stylus drawings) to PNG format.

Scripts

1. process-images.sh

Automatically converts SVGZ files to PNG and removes uniform borders from images.

Features:

  • Converts all SVGZ files to high-quality PNG
  • Removes gray (or any uniform color) borders using ImageMagick’s trim function
  • Preserves original files
  • Creates processed versions in _processed_images subdirectories
  • Also checks existing PNG files for borders
  • Skips specified files that should keep their borders (e.g., StuGantt.png)

Usage:

./scripts/process-images.sh

Requirements:

  • ImageMagick (convert command)
  • librsvg (rsvg-convert command)

Installation:

# Ubuntu/Debian
sudo apt-get install imagemagick librsvg2-bin

# Arch Linux
sudo pacman -S imagemagick librsvg

# macOS
brew install imagemagick librsvg

2. update-image-references.sh

Updates all image references in markdown and HTML files to use the processed (border-free) versions.

Usage:

# Dry run - see what would change
./scripts/update-image-references.sh --dry-run

# Apply changes
./scripts/update-image-references.sh

Workflow

  1. Create your SVGZ files using your Wacom stylus workflow
  2. Run ./scripts/process-images.sh to create border-free versions
  3. Run ./scripts/update-image-references.sh to update all references
  4. Commit both the original and processed images

Example

Before processing:

assets/battcock/
├── gr-qc.svgz          # Original SVGZ with gray border
└── gr-qc.png           # PNG with gray border

After processing:

assets/battcock/
├── gr-qc.svgz          # Original SVGZ (preserved)
├── gr-qc.png           # Original PNG (preserved)
└── _processed_images/
    └── gr-qc.png       # Border-free version

References updated from:

\![image](/assets/battcock/processed/gr-qc.png)

To:

\![image](/assets/battcock/_processed_images/gr-qc.png)

Notes

  • Original files are never modified
  • The trim function removes any border that matches the corner pixel colors
  • A 5% fuzz factor is used to handle slight color variations
  • High-resolution conversion (2000px width) maintains image quality
  • Some files are exempt from processing (like StuGantt.png) because their borders are deliberate
  • To add more exempt files, edit the SKIP_FILES array in process-images.sh EOF < /dev/null