SVG画像の余白処理

, , 46 Comments

SVGの画像を ページの塗り背景に配置しようと思ったら、謎の余白に悩まされて解決に丸１日くらいかかっちゃったのでそのメモ。

目的と問題点

やりたかったこと

縦横 100 パーセントで背景画像を cover配置したい。
塗り背景で使いたかったから、一切余白を作りたくない。

発生した問題１

marginもpaddingも指定されてないのに、なぜかSVGを配置している要素の上下左右に謎の余白ができてしまう。（要素に背景指定した場合でも、imgタグで直接要素を埋め込んだ場合でも、どちらも謎の余白が発生する）。しかも、その余白が Viewportのサイズで可変する（消えたり現れたり大きくなったり小さくなったりする）。

発生した問題２

これはベクター画像そのものの作り方の問題だったんだけど、画像のサイズを拡大縮小すると、特定のタイミングでのみ、画像のパスとパスの間に謎の余白（１pxくらいの薄い白線）が表示されてしまう。

 

最初は、指定してる要素のスタイルの問題かと思い込んでたから、色々とスタイル側で調整してみたんだけど、何をやっても一向に解決せず。色々と調べながら試行錯誤した結果、やっと全部解決したので、また使うときのためのメモとしてのこします。

解決方法

それぞれの問題が別のアプローチで解決が必要だったので、ひとつずつかいていきます。

SVGの画像上下に謎の余白ができてしまう件

画像によっては、要素の背景色指定でどうにかなったのかもしれないけれど、今回は画像位置によって色が異なる画像だったので、背景色指定での解決はできず。ぐぐってみると、before&after要素をつかって前後に擬似背景を入れることで解決した人もいたんだけど、どうも私の場合はそれでは解決せず。

やっと見つけた解決方法が vertical-alineの指定。読み込んでるリセットCSSのimgタグに何か特殊な指定がされてたのかなんなのか、それが悪さをしていたようで、下記の指定を追加したら見事に治りました！

imgタグを直接埋め込んだ方は、該当要素内のimgに↑の指定を追加してそのまま解決、要素のbackground指定をした方は、要素自体にvertical-alignを指定した上で、下側の背景色指定を追加して余白を隠して解決。下にできてしまう方の余白は、背景色で埋めました！（今回の画像は下だけなら隠せたので）

これ、実は最初から試してたんだけど、左右余白とか画像内余白が治らない関係で、解決策なことに気づかなかった。。もっと別のまとまった原因のせいだー！って思い込んじゃって、少し時間を無駄にしてしまった。

 

SVG画像の左右に謎の余白ができてしまう件

こっちが一番苦戦した…..。viewportサイズによって余白ができるから、きっと比率が関係してるんだということはわかったんだけど、CSS側で何をやってもうまくいかず。 なんどもサイズを調整し直して、SVGを書き出し直して、悪戦苦闘してました。

それでやっと辿りついた解決策がこれ。SVGのファイルの中を直接いじったら左右余白が解決しました！！！

<svg>タグの中の、x,y位置指定の直前に、上記の指定をいれてあげるとなんと左右余白がきえた！！！
描画する要素のアスペクト比が異なる場合の処理に関する指定らしいので、多分、サイズ可変するような箇所にはみんなこの指定が必要になるんじゃないかな。SVG自体お勉強できてなかったから、なかなか気づけませんでした。

 

SVG画像内のパスとパスの間に謎の余白ができてしまう件

これは完全にAi側での画像作成の問題でした。

ある特定の境界を作って、色が切り替わるような画像になってたんだけど、どうやら境界を作ってしまうことが問題だったようです。境界の箇所には、表示サイズによってはどうしても余白ができてしまうみたい。なので、その境界になる箇所に背景レイヤーを指定してあげることによって、無事謎の境界余白を解消しました。

境界線の裏にだけうまいこと背景色を配置しないといけないから、あんまりシンプルな方法ではないんだけど(^^;)これも何度もSVGを書き直して色々やった結果見つけた解決策だったので、半分苦肉の策です。。

 

SVGについて色々勉強しないとだめですにゃ。