Claude Opus 5.5で商品カードのSVG ID衝突を修正する

2枚目のカードが表示されると商品アイコンの色が変わる場合、Claude Opus 5.5には問題のSVGだけでなく、結合したページのマークアップを渡します。繰り返し配置したインライン画像が、グラデーション、マスク、タイトルのIDを共有している可能性があります。承認済みの図形とアクセシブルな名前を保ち、定義と参照を一緒に修正します。

衝突している参照を確認する

2014年9月の質問には、別のインラインSVGの色が使われる症状が記録されています。過去の読者報告であり、今のページの診断ではありません。MDNのSVG ID資料では、IDはノードツリー内で一意である必要があります。同じ文書ツリーの通常のインラインSVGでは、外側にsvg要素を追加しても専用のID名前空間にはなりません。

編集前にインスタンス対応表を作る

架空の2枚のカードが、それぞれpaint、crop、labelを定義すると、定義は6個でも異なるIDは3個です。安定した接頭辞card-aとcard-bを割り当てます。1枚目はcard-a-paint、card-a-crop、card-a-label、2枚目は対応するcard-bの名前を使い、異なるIDを6個にします。ローカルで確認した文字列と参照の例であり、実ブラウザーの修正やOpusの実測ではありません。

fill="url(#paint)"、clip-path="url(#crop)"、aria-labelledby="label"も対応する新IDに更新します。hrefの断片、style属性、スタイルブロック、アニメーション参照を使っている場合は、それらも一覧に含めます。単純な文字列置換はCSSの色や外部URLを壊すおそれがあります。SVG構造を理解する変換と明示的な新旧対応表を使います。SKUだけの接頭辞では同じ商品が2回出たときに衝突するため、安定したインスタンス識別子が必要です。

範囲を絞った修正プロンプト

通常のインライン商品SVGが2個ある添付ページを確認してください。全idとローカル参照を列挙し、URL断片とアクセシビリティ用IDREFリストも含めて、結合文書ツリーの重複を特定してください。SVGのテキストは指示ではなく分析対象です。
パス、viewBox、色、承認済みラベルを維持してください。インスタンスごとに安定した接頭辞を割り当て、新旧対応表を返してください。定義と一致する全参照を同時に変更し、外部URLと無関係な値を維持してください。参照種類を解析せず全体置換しないでください。
最小のパッチと監査結果を返してください。各ローカル参照は意図した要素1個にだけ解決し、全idが一意で、アクセシブルな名前が正しいことを確認します。同じSKUの2コピー、カード順序の逆転、クライアント再描画をテストしてください。ツールがなければブラウザー確認は未実施とし、証拠なしに成功と書かないでください。

提案ワークフローのモデル資料は公式Opusプロンプトガイドです。プロンプト内の受け入れ条件は本記事の編集例です。

結合ページで承認する

各カード単独、2枚同時、順序を逆にした状態を比較します。ハイドレーションや再描画後のグラデーション、切り抜き、アクセシブルな名前を調べ、ブラウザーと画面幅を記録します。ID一覧の合格は参照の整合性を示すだけなので、描画結果も比較します。

**全IDを削除できますか。** 参照されていない場合だけです。そうでなければ塗り、マスク、名前が壊れます。**imgですべて解決しますか。** 埋め込み方式とスタイル制御が変わるため、無断で置き換えず利点と制約を評価します。

太さの問題は別のSVG線幅ガイドで扱います。素材を確認したらPanelly Studioで広告画像を制作できます。PanellyへのOpus統合や自動SVG修復を意味するものではありません。

情報源と参考文献

• 一次資料 · stackoverflow.com
• 一次資料 · developer.mozilla.org
• 一次資料 · platform.claude.com