見出し画像

SVG画像のサイズ統一

カード等、繰り返す要素内で使われる画像はサイズを統一しておくと便利。
SVG画像の場合の手順をメモ。

1.width, height, viewportの値を画像群内の幅・高さの最大値に変更
2.真ん中寄せでいいかどうか検討する
3.真ん中寄せなら、offsetさせる数値を計算して入力

例えば
幅48、高さ58の画像を、71, 58にする場合

例:

<svg width="48" height="58" viewBox="0 0 48 58" 

↓

<svg width="71" height="58" viewBox="-11.5 0 71 58" 

※マイナス値=内側に寄せる
※11.5=(71-48) / 2

以上です//



この記事が気に入ったらサポートをしてみませんか?