2017年4月15日土曜日

SVGを正しくタイル表示するブラウザーはEdge(訂正あり)

タイルパターンのSVGをChromeでプレビューしている際に継ぎ目がおかしいことに気が付き色々試した。おそらくブラウザに起因しているものだと思われる。

上の画像は左からGoogleChrome、MicrosoftEdge、MozillaFireFox。MSEdgeのものが私の期待している結果。SVGのViewBox内部のみをタイルで表示している。ChromeとFireFoxではViewBoxの外まで表示しているため継ぎ目がおかしくなっている。

ということで今のところSVGをタイル表示させるならEdgeでということになった。アンチエイリアスも少し綺麗にかかっている感じがする。

訂正(2017/4/16)

ブラウザ云々ではなかった。下の画像はViewBoxのサイズでRectを作ってタイルパターンにして継ぎ目だけを500%で比べてみたもの。

左からChromeでwidthが整数の場合、Chromeでwidthが小数を含む場合、Edgeで整数の場合、Edgeで小数を含む場合。

SVGの幅と高さをアドリブで決めており、小数が混ざっていたために繋ぎ目がおかしくなっていただけ。ChromeやFireFoxではそれが極端に出現しているだけ。Edgeでも発生しているが他と比べて影響が小さいだけ。

また、継ぎ目がおかしくなる小数とならないものがあり、そのあたりはよくわからない。とりあえず整数を使えば間違いないのでそうする。既存のものは気になるものだけ修正していく。

あとEdgeのアンチエイリアスが綺麗だと表現したが、強くぼかしているだけ。好き嫌いの分かれるところ。