実践的な制作ワークフロー
SVGバッジを二つ置いたときの重複IDを修正する
SVGバッジは単独では正しくても、コピーを横に置くと色や切り抜きが変わることがあります。グラデーションやクリップパスのIDが重複すると、ページ内の参照が曖昧になります。
Ciyoに架空のCedar Cupのバッジを二つ作り、意図的に誤った組と修正した組を用意するよう頼みました。修正版は図形を維持し、IDの接頭辞を分けています。編集できる例で、ブラウザ内の両方を確認できます。
IDと参照を一つの仕組みとして確認する
IDは文書内の要素を識別します。SVGのIDには一意性が必要です。同じHTMLページにインラインSVGのルートが二つあっても、この規則の一般的な例外にはなりません。
グラデーション、クリップパス、マスク、フィルターなどの名前付き定義を洗い出します。次にurl(#...)、hrefのフラグメント、アクセシビリティの参照を含めて全参照を集めます。定義だけを改名すると、衝突が参照先の欠落に変わることがあります。
各インスタンスに明確な接頭辞を付ける
最初のバッジはcedar-a-gradientとcedar-a-clip、次のバッジはcedar-b-gradientとcedar-b-clipを使い、それぞれ自分の定義を参照します。再利用するコンポーネントは、毎回同じ接頭辞を固定せず、各インスタンスに安定した固有の接頭辞を作るべきです。
名前を直す間は絵を変えません。比較しやすくなり、見た目の再設計で本来の参照問題を隠す危険を減らせます。
| インスタンス | グラデーション | クリップ |
|---|---|---|
| A | cedar-a-gradient | cedar-a-clip |
| B | cedar-b-gradient | cedar-b-clip |
Ciyoに比較とソースを依頼する
独立したプロジェクトで、誤った組と修正済みのインラインSVGの組を依頼します。誤った部分は明示し、完成したコンポーネントと混同されないようにします。PNGプレビューに加え、最終HTMLと単独SVGの完全なコードも求めます。
実際のセッションではPNGプレビューをボードに置けましたが、HTMLやSVGのダウンロードは用意されませんでした。返信へ全ソースを貼るよう頼み、それを下のリンクの例として保存しました。同じ制限がある場合は、この受け渡し方を使えます。
架空のCedar Cup向けに、SVGの重複IDを示す実用的な例を作ってください。コードツールだけを使い、有料の画像・動画生成は使わないでください。異なるグラデーションとクリップパスを使った二つのインラインSVGバッジを横に並べるダウンロード可能なHTMLを納品してください。文書全体で固有のID cedar-a-gradient、cedar-a-clip、cedar-b-gradient、cedar-b-clipを使ってください。両SVGはviewBox="0 0 120 120"とし、160pxで表示してください。IDを再使用する誤った比較を明示し、その後に修正した組と文章のチェックリストを置いてください。修正済みの単独SVGファイルも二つ納品してください。修正した組のPNGプレビューをキャンバスへ追加してください。誤った組と修正した組の実際のSVG図形は同じままにしてください。IDの一意性と全url(#...)参照をプログラムで検査してください。検査した内容を正確に説明し、ダウンロードリンクを示してください。架空のWebコンポーネントの例であり、性能ベンチマークではありません。最終の組を見てソースを残す
最終キャンバスには修正済みのプレビューが一つあり、緑の円形バッジと琥珀色の六角形バッジを示します。最初のプレビューはブランド文字が切れていたため、エージェントが絵を上へ移し、最終図形を確認して古いプレビューを削除しました。比較する両方の組は、その最終図形を使っています。
リソースをコンポーネントごとの接頭辞で分ける
貼り付けられたソースを保存し、意図的に誤った部分とは分けて修正版を検査しました。修正した組には一意の定義IDが四つ、リソース参照が四つあり、それぞれ自分のSVG内で解決されます。説明文をマークアップとして検査しないでください。
二つのコピーがあるページで試す
HTMLの例をブラウザで開き、明示された二組を比べます。単独の描画だけでは、二つのインラインSVGが同じ文書を共有したときの挙動は確認できません。意図的な重複IDは説明用の誤った部分だけに限定します。
保存したページは別途Chromiumでも確認しました。本番コンポーネントでは、対応する各ブラウザと、最適化ツールがIDを書き換えた後で繰り返し検査します。三つ目を追加して順番を変え、参照が引き続き正しく解決されるか確認してください。
よくある質問
SVGのルートが違えば重複IDは安全ですか？
一つの文書のインラインSVGでそれに頼らないでください。各インスタンスの定義IDを固有にし、参照も更新します。
グラデーションだけを改名すればよいですか？
そのグラデーションを使うすべての参照も更新し、クリップパスやマスクなど他の名前付き定義も調べます。
ダウンロードページの一部がわざと不正なのはなぜですか？
明示した誤った組で問題を示しています。再利用できる例は修正した組だけです。
繰り返すSVGコンポーネントを一緒に確認する
まずCiyoで検証済みの例を一つ作りましょう。元のファイルを残し、自分のプロジェクトで使う前に書き出した結果を確認してください。