SVGのnon-scaling-stroke：3サイズでアイコンを比較

まず想定線幅を計算する

今回のSVGは100×100のviewBoxを使い、5本のパスすべてにstroke-width=2を設定しています。均等な拡大縮小で追加の変形がなければ、通常の画面上の線幅は2 × 描画サイズ / 100です。結果は0.48、0.96、1.92 CSSピクセルになります。

線のあるパスにvector-effect="non-scaling-stroke"を適用すると、幾何形状の拡大縮小に影響されにくい線を指定できます。この比較での目標幅は2 CSSピクセルのままです。動作はSVGの座標系仕様に定義されており、表は今回のサイズに限った計算です。

• SVG 2のベクター効果

両方の行に同じ形状を指定する

Ciyoで新しいプロジェクトを作り、6個のインラインアイコンを並べた比較用HTMLを依頼します。各バリエーションで全パスを同一にし、vector-effectだけを変更してください。エージェントが小さいアイコンを描き直すと、2つの設計判断を同時に比較することになります。

編集できるSVGとHTMLコードを依頼します。今回のセッションでは、エージェントがチャットに貼り付けるまでソース形式はエージェントの作業領域に残り、キャンバスにはPNGの確認画像を配置できました。リンク先の例には提供された形状とブラウザー測定値を保存しています。

架空ブランドCedar Cup用に、viewBox="0 0 100 100"、stroke-width="2"のシンプルな輪郭カップをインラインSVGで表示する、ダウンロード可能な比較HTMLを作成してください。サイズは24・48・96 CSSピクセル。通常の拡大縮小と、線のある各パスにvector-effect="non-scaling-stroke"を指定した場合を比較します。パス形状は同一、塗りはなしにしてください。non-scaling-strokeは画面上の線幅を保つもので、小サイズでの見た目の良さを保証しないと説明してください。修正済みの独立SVG、比較HTML、PNG確認画像を納品し、PNGをキャンバスに置いてください。コードツールのみを使い、有料の画像・動画生成は使わないでください。形状とサイズをプログラムで検証してください。これは架空のUIアイコンのデモです。

小さいアイコンを実際の確認画像で判断する

実際の確認画像では、通常の行はサイズとともに線が見えやすくなり、拡大縮小しない行は24ピクセルでも太い輪郭を保っています。最小サイズでは湯気の線が密集します。一定の線幅が、使える空間に対して重すぎる場合があります。

CiyoはChromiumで比較を描画し、想定される画面上の線幅を報告しました。HTMLを保存し、6個のSVGの表示枠と5本のパス形状を別途確認しています。計算値は幾何形状を示すもので、アンチエイリアスされた端のピクセルは目視で判断する必要があります。

細部が潰れるなら小サイズ専用の図形を使う

ツールバーでは、閉じてしまう細部を簡略化し、実際のCSSサイズで確認します。線幅を2ピクセルに保っても、湯気の線の間に空間が増えるわけではありません。拡大縮小の動作を決めた後で、パスを減らすか、小サイズ専用のバリエーションを検討しましょう。

24ピクセルで見た目の重さを確認する

操作の意味と線の太さは分けて考えてください。コントロールにはアクセシブルな名前を付け、実際のテーマで十分なコントラストを確保します。この確認画像は視覚的な比較であり、完成したUIのアクセシビリティ監査ではありません。

• 比較ページを開く
• 拡大縮小しないカップのSVGを開く
• テーマごとにcurrentColorを試す

配置と書き出しの後に再確認する

実際のコンポーネントに、そのCSSサイズと変形を使って配置します。ライト・ダーク両テーマで確認してください。受け取り側のエディターや書き出し機能がvector-effectを保持するか、最終素材として使う前に試します。

この例は保存したChromiumページで均等な拡大縮小を比較しています。すべてのベクターエディター、プリンター、ブラウザーでの動作を実証するものではありません。コンポーネントに合うバリエーションを選び、デザインの引き継ぎにはそのソースも添えてください。