SVGの小数は何桁まで削れるか｜表示の大きさで決める目安

SVGの小数を何桁まで丸めてよいかは、viewBox の幅と、画面に出す大きさで決まります。 丸めで点が動くのは、最大で「残した最後の桁の半分」です。

それに「表示の幅 ÷ viewBox の幅」を掛けると、CSS の px で何pxずれるかになります。 24×24 のアイコンを24pxで出すなら、小数1桁に丸めてもずれは0.05px以内です。

ただしこの計算は、transform で拡大・縮小していない図形の場合です。 拡大している図形は、その倍率もずれに掛かります。

この記事では、その計算と、自作のアイコンを0〜3桁に丸めて描き比べた結果を説明します。 描き比べは Chromium 141 で行い、容量はこのサイトのSVG最適化ツールで出しました。

丸めで動くのは、最後の桁の半分まで

小数を1桁に丸めると、12.345678 は 12.3 になります。 動いた量は0.045678で、1桁に丸めたときの最大の0.05を超えません。

残す桁を d 桁とすると、点が動くのは最大で 0.5 × 10^(−d) です。 0桁なら0.5、1桁なら0.05、2桁なら0.005まで動きます。

ここでの「1」は画素ではなく、SVGの中の座標の1目盛りです。 画面で何画素になるかは、次の掛け算で決まります。

pxに直すと「表示の幅÷viewBoxの幅」倍になる

viewBox が 0 0 24 24 のアイコンを24pxで出すと、1目盛りがちょうど1pxです。 同じアイコンを96pxで出すと、1目盛りは4pxに広がります。

24×24 のアイコンで、ずれの上限を px で並べると次のとおりです。

桁	24px	96px	480px
0	0.5	2	10
1	0.05	0.2	1
2	0.005	0.02	0.1
3	0.0005	0.002	0.01

細かい画面の端末は、CSS の1pxを2つや3つの画素で描きます。 1pxを3画素で描く画面なら、24pxのアイコンは72画素で描かれ、ずれも3倍になります。

transform="scale(10)" のように図形を拡大していると、その倍率もずれに掛かります。 10倍した図形の中では、丸めで動いた0.05目盛りが0.5目盛りになります。

24×24のアイコンを丸めて描き比べた

円の輪郭と星を組み合わせたアイコンを、自分で作って試しました。 座標は小数6桁で書き、線の太さは1.5です。

これを0〜3桁に丸め、元の図と一緒に24・72・192画素の大きさで描いて、画素の濃さを比べました。 72画素は、24pxのアイコンを1pxを3画素で描く画面に出したときの大きさです。 濃さは255段階で、32段階（約8分の1）以上変わった画素を数えています。

桁	24画素	72画素	192画素
0	155	916	4,953
1	0	0	88
2	0	0	0
3	0	0	0

0桁では、24画素で描いても155画素が変わりました。 線の太さ1.5が2になり、円の上下左右の端（1.5と22.5）がどれも右下へ半目盛り動いたためです。

1桁は72画素まで変わった画素が無く、192画素で88画素が変わりました。 2桁は、192画素まで32段階以上変わった画素がありませんでした。

32段階より小さな差は、3桁に丸めたときにも、480画素までに最大8段階まで出ました。 差が出た画素を数えるだけでは、どの桁でも0にはならないということです。

viewBoxが大きい書き出しは少ない桁で足りる

同じアイコンを、viewBox が 0 0 1000 1000 になるよう41.67倍した図でも試しました。 大きな座標で描いた図を書き出すと、このような viewBox になります。

0桁に丸めても、24画素で描いたときに32段階以上変わった画素はありませんでした。 1目盛りが0.024画素なので、0.5目盛り動いても0.012画素に収まります。

ただし72画素では45画素、192画素では270画素が変わりました。 円の上下左右の端と線の太さの値（62.5と937.5）がどれも「.5」ちょうどで、丸めると同じ向きにそろって動いたためです。

1桁に丸めた図は、192画素でも32段階以上変わった画素がありませんでした。 大きな座標の図でも、大きく出すなら1桁は残すほうが安全です。

太さや濃さを表す値は、丸めると意味が変わる

座標のずれは「位置が少し動く」で済みますが、そうでない値もあります。 線の太さは、丸めると太さそのものが変わります。

上のアイコンの線の太さ1.5は、0桁に丸めると2になり、線が3分の1太くなりました。 アイコンの線は細いので、少しの差でも全体の印象が変わります。

不透明度（0〜1）は、0桁に丸めると0か1になります。 opacity="0.35" の形が消えたり、半透明でなくなったりします。

桁を減らしても容量はそれほど減らない

24×24 のアイコンを、丸め以外の項目を切った状態で縮めた大きさは次のとおりです。 元のファイルは570バイトでした。

桁	大きさ	減った割合
0	270バイト	52.6%
1	346バイト	39.3%
2	362バイト	36.5%
3	398バイト	30.2%

6桁を3桁にするだけで、3割が減りました。 2桁から1桁に減らしても、減るのは16バイトです。

桁数を選んで比べる手順

SVG最適化 の詳細設定にある「小数点桁数」で、0〜4桁を選べます。 既定は2桁で、選び直すとプレビューと容量がその場で変わります。

確かめるときは、そのSVGを使ういちばん大きな表示の大きさを先に決めておきます。 viewBox の幅と表示の幅から上限を計算し、気になる桁だけプレビューで見比べると早く済みます。

関連記事

• SVGを軽量化する使い方｜不要なコードを削ってサイズを減らす：最適化ツールの操作の手順
• SVGをPNGに変換すると真っ白になる原因と確かめる順番：SVGを画像に書き出すときのつまずき
• SVGをPNGに変換して高解像度で書き出すまでの手順：大きく書き出すときの倍率の決め方

まとめ

丸めで点が動くのは、最大で残した最後の桁の半分です。 それに「表示の幅 ÷ viewBox の幅」と端末の倍率を掛けると、画面でのずれになります。 transform で拡大した図形なら、その倍率も掛かります。

24×24 のアイコンなら、2桁で192画素まで32段階以上変わった画素は出ませんでした。 桁を1つ減らして減る容量は小さいので、迷ったら桁を残しましょう。