【CSS+SVG】インラインSVGを背景画像に指定
どうも！LSSです！！
以前、
の記事中で、
この、「HTMLコード中にSVGタグで描画」したものを、「背景画像として繰り返し配置して描画」するのは、実はとっても困難だったりします^^;;;
【SVG】紗綾型、なんか…できたっぽい - Little Strange Software
てな事を書いていましたが…どうやら「それほど困難でもなさそう」です！
今回はそのやり方を見つけたので、挑戦してみます^^
サンプル
こんな風に、SVGで描いた模様を背景として使用できます！
画像ファイルを使わず、コードだけで表現しています。
CSSのコードの中に埋め込む、という形になるので、はてなブログのデザインテーマやデザインCSSにSVGを入れておく、みたいな事もできますね^^
画像ファイルを使わず、コードだけで表現しています。
CSSのコードの中に埋め込む、という形になるので、はてなブログのデザインテーマやデザインCSSにSVGを入れておく、みたいな事もできますね^^
コード
<style><!--
.bgsvg{
padding:0.6em;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewbox="0 0 20 10" stroke="rgb(210,255,255)"><path d="M 1,10 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" fill="none"></path><path d="M 1,0 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" fill="none"></path><path d="M -19,0 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" fill="none"></path></svg>');
background-size:120px;
}
--></style>
<div class="bgsvg">こんな風に、SVGで描いた模様を背景として使用できます！<br />画像ファイルを使わず、コードだけで表現しています。<br /><br />CSSのコードの中に埋め込む、という形になるので、はてなブログのデザインテーマやデザインCSSにSVGを入れておく、みたいな事もできますね^^</div>
↑ちょっと長くなっていますが、SVGコードや文章を省略すると↓こんな感じです。
<style><!--
.bgsvg{
padding:0.6em;
background-image: url('data:image/svg+xml;utf8,<svg>～</svg>までを ここに入れます');
background-size:120px;
}
--></style>
<div class="bgsvg">ここに文章など</div>
CSSのbackground-imageプロパティについて
CSSのbackground-imageプロパティ、おそらくもっとも基本的な使い方は、
background-image: url('画像ファイルのURL');
で背景画像を指定する、という使い方かと思います。
が、他にもコードでグラデーション色を指定するなど、活用の幅が広いな、と思っていましたが、「そのままSVGコードを入れられる」とは！
今回のように、SVGコードを背景画像として使用するには、
background-image: url('data:image/svg+xml;utf8,SVGタグ');
のように「data:image/svg+xml;utf8,」を'と'の中に入れ、さらにSVGタグを入れます。
もっと面倒な事をJavaScriptとか使ってやらないと出来ないかと思っていました^^;;;
同様に画像を扱うプロパティとして
border-image（囲み枠に画像を表示）、list-style-image（リストの・の代わりに画像を表示）などがありますが、そちらにもSVGが入れられるかも？
妄想が広がりますねｗ
これまでにborderやlist-styleを装飾しようとした記事はこちら
【CSS】画像を使った枠線（border-imageとborder-image-slice使用）
ですが、より幅広い表現ができそう！！
色変更・サイズ調節など
<style><!--
.bgsvg{
padding:0.6em;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewbox="0 0 20 10" stroke="rgb(210,255,255)"><path d="M 1,10 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" fill="none"></path><path d="M 1,0 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" fill="none"></path><path d="M -19,0 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" fill="none"></path></svg>');
background-size:120px;
}
--></style>
<div class="bgsvg">こんな風に、SVGで描いた模様を背景として使用できます！<br />画像ファイルを使わず、コードだけで表現しています。<br /><br />CSSのコードの中に埋め込む、という形になるので、はてなブログのデザインテーマやデザインCSSにSVGを入れておく、みたいな事もできますね^^</div>
色については、青字部分、 stroke="rgb(210,255,255)"で指定します。
stroke="lightblue" や、stroke="orange" のように色名で指定できるほか、hsl形式での指定も可能です。
（なお、#ccffff のような16進数での指定もSVGでは出来るハズですが、どういうわけかこの背景画像としての使用には16進数指定すると画像自体表示されなくなってしまいました。謎^^;）
サイズについては、赤字部分、 background-size:120px; で指定します。
これは「画像１つあたりの横幅」を指定する事になり、高さは縦横比を保って自動調整されます。（ background-size:120px 60px; のように、半角スペースで区切って高さを指定する事も可能です。）
ちなみに今回のコードでの「画像1つ」は、
この範囲のもので、これが並べられて紗綾型の模様となっています。
色のところを、
stroke="pink"
に、サイズを、
background-size:200px;
に変更してみるとこんな感じになります。
stroke="pink"
に、サイズを、
background-size:200px;
に変更してみるとこんな感じになります。
いくつかのトラブルに悩まされました…
その１ widthとheightの指定が必要らしい
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewbox="0 0 20 10" stroke="rgb(210,255,255)">
この部分ですね。
これがないと、
こんな風に、表示が崩れまくります。
何がどうなってるか分からないレベルの崩れ方^^;
…想像ですが…「画像ファイルの代替として指定するものなので、画像ファイルと同様にサイズを指定しておく必要がある」という事かなぁ？
何がどうなってるか分からないレベルの崩れ方^^;
…想像ですが…「画像ファイルの代替として指定するものなので、画像ファイルと同様にサイズを指定しておく必要がある」という事かなぁ？
その２ <use>が使えない
最初にテストした時に、
のコードを試してみましたが…表示されませんでした。
どこがおかしいのかも分からず、色々試していましたが、
【SVG】SVGの練習？がてら、「もぐら」の絵を描いてみた！
の「もぐら」ならすんなり表示されます。
こんな感じに並びます。
ただし、改行は削って一行にまとめる必要はありました。
ただし、改行は削って一行にまとめる必要はありました。
で、元の紗綾型のコードを色々削ったりしていたところ、どうやら、
<use xlink:href="#sygt" x="20" y="0"></use>
を削ってやると、ようやく表示されました。
なぜそうなるのかは不明です^^;
だもんで、前回の紗綾型は「同じ模様を描くPATHをUSEを使って９つ並べる」事で表現していましたが、今回は「表示領域を削り、PATHを３つにまで減らして、USEを使わずそのまま書く」事で表現しています。
…前回つきとめなかった「ループの最小単位」は、
これが正解っぽいですね^^（３つのPATHを分かりやすいよう色分けしてみました）
その３ 色指定にRGB16進数指定が使えない
先にも少し書きましたが、線の色を指定するのに、
stroke="#ccffff"
のような16進数カラーコードが使えませんでした…。
入れると何も表示されなくなります^^;
↑参考までに、CSSでの複数の色指定方法について書いた記事ですが、SVGでも同様の複数の色指定が使えます。
なのになぜか、背景指定の時には使えないんですよね^^;;;
<use>の時といい…共通点と言えば「#」を嫌うのかも？？
というわけで、色指定を自由な色で指定したい場合向けに今回は
stroke="rgb(210,255,255)"
という指定を使用しています。
あとがき
謎は残りましたが、SVG画像を背景として指定する事ができました^^
画像ファイルを使用せずに、文字列で背景画像を用意できるので、色々な応用が考えられますね！
イラストレーターなど、SVG形式で保存できる画像編集ソフトを使用されている方は、ソフトで絵を描いてからSVG保存、それをメモ帳などのテキストエディタで開いてコピペ、という手順で、出来る事の幅が広がりそうです。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
