0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CSSのbackground-imageにSVGのXML文字列を埋め込む

Posted at

Webページの背景に簡単な模様を入れるためにbackground-imageにSVG画像を指定する場合があります。
通常はSVGのデータを独立のファイルにして url();で読み込むのですが、色々な事情で画像ファイルを用意したくない場合に、データURIスキームを使ってCSSファイルの中に画像データを埋め込むことが考えられます。
たとえば、↓の画像の右下にある三角形の場合はこんな感じ。
svgbackground.png

#hoge {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><polygon points="70,100 100,100 100,80" fill="%23c8c8c8"/><polygon points="80,100 100,100 100,80" fill="%23cf2030"/></svg>');
    background-position: right bottom; /* 画像を右下に配置 */
    background-attachment: fixed; /* 画像を固定 */
    background-repeat: no-repeat; /* 画像の繰り返しを防止 */
}

ちょっとした解説

url('data:image/svg+xml;utf8,の部分

データURIスキームを使って、SVGのデータを読ませます。
utf8を指定しておくことで、<>をエスケープする必要がなくなります。ただし、#%23にエスケープする必要があるので、色指定などでは一手間かかります。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100">の部分

XML宣言(<?xml version="1.0" encoding="UTF-8" standalone="yes"?>)は無くても動くようです。
xmlnsは指定しておかないと動かないようです。
今回は画像を右下に配置したいのですが、どうもbackground-position: right bottom;の指定ではうまくいかないようなので、適用対象のブロック要素全体を覆うSVG画像を用意します。viewBoxはパーセンテージでは指定できない(ピクセル値?でしか指定できない)ので、ともかくこのSVG画像自体はwidth="100%" height="100%"にした上で、viewBoxの値を使って位置を指定する感じでやりました。SVGわからん。
あとは、この100x100のviewBox内に、右下角の位置に灰色の三角形と赤い三角形を並べました。上述の通り、データURIスキーム内での色指定は#c3c3c3だとダメっぽいので%23c3c3c3にエスケープしています。

日本語のネット情報だと、データURIスキームを使う場合はbase64にエンコードする方が多いのですが、可読性のためエンコードせずに文字列で埋め込んでいます。また、英語でチラッと検索した感じだとutf8を指定せず不等号等もエスケープする例が出てくるのですが、エスケープ混じりも可読性が低いし手間なので、utf8を指定してみたら概ねうまく行った次第。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?