ちょっと良いUIおれおれAdvent Calendar 2024 – 21日目

簡単な図形を描くのに CSS 使うことってよくあると思うんですが、簡単な図形なら SVG 使うのもありです。簡単なものは割と簡単なので。

デモ：

簡単に図形を描く

SVG のコードは直接 HTML に埋め込んで書くことができます。

<p>
  詳しくは
  <svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">…</svg>
  ボタンを押してみてね。
</p>

<svg> 要素の viewBox 属性で表示範囲を指定します。描画される大きさとは別物です。適当に viewBox="0 0 100 100" とかにしておけばいいでしょう。

currentColor で文字色と同じにする

この後出てくる currentColor という値で color プロパティの値を参照することができます。これを使うと文の途中に SVG を埋め込んだとき同じ色になります。

SVG から輸入されたんだっけ？　ともかく CSS の話なので HTML でも使えます。

簡単に閉じるの「×」を描く

<line> 要素を使って線を描けます。

<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="90" y2="90" />
  <line x1="90" y1="10" x2="10" y2="90" />
</svg>

線の色は stroke 、太さは stroke-width で指定できます。ついでに端を丸くしたいなら stroke-linecap: round です。

line {
  stroke: currentColor;
  stroke-width: 10px;
  stroke-linecap: round;
}

まあ「ばつ」で変換して出てくる全角記号でもいいんですけど太さ調整とか欲しいときもあるので。

簡単に正三角形を描く

任意の図形は <path> 要素で描けます。正三角形はこんな感じです。（高校でやる 2:1:√3 を思い出して！）

<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    d="
      M 50, 7
      L 100, 93
      L 00, 93
    "
  />
</svg>

塗りつぶしの色は fill で指定できます。

path {
  fill: currentColor;
}

吹き出しっぽいポップアップの足もこれで作れます。適当に数字打ってそれっぽい形になるよう調節してください。幾何学にとらわれるとかえって不自然な形になるので生兵法よりは直観を信じましょう。

おまけ：簡単に絵文字を埋め込む

文章に混ぜるなら絵文字はそのまま書けば良いんですが、例えば Favicon に Data URI を使って絵文字を埋め込むことができちゃいます。どこで見た発想だったかな。

<link rel="icon" href='data:image/svg+xml;utf8,<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><text x="-10" y="90" font-size="90px">🍣</text></svg>'>

ちなみに画像 <img> にして文章に混ぜると、リンクの下線が付かないとか currentColor が使えないとかそういうのがあります。デモ見てみてね。

おしまい

currentColor が強力なのでどんどこ埋め込み SVG 使っていきましょう。

簡単じゃない図形は簡単じゃないのでお絵描きツールとか使うのが良いです。

参考