SVG画像の余白処理
SVGの画像を ページの塗り背景に配置しようと思ったら、謎の余白に悩まされて解決に丸1日くらいかかっちゃったのでそのメモ。
目的と問題点
やりたかったこと
縦横 100 パーセントで背景画像を cover配置したい。
塗り背景で使いたかったから、一切余白を作りたくない。
発生した問題1
marginもpaddingも指定されてないのに、なぜかSVGを配置している要素の上下左右に謎の余白ができてしまう。(要素に背景指定した場合でも、imgタグで直接要素を埋め込んだ場合でも、どちらも謎の余白が発生する)。しかも、その余白が Viewportのサイズで可変する(消えたり現れたり大きくなったり小さくなったりする)。
発生した問題2
これはベクター画像そのものの作り方の問題だったんだけど、画像のサイズを拡大縮小すると、特定のタイミングでのみ、画像のパスとパスの間に謎の余白(1pxくらいの薄い白線)が表示されてしまう。
最初は、指定してる要素のスタイルの問題かと思い込んでたから、色々とスタイル側で調整してみたんだけど、何をやっても一向に解決せず。色々と調べながら試行錯誤した結果、やっと全部解決したので、また使うときのためのメモとしてのこします。
解決方法
それぞれの問題が別のアプローチで解決が必要だったので、ひとつずつかいていきます。
SVGの画像上下に謎の余白ができてしまう件
画像によっては、要素の背景色指定でどうにかなったのかもしれないけれど、今回は画像位置によって色が異なる画像だったので、背景色指定での解決はできず。ぐぐってみると、before&after要素をつかって前後に擬似背景を入れることで解決した人もいたんだけど、どうも私の場合はそれでは解決せず。
やっと見つけた解決方法が vertical-alineの指定。読み込んでるリセットCSSのimgタグに何か特殊な指定がされてたのかなんなのか、それが悪さをしていたようで、下記の指定を追加したら見事に治りました!
1 2 3 4 5 |
img{ margin: 0; padding: 0; vertical-align: top; } |
imgタグを直接埋め込んだ方は、該当要素内のimgに↑の指定を追加してそのまま解決、要素のbackground指定をした方は、要素自体にvertical-alignを指定した上で、下側の背景色指定を追加して余白を隠して解決。下にできてしまう方の余白は、背景色で埋めました!(今回の画像は下だけなら隠せたので)
これ、実は最初から試してたんだけど、左右余白とか画像内余白が治らない関係で、解決策なことに気づかなかった。。もっと別のまとまった原因のせいだー!って思い込んじゃって、少し時間を無駄にしてしまった。
SVG画像の左右に謎の余白ができてしまう件
こっちが一番苦戦した…..。viewportサイズによって余白ができるから、きっと比率が関係してるんだということはわかったんだけど、CSS側で何をやってもうまくいかず。 なんどもサイズを調整し直して、SVGを書き出し直して、悪戦苦闘してました。
それでやっと辿りついた解決策がこれ。SVGのファイルの中を直接いじったら左右余白が解決しました!!!
1 |
preserveAspectRatio="none" |
<svg>タグの中の、x,y位置指定の直前に、上記の指定をいれてあげるとなんと左右余白がきえた!!!
描画する要素のアスペクト比が異なる場合の処理に関する指定らしいので、多分、サイズ可変するような箇所にはみんなこの指定が必要になるんじゃないかな。SVG自体お勉強できてなかったから、なかなか気づけませんでした。
SVG画像内のパスとパスの間に謎の余白ができてしまう件
これは完全にAi側での画像作成の問題でした。
ある特定の境界を作って、色が切り替わるような画像になってたんだけど、どうやら境界を作ってしまうことが問題だったようです。境界の箇所には、表示サイズによってはどうしても余白ができてしまうみたい。なので、その境界になる箇所に背景レイヤーを指定してあげることによって、無事謎の境界余白を解消しました。
境界線の裏にだけうまいこと背景色を配置しないといけないから、あんまりシンプルな方法ではないんだけど(^^;)これも何度もSVGを書き直して色々やった結果見つけた解決策だったので、半分苦肉の策です。。
SVGについて色々勉強しないとだめですにゃ。
My Homepage
2018年12月24日 @ 5:27 PM
… [Trackback]
[…] There you will find 67164 more Infos: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
토토사이트
2019年3月11日 @ 8:17 AM
… [Trackback]
[…] Read More here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
whitepaper art
2019年3月12日 @ 8:45 AM
… [Trackback]
[…] Find More Info here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
gyratory crusher wear parts
2019年3月13日 @ 8:12 PM
… [Trackback]
[…] Here you can find 70625 additional Info on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
UK Chat Rooms
2019年3月17日 @ 11:25 AM
… [Trackback]
[…] There you can find 75932 additional Information to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
test boost elite
2019年3月18日 @ 8:54 AM
… [Trackback]
[…] Read More Info here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
technology
2019年3月19日 @ 5:21 AM
… [Trackback]
[…] There you can find 30145 additional Info on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
large stencils
2019年3月20日 @ 3:01 AM
… [Trackback]
[…] Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
รับทำเว็บไซต์
2019年3月21日 @ 2:42 AM
… [Trackback]
[…] Information to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
รับทำ SEO
2019年3月23日 @ 7:42 PM
… [Trackback]
[…] Find More here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Moffett-Florence Team
2019年3月26日 @ 11:00 AM
… [Trackback]
[…] Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Division 2 Gameplay
2019年3月29日 @ 2:09 PM
… [Trackback]
[…] Read More Info here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
5 Powerful Bible Verses That Can Lift You Out Of Poverty
2019年3月30日 @ 4:14 AM
… [Trackback]
[…] Find More Information here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Pink Floyd Tribute Gilmour's Breakfast Run Like Hell
2019年3月31日 @ 1:52 AM
… [Trackback]
[…] Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Auto Detailing in Maryland 202-790-4726
2019年3月31日 @ 6:20 AM
… [Trackback]
[…] Read More to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Ottawa Real Estate
2019年3月31日 @ 6:37 AM
… [Trackback]
[…] Read More on to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Custom CORNHOLE BOARD SET - Any Design www.cornholestop.com
2019年4月1日 @ 5:11 AM
… [Trackback]
[…] Read More Information here on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Resin Pellets for Cornhole Bags
2019年4月1日 @ 5:48 AM
… [Trackback]
[…] Find More here on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
custom tailgate wraps
2019年4月1日 @ 7:05 AM
… [Trackback]
[…] Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
division 2 series
2019年4月2日 @ 2:12 AM
… [Trackback]
[…] Read More on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Network Marketing Company
2019年4月3日 @ 8:22 AM
… [Trackback]
[…] Read More here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
being a first time mom
2019年4月3日 @ 7:01 PM
… [Trackback]
[…] Read More Information here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Detroit Diesel parts
2019年4月3日 @ 7:16 PM
… [Trackback]
[…] Read More on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
mall business owner with limited resources, how could you spread the word about your company without breaking the bank? A Press Release.a small business owner with limited resources, how could you spread the word about your company without breaking the ba
2019年4月3日 @ 10:08 PM
… [Trackback]
[…] Info on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
working website
2019年4月4日 @ 12:06 PM
… [Trackback]
[…] Find More here on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Best Roofer in Charlotte
2019年4月4日 @ 12:27 PM
… [Trackback]
[…] Read More on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Six Figure Stamp Club
2019年4月5日 @ 4:40 PM
… [Trackback]
[…] Find More Information here on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Income Tax Services
2019年4月5日 @ 8:49 PM
… [Trackback]
[…] Find More here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
read the article
2019年4月5日 @ 9:36 PM
… [Trackback]
[…] Read More on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
division 2 gameplay
2019年4月5日 @ 10:42 PM
… [Trackback]
[…] Read More on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Income Tax Services
2019年4月5日 @ 10:57 PM
… [Trackback]
[…] Find More on to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Income Tax Services
2019年4月5日 @ 11:04 PM
… [Trackback]
[…] Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Click Here
2019年4月5日 @ 11:15 PM
… [Trackback]
[…] Find More to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Income Tax Services
2019年4月5日 @ 11:20 PM
… [Trackback]
[…] Find More on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Ping Pong (Wait Whisper Song Parody)
2019年4月5日 @ 11:22 PM
… [Trackback]
[…] Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Income Tax Services
2019年4月5日 @ 11:50 PM
… [Trackback]
[…] Read More Information here to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Go Here
2019年4月6日 @ 1:38 AM
… [Trackback]
[…] Info on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Dentist in Worcester Ma
2019年4月6日 @ 2:48 AM
… [Trackback]
[…] Read More Info here on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
led screens
2019年4月6日 @ 7:49 AM
… [Trackback]
[…] Information to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Funny dog and cat animal videos
2019年4月6日 @ 9:50 AM
… [Trackback]
[…] Find More on to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
online business
2019年4月6日 @ 1:41 PM
… [Trackback]
[…] Find More to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Funny dog and cat animal videos
2019年4月6日 @ 1:59 PM
… [Trackback]
[…] Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
Dentist Greenville SC
2019年4月7日 @ 12:28 AM
… [Trackback]
[…] Read More on on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
cleaning services near me
2019年4月7日 @ 5:06 AM
… [Trackback]
[…] There you can find 94809 additional Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
cleaning services ottawa
2019年4月7日 @ 10:02 PM
… [Trackback]
[…] Read More to that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
blockchain art market
2019年4月8日 @ 7:43 AM
… [Trackback]
[…] Here you will find 70938 additional Information on that Topic: blog.pikuchi.com/2017/06/12/svg画像の余白処理/ […]
MKsOrb
2020年11月13日 @ 4:56 PM
MKsOrb
[…]we came across a cool internet site which you could take pleasure in. Take a look when you want[…]