SVG作品の内側の空きを残す 輪郭を描き直す前に塗り方を確かめる

SVG作品の中央や内側に残した空きが、Webの作品紹介では塗られて見える。そんなときは、輪郭を描き直す前に、内側を空ける原指定と掲載側の指定を照合します。

同じ輪郭・色・大きさでも、内外の塗り分けが変わると、空けた領域まで塗られることがあります。ここでは、原作品を保ちながら掲載条件を確かめ、編集者へ渡す資料をそろえる例を紹介します。

原作品の全景と、残したい二つの空きをそろえる

自主制作のデジタル作品『ふたつの抜け道』完成版1.0を使います。原寸は900×700。紺の輪、赤茶の四角、下を通る金茶の線、右下の青緑の小さな円を、淡い地色の上に配置した作品です。

完成原文には、残したい空きを次のように記しています。

紺の輪の中央と、赤茶の四角の内側を空けています。二つの空きから、地の淡い色が見えます。下を通る金茶の線と、右下の青緑の小さな円を添えて、輪郭と空きを一つの絵にしました。

原SVG、原題と版、基準全景、この原文を一組にします。空きの位置を言葉と画像で対応させると、掲載後に確かめる箇所が定まります。比較前の原作品と解説も、この組を見返すための資料です。

同じ輪郭で、内側の塗り分けだけを比べる

同じ原SVGを各450×350で表示しました。輪郭の経路・向き・座標、色、不透明度、背景、表示寸法と比率、要素の順序、線幅をそろえ、二つの形を包む内外の塗り分け指定だけを変えています。

輪郭の座標が同じことと、どの領域が塗られるかは、別に確認する必要があります。この作品では、原指定を保持した側で、円とひし形の空きが基準全景に対応しました。

原指定はevenodd、比較に使ったもう一方はnonzeroです。どちらもSVGで有効な塗り分け規則で、選ぶ指定は経路の作りと作品の意図によります。指定の考え方はSVG2の塗り分け規則でも確認できます。

輪郭を変える編集と、原指定を残す掲載調整を分ける

今回の比較では、輪郭を削ったり、空きへ背景色を重ねたりする原稿変更を行わず、原指定に合わせた側で二つの空きを残せました。原図を保ちたい場合は、このように原全景と掲載面を照合してから、調整する範囲を決めます。

輪郭を変更する依頼では、変えたい形と箇所、その変更を原作品へ残すかどうかを確認します。原指定を保つ掲載調整では、原SVGを保存したまま、掲載側で引き継ぐ指定と確認する画面を決めます。

この作品の空きを残す指定を、別の作品へ一律に当てはめることはできません。内側を塗ることが完成形に含まれる作品では、その原意図を基準にします。

空きの位置と掲載先を、編集者へ一組で渡す

作品紹介Webを相談するときは、次の資料をそろえます。

• 完成した原SVGと、原題・版。
• 基準となる作品全景と、確定した解説原文。
• 残したい空きの位置と、原作品の塗り分け指定。この例では紺の中央の円と赤茶の内側のひし形。
• 実際に載せるページと予定寸法、原全景へ対応させた表示見本。
• どの環境・表示条件で、誰が原作品との対応を確認するか。

原SVGの受付、既存コードの調整、画像への書き出し、掲載編集、費用、公開・更新の担当範囲は、掲載先の状況に合わせて個別に確認します。原作品で残したい箇所と掲載後の確認範囲を、先に具体的にしておくと相談を進めやすくなります。