部品を参照するSVG作品をWebへ渡す 原本と掲載用コピーを分ける

原本をそのまま使えるか、部品を含む掲載用コピーが必要か。部品を参照するSVG作品をWebで紹介するときは、原本体と部品を保存したまま、掲載先で作品の全要素が見えるデータを選びます。

単独で開くとそろっている絵が、紹介頁では一部だけ見えなくなることがあります。掲載用を別に用意すると、制作時の原本を残しながら、Webで使うデータと変更した範囲を編集者へ伝えられます。

原本は、本体と部品をひと組で残す

この記事で使う『波の窓』は、デジタル作品です。900×700のSVG本体から、600×450の部品SVGを読み込むつくりにしました。右上の金色の円、三段の青緑の波、白い波頭、濃紺の枠がそろった単独表示を、掲載前の基準として保存しています。

原本はこの二ファイルをひと組で保管し、部品が本体のどこに使われるか分かる状態を残します。掲載用のコピーを作る前に、作品名、全要素が見える基準表示、残したい円や波の配置もそろえます。

同じ掲載面で、原ファイルと別コピーを比べる

今回は一つのブラウザーで、作品をWebの一つの画像として置き、同じ900×700の大きさ、背景、位置で比べました。原本体をそのまま置いた面では、枠と淡い内側の面は残りましたが、金色の円と三段の波、白い波頭は表示されませんでした。部品は存在し、原本の単独表示では全要素を確認しています。

次に、同じ部品を含む別の掲載用コピーを用意しました。本体はコピー側の参照先だけを変え、部品の内容は同じままです。このコピーを同じ掲載面へ置くと、円と波、白い波頭を確認でき、枠・比率・順序も原本の全景に対応していました。

SVGは、単独で開くときとWeb頁の画像として使うときとで、外部ファイルを利用できる条件が異なることがあります。MDNのSVG画像の説明は、画像として使うSVGの外部資源の制限と、データを内部に含める方法を示しています。SVG仕様の表示モードにも、この文脈の違いが記されています。

ここで確認したのは、この一作品と一つの掲載面の結果です。ブラウザーや掲載先が変わる場合は、その場所での表示を確かめます。

原本と掲載用に、別の役割を付けて渡す

今回確認した掲載面には、部品を含むコピーを使う判断ができます。原本体と部品は作品を編集するときに戻る元データとして保存し、掲載用コピーはWebで使うものとして別に渡します。次の三つが区別できる形でそろうと、編集者が掲載材料を選ぶ際にも元の作品へ戻れます。

渡す材料	入れる内容	伝える役割
原本の組	SVG本体と同梱部品	作品を保管・編集する元データ
掲載用コピー	同じ部品を含めた別ファイル	今回確認した掲載面で使う画像
確認メモ	基準全景、掲載先・大きさ、保持要素・変更範囲	原本と掲載用コピーを照合する根拠

『波の窓』で認める変更範囲は、同じ部品を掲載用コピーに含めることです。円・三段の波・白い波頭・枠と、その比率・順序を保持しています。提供された作品を扱う場合も、複製や部品の取り込みを認める範囲が分かる記録を添えます。

作品紹介Webの相談に持ち寄るもの

複写の作品集・図録と作品紹介Webの案内では、作品画像と原稿をもとに、紹介内容や見せ方、公開・更新の範囲を相談できます。

SVG作品では、原本体・同梱部品・基準全景に、載せたい紹介頁、残したい要素、違って見えた箇所を添えてください。部品を含むコピーを用意できる範囲も伝えると、使う材料と編集する範囲を相談しやすくなります。SVGの受付やコード調整が必要な場合は、その対応範囲を個別に確認します。

作品紹介Webについて相談する