svgを使う上でwebkitを嫌いになる理由
html5がsvgをサポートすることとなってから数年が経ちました．このような状況ですからさぞsvgが世の中に広まったのか…というと別にそんなこともなくて，むしろ解像度に依存しない特徴のみが強調され，ラスタ画像の置き換え程度にとどまっている印象があります．毎年svg元年と叫ばれている中，なぜこのような状況なのでしょうか？ その答えとして筆者はwebkit系ブラウザのsvgにおける機能の貧弱さが一因として挙げられると考えています．chromeやsafariは実に先進的なwebブラウザと言った印象があるのですが，svgに限って言えばむしろ他のブラウザに大きく劣っているなど，実は非常に偏った癖のある環境なのです． 本記事では筆者がこれまでsvgを調査してきた上で気になったwebkit（主にchrome）の問題点についてまとめてみます．将来的に改善されることを期待しつつも，現状svgをクロスブラウザ
WebKitでのSVGを背景画像にすると起こるバグ
SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば……と思いきや、なかなかの落とし穴がありました。 Demo: SVG Arrow WebKit以外では自動リサイズが期待されるviewBoxのみ指定したSVGを背景画像にすると問題なくキレイにリサイズされます。対してWebKitではリサイズされたりされなかったりです。しかもChromeとSafariでは挙動が少し違ったりもし、追求する気が失せるほど挙動不審です。どうも良きに計らってはくれそうにないので、明示的
WebKit SVG Status
WebKit is an open source Web content engine for browsers and other applications. We value real-world web compatibility, standards compliance, stability, performance, battery life, security, privacy, portability, usability, and relative ease of understanding and modifying the code (hackability). Project Goals Web Content Engine The project’s primary focus is content deployed on the World Wide Web,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
