svgやdrawioなどのXMLファイルの色をグレースケール化するツールを作りました

はじめに

タイトルの通り、svg や drawio などの XML ファイルの色をグレースケール化するツールを作りました。SVG や CSS のフィルタ機能によるグレースケール化ではなく色自体を変更しています。

仕組みは単純に XML ファイルの中からタグに含まれている #FF0000 #00FF00 #0000FF のような形式の色を示す文字列をグレースケール化の計算式に当てはめて #4C4C4C #959595 #1D1D1D のような文字列に置換しているだけです。さすがに埋め込み画像は変換できないのであしからず。

実装

正規表現で色の部分を抽出し変換するという単純な内容なので説明するまでもないでしょう

grayscale

#!/usr/bin/env perl
use strict;
use warnings;

my $text = join("", <>);
$text =~ s/(<[^>]+>)/convert($1)/ge;
print $text;

sub convert {
    my ($text) = @_;
    $text =~ s/(?<![0-9a-z])[#]([0-9a-f]{6})(?![0-9a-z])/grayscale($1)/gei;
    return $text;
}

sub grayscale {
    my ($hex) = @_;
    my ($r, $g, $b) = map { hex($_) } ($hex =~ /../g);

    my $gray = int(0.299 * $r + 0.587 * $g + 0.114 * $b);
    return sprintf("#%02X%02X%02X", $gray, $gray, $gray);
}

使い方

$ grayscale image.svg

さいごに

元図自体はカラーで作成するが、モノクロのデータを（編集可能な形で）欲しいと思い作りました。最初はそのようなツールを探したのですが意外と見つからなくて困りました。よくよく考えてみればグレースケール化なんて単純な計算なわけで、自分で作ったほうが早かったですね。

ちなみに、画面上での確認は Windows や macOS のアクセシビリティ機能で画面全体をグレースケール化できるので、それを使えばソフトウェアの機能に依存せずにできます。Windows はショートカットキーがあるので切り替えも楽ですね。macOS はショートカットキー割り当てられないのだろうか？