CSS3で追加されたborder-imageにSVGを使ってみよう！と色々やってみて、分かったことをまとめました。
border-imageとは？
CSSのborderに画像を指定することができるプロパティです。
詳しくは以下のサイトで。
border-image－CSS3リファレンス
ブラウザの対応が遅れていましたが、この表を見る限り、IE以外はベンダープレフィックスなしでも大丈夫そう…と思ったんですが、Safari5.1だとベンダープレフィックスが必要でした。
Surfaceに入ってるIEの開発者モードだとベンダープレフィックス付きでもIE10で表示されないんですが、普通のPCだとどうなんでしょうか。
ちなみに、IE11では対応しています。
HTML5 & CSS3 Web Design
本来なら、画像へのパスを指定しますが、ここにSVGファイルを指定することもできるのです。
See the Pen SVG+border-image by Mei Koutsuki (@mei331) on CodePen.
border-imageでSVGを使うメリットとデメリット
メリットはやはり、レスポンシブ対応もしやすく、Retinaなどの高解像度でもキレイに表示できるということでしょうね。
ベクターデータなので、拡大縮小に強いのが一番のメリットです。
また、画像処理ソフトを使わなくても、CSSの指定やSVGの記述を変えるだけで色味の変更などがカンタンに出来ます。
デメリットは、インライン指定だとソースが長くなることですね。
この辺りはSassやStylusを使えば楽な気がします。
border-imageでSVGを使う時の注意点
まず、使う際の注意点として、borde-styleを必ず指定する。
指定がないと、firefoxやSafariでborder-imageが効きません。
何故かは分かりません。
次に、CSS上でインラインSVGで記述することもできますが、そのままではIEで表示されません。
ファイル指定の場合は表示されます。
CSS上でインラインSVGで記述する、とは？
SVGファイルの中身に書いてある、<svg>〜</svg>の記述をHTML上に記述すると表示できるように、CSSでもbackgroundやborder-imageの指定で<svg>〜</svg>を記述することができます。
やり方はUTF-8とBase64で記述する２種類あります。
UTF-8
svgタグ内の改行は全て削除し、url()内が""で囲んでいる場合は、svgタグ内の"を'に、''で囲んでる場合は"にしてください。
このUTF-8での記述の場合、IEではいまのところ表示されません。
Base64
この記述の場合、どのブラウザでも表示が可能です。
ただし、<svg>〜</svg>の記述を変換ツールなどでbase64に変換する必要があります。
サンプル
See the Pen SVG + border-image by Mei Koutsuki (@mei331) on CodePen.
SVGとborder-imageで作る飾り枠
以下はCSSでやってみたかった、飾り枠の例です。
線の色はstroke、枠内の色はfillを変えると変更することが出来ます。
マウスオーバーで背景と線の色が変わります。
IE以外でご確認ください。
See the Pen SVG + border-image 2 by Mei Koutsuki (@mei331) on CodePen.
外部ファイル指定をしている場合でもカンタンに色変更する方法はないか試行錯誤してみたり、stackoverflowを覗いたりしてみましたが、難しいようです。
JavaScriptなどを使えば出来そうな気もしますが…どうなんでしょう。
まとめ
・border-imageはIE11以上とその他モダンブラウザで使える
・Safariは-webkit-が必要
・border-styleがないとfirefoxで有効にならないので必ず指定する
・背景にSVGを使う時は、外部ファイル指定か、Base64に変換したものを記述する
本当は、SVGはコピペでOK→じゃあCSSをコピペすれば飾り枠が作れるようになるじゃん？！ということで、飾り枠を色々作って配布したかったんですが、SVGが調べれば調べるほどなかなかのくせ者でした。むずかしい。
今回は分かったことをまとめたので、飾り枠配布はまたそのうちやりますね。
参考）
・border-image－CSS3リファレンス
・html – inline svg in css – Stack Overflow
