SVGのレスポンシブサイズ調整・width: 100%・線幅を一定に保つCSS手法
SVG Nexus · 最終更新: 11月 2026
viewBox・width/height属性・CSSのwidth: 100%・vector-effect="non-scaling-stroke"を組み合わせて、SVGの崩れや拡大時の線太りを防ぎます。
viewBoxとwidth/height属性の役割分担
viewBoxは内部座標系を定義し、HTMLのwidth/height属性はCSS読込前のアスペクト比を確保してレイアウトシフト（CLS）を防ぎます。
フルード伸縮とFlexボタン内の潰れ防止
伸縮させたい図版には width: 100%; height: auto; display: block を指定し、ボタン内のアイコンには flex-shrink: 0 を付けて文字数が増えても潰れないようにします。
non-scaling-strokeで線幅を固定する
拡大縮小しても線の太さを一定に保ちたい場合は、path要素に vector-effect="non-scaling-stroke" を指定します。
<svg viewBox="0 0 24 24" class="icon-scalable" fill="none" stroke="currentColor" stroke-width="1.75">
<path vector-effect="non-scaling-stroke" d="M4 12h16M12 4v16"/>
</svg>このサイトの検証済み事実
- 書き出し形式：Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- ラスタ書き出しサイズ：64px, 128px, 256px, 512px, 1024px, 2048px
- ワークスペースの1ファイルのアップロード上限：2 MB
- ライセンスと作者は各アイコンページに明記されています。