2018-07-26

sharpパッケージとSVGでのhsl()

このウェブサイトのタッチ・アイコンが壊れていた。どうもSVGからPNGへの変換にsharpパッケージを使うように変えたところで発生したらしい。sharpがSVGでhsl()をサポートしていない(正確にはSVG 1.1までのサポートのため、その仕様で定義済みの色しかサポートしていない)ことが原因だった(バグではない)。SVG側で#rrggbbに変更し、無事修正できた。

ファビコンへのコンバートはうまくいっているように見えたが、こちらも実は線が黒(#000000)になっていたようだ。実際にはhsl(0, 0%, 16%)なので、#292929になっているべきだったが、さすがに目視ではチェックできなかった。こちらも#rrggbbに変更して修正した。

SVGの安定仕様は1.1(2.0はCR)で、それはきちんとサポートしているようなので、イシューは立てづらい。もうちょっと考えよう。

ほぼ最小で確認できるSVGは以下のようなものだ。

<svg xmlns="http://www.w3.org/2000/svg"
  width="100"
  height="100"
  viewport="0 0 100 100">
  <rect width="100"
    height="100"
    x="0"
    y="0"
    style="fill:hsl(0, 0%, 50%)"/>
</svg>

縦横100ピクセルの正方形をhsl(0, 0%, 50%)というグレーで塗りつぶしたものだ。version属性を削除してSVG 2.0として解釈されることを期待しているくらいだ。

PNGに変換するコードはこのような簡単なものだ。特に何もしない。

require("sharp")("test.svg")
  .png()
  .toFile("test.png");

出力されるtest.pngは真っ黒(#000000)になる。

そもそもsharpに乗り換えたのは、Inkscapeのストア版に乗り換えたため、コマンドライン・アプリケーションへのアクセスが難しくなったからだ。ついでにImageMagikからも脱却させたりしたので不満はないが、ストア版アプリでのコマンドラインでの対応はまだまだだなと感じた。EdgeとiTunesしか対応しているのを見かけていない。頑張ってアプリ実行エイリアスを周知してほしい。