【小技】SVGのレンダリングモード

4DのSVGレンダリングエンジンは，テキストや図形の描画モードを指定することができます。

描画モード

SVGはベクトル図形なので，ビットマップのようなラスター画像のように，拡大しても「ドット絵」のように画質が粗くならない，という特長があります。また，曲線・斜め線・極細線などのエッジがより滑らかで「自然に」表示するため，アンチエイリアスと呼ばれる処理が施されます。アンチエイリアスは，拡大・縮小された画像を「きれいに」表示する点で有用ですが，水平線や垂直線の場合，かえって境界がぼやけてしまうこともあります。また，いくらか余計にCPUパワーを割くことも必要です。それで，アンチエイリアスをできるだけ使用する，まったく使用しない，条件付きで使用する，といった描画モードをSVGレンダリングエンジンに対して指定することができるようになっています。

オプション一覧

テキスト（text, textArea）

text-rendering
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering
有効な値: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

図形（rect, ellipse, circle, line, polyline, polygon, path）

shape-rendering
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering
有効な値: auto | optimizeSpeed | crispEdges | geometricPrecision | inherit

画像（image）

image-rendering
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/image-rendering
有効な値: auto | optimizeSpeed | optimizeQuality | inherit

4Dでは，いずれの場合も"auto"は"optimizeSpeed"と同じであり，アンチエイリアスを使用しないという実装です。

特に気をつけたいのは，shape-renderingのcrispEdgesです。これは，直線にはアンチエイリアスを使用しないという意味で，ピクセルにまたがるような直線の座標位置と幅は，必ず割り切れる値になります。結果的に直線や長方形のエッジはシャープに表示されますが，位置や幅には1ピクセル以下の誤差が生じることになります。また，1ピクセル以下の線については，表示が完全に省略される可能性もあります。

以前に公開したバーコード作成コンポーネントおよびバーコード作成プラグインは，図形の描画モードにcrispEdgesを使用していました。MAXICODE以外のバーコードは，いずれも直線や長方形の集合であり，エッジアンチエイリアスを図形に適用する必要はない，と考えたからです。しかし，その場合，フォームオブジェクトの表示オプションが「スケーリング（プロポーショナル）」などに設定されていると，幅や位置が割り切れない線が完全に省略されてしまい，バーコードとして読み取ることができません。印刷はディスプレイよりもずっとDPIが高いものですが，レンダリングの時点で省略されたエンチエイリアスが印刷で復活することはないので，いわば「低画質のイメージで高画質で出力する」ような結果になってしまいます。それで，ソースコードを修正し，図形の描画モードcrispEdgesをやめることにしました。修正により，フォームオブジェクトの表示オプションがどうであっても，極細線が出力されるようになりました。

https://github.com/miyako/4d-plugin-zint
https://github.com/miyako/4d-component-barcode

補足情報

上記コンポーネントおよびプラグインは，いずれもSVG形式のバーコード画像を作成するためのものです。コンポーネントは4Dランゲージだけで記述されており，外部ライブラリには依存しませんが，対応バーコードが限られています。いわゆるJANコードは「EAN13」という名称でサポートされています。プラグインのほうは，ZINTというライブラリを使用しており，対応バーコードが豊富です。いわゆるJANコードは「EANX」という名称でサポートされています。