SVGの描画は予測が難しい
大きなキャンバスサイズで精密な座標を辿ると、描画される線の軌跡は正確で再現性のあるものになります。 しかし、小型キャンバスの限られた座標を使うSVG画像では、線の軌跡が脱線するのか、最終的な画像に「デフォルメ感」が漂います。
これは大変に興味深く、SVGのアイコンを小サイズキャンバスで作る場合は、ある意味で高度な技術が要求されます。 小型キャンバスで作ると座標の数値が単純化され、SVGコードはコンパクトになるので、ウェブページのアイコンや記号のSVG表示には適しているわけですが。
その様な条件下でより美しい描画を追求すると、SVGの本性がなんとなく判って来ます。 これは匠の技で、ベクトルフォントの制作やデザインに関わる人達は、きっとそういうノウハウを蓄えているのではないかと、私は想像しています。
リンクマークを作る
「LinkCard Editor」は、リンクカードごとにSVGの「 」マークを追加するので、出来るだけ文字数の少ないSVGが欲しいところです。 これは私の課題で、SVGのコンパクトツールの助けを借り、コンパクト化に再挑戦して見ました。
私の経験からですが、大きめのアイコンで美しさに比重を置く場合や、複雑なデザインを表示する場合は「256 ～ 512」ピクセル程度が必要です。
しかし、極力データ量を減らしたい場合は「128」以下でも可能で、「32」ピクセルまで減らしても、運が良ければ見栄えの良い画像が得られます。 但しこの領域は描画線のコントロールが困難な場合があり、使えるかどうかはピクセル画によります。 また、SVG変換プログラムの性能も影響がありそうです。
64ピクセルの例
下の左側は「64×64」の点を使ったマークの原画で、これをSVG化して、更にコンパクト処理した結果が右側です。
左の赤で示した部分のカーブが、特に目立って変形されています。 元のピクセル画から、右の描画は推測できるものではありません。 しかしその結果を見て、再び元のピクセル画を修正して、納得できるデザインに近づける事は可能です。 この例は、かなり良い結果になったもののひとつで、SVG画像に立体感があります。
SVG変換について
SVG化は以下のサイトのオンライン変換を利用しています。
このページの操作は、先ず変換したいピクセル画をアップロードして、「output format」に「SVG」を指定します。 通常「Smoothing」は「Normal」を指定しますが、今回は文字数を減らすために「Smooth」を選択しています。 色々と試すと「Smoother」はさすがに変形が強く、「Smooth」は中間といった感じです。
もしSVGの文字数を気にしないなら、ここの設定は「Normal」の一択です。 しかし今回は「Smooth」を指定して「SVG」変換し、更に「Simple SVG」でコードの簡略化（通常の四捨五入処理）をしています。
ハネの妙
少しずつ元のピクセル画を書き直していると、時間の経つのを忘れます。 下は、色々と試作したものですが、SVGの描画が微妙に変化して面白いです。
2個ずつが「元のピクセル画 / SVG」の組み合わせで、最初の赤枠は「32ピクセル」で、残りは「64ピクセル」、最後の1個は「LinkCard Editor ver.4.0」で使用しているものです。
このサイズのSVGでは、デフォルメが強く、線端の「ハネ」が独特です。 また、角が丸められて、カーブが楕円に近付く傾向がある様です。
文字数が少なくてもツボの描画をするSVG がある
以下の左側は「32ピクセル」から作ったSVGで「261文字」、右側は「64ピクセル」から作ったSVGで「312文字」です。（拡大表示の設定をしたSVGの実物です）
右はSVGの文字数が増えて、曲線の描画が精密になった様ですが、「32ピクセル」の描画が決して劣るとは感じません。 この程度の文字数に抑えられれば、CSSコードを駆使した描画に迫りますから、GOODです。
ちなみに、下の「LinkCard Editor ver.4.0」のSVGは371文字です。
「LinkCard Editor」に実装してテストしたのですが、どっちにしても表示サイズが小さく、良さも悪さもいまひとつ判りません。^^;
まあ、納得いくデザインが出来らた、マークを更新しようと考えています。