チュートリアル
Claude Opus 5.5でSVGアイコンの線の欠けと太さを修正する
Claude Opus 5.5にパスを変更させる前に、座標系、描画範囲、実際に適用される線幅を確認させます。大きな外枠の中で絵が小さい、輪郭が欠ける、線幅が揃わないという現象は別の問題です。すべてを「大きくする」で処理すると原因が見えなくなります。
Claude Opus 5.5にパスを変更させる前に、座標系、描画範囲、実際に適用される線幅を確認させます。大きな外枠の中で絵が小さい、輪郭が欠ける、線幅が揃わないという現象は別の問題です。すべてを「大きくする」で処理すると原因が見えなくなります。
これは幾何計算を伴うレビュー手順であり、Opusのベンチマークではありません。SVGの大きさと位置についての開発者の投稿は、外側の要素と内部の絵の混同を示します。本人の報告だけでブラウザーの不具合とは断定できません。
問題の境界を特定する
| 症状 | 集める根拠 | 最初に検討する修正 |
|---|---|---|
| 外枠に対して絵が小さい | viewBoxと実際のパス範囲 | 内部座標の余白を確認 |
| 端の線が消える | 描画範囲、端点、接合、はみ出し | 線を収める余白を確保 |
| サイズで太さが変わる | 表示寸法と変換 | 拡大縮小が意図どおりか判断 |
| 一つの表示だけ違う | 計算済みCSSと参照symbol | パスより先に上書き規則を確認 |
SVGのviewBox仕様は内部の矩形を表示領域に対応させる仕組みを説明しています。CSSの幅を増やしても内部矩形の余白は消えません。両方の寸法を記録し、縦横比を維持します。
単純な線幅を計算する
正方形の`viewBox="0 0 24 24"`、線幅2、ほかの変換がない通常の等比拡大縮小なら次の値になります。
| 表示する辺の長さ | 倍率 | 予想線幅 |
|---|---|---|
| 18 CSS px | 18 / 24 | 1.5 CSS px |
| 24 CSS px | 24 / 24 | 2 CSS px |
| 48 CSS px | 48 / 24 | 4 CSS px |
幾何学上の幅であり、すべての画面でアンチエイリアスの見た目が同じになる保証ではありません。MDNの`vector-effect="non-scaling-stroke"`解説は、関連する変換に対して線幅を一定に保つ方法を説明しています。一定の太さがアイコン群の方針に合う場合だけ使います。大きなアイコンには太い線が適切な場合もあります。余白、位置、欠け、ブラウザーのズーム動作まで自動修正するものではありません。
単純化した次の図形を確認します。
```html
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none"
stroke="currentColor" stroke-width="2" />
</svg>
中心12、半径9、線幅の半分1なので、描画範囲は両軸とも2から22です。半径を12にすると−1から25になり、viewBoxを超えます。表示領域がはみ出しを切る設定なら欠ける可能性があります。これは円の例です。角の接合、線端、フィルター、変換には個別の範囲確認が必要です。装飾例なので支援技術から隠していますが、アイコンだけのボタンには操作要素側のアクセシブルな名前が必要です。
## 完成形のレビュープロンプト
[Opus 5.5公式ガイド](https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompting-claude-opus-5-5)と併せて使えます。
```text
SVGアイコンと、それを含むコンポーネントを確認してください。入力は完全なSVGまたは参照symbol、計算済みCSS、目的の表示寸法、その寸法でのスクリーンショット、アイコン群の線幅方針です。
表示領域の寸法、viewBox座標、図形の範囲、描画範囲、レイアウト上の位置を分けて説明してください。実際の変換に基づき各寸法の線幅を計算します。線幅、vector-effect、線端、接合、overflow、フィルター、CSS上書きを確認します。不足情報を明示し、既定動作を推測しないでください。
示された問題を解決する最小の差分を提案し、形の意味と縦横比を維持してください。全アイコンにnon-scaling-strokeを自動追加しません。他のsymbol利用箇所への影響を説明してください。診断表、修正案、明暗の背景で18・24・48 CSSピクセルを確認するテスト表を返します。計算とブラウザー観察を区別し、結果なしに視覚テスト実施を主張しないでください。操作要素のアクセシブルな名前を保持してください。実際のコンポーネントで確認する
変更前後を3サイズで並べ、四辺と同じ系列の隣接アイコンを確認します。ホバー、フォーカス、無効状態でスタイルが変わる場合はそれらも確認し、実効線幅とCSS規則を画像と一緒に保存します。
共有symbolは複数のコンポーネントで試します。一つのツールバーを直して別の場所を壊す可能性があるためです。コントラストで太さの印象が変わるので明暗両背景を確認します。画像と計算が合わない場合、図形を再編集する前に追加変換とCSSを調べます。
よくある判断
**すべての線幅を固定しますか？** いいえ。アイコン群の方針を決め、使用する各寸法で確認します。
**viewBoxを変えれば欠けを直せますか？** 場合によります。倍率と位置も変わるため関連アイコンを再確認します。
**画像だけで十分ですか？** 症状は分かりますが、説明にはSVG、計算済みスタイル、表示寸法が必要です。
確認後はPanelly Studioで統一した視覚要件による完成プロモーション画像を作れます。SVG図解内の文字は別の図解ラベルレビューで位置と読みやすさを扱っています。どちらもPanellyとOpusの連携を主張するものではありません。
