0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@RYMK_Works

【実務で使えるSVG】path・rect・circleの着色と線のデザイン チートシート

0
Posted at

🎯 やりたかったことは？

実務でSVGを扱っていると、

「この図形だけ色を変えたい」
「線をもう少し太くしたい」
「点線にしたい」

みたいなことが結構あります。

fill や stroke は覚えていても、
stroke-linecap や stroke-dasharray あたりは毎回すぐに出てこなくて、
その都度調べることがありました。

path、rect、circle で基本的な指定方法は共通なので、
よく使うものを自分用のチートシートも兼ねてまとめます。

🚀 急いでいる人向け

SVGの色や線を変更したい場合は、まずこのあたりを確認すれば大体対応できます。

やりたいこと 属性 例
塗りつぶし色を変更 fill fill="red"
塗りつぶしを消す fill fill="none"
線の色を変更 stroke stroke="blue"
線の太さを変更 stroke-width stroke-width="3"
線の端を丸くする stroke-linecap stroke-linecap="round"
線の接続部分を丸くする stroke-linejoin stroke-linejoin="round"
点線にする stroke-dasharray stroke-dasharray="5 3"
全体を半透明にする opacity opacity="0.5"
塗りだけ半透明 fill-opacity fill-opacity="0.5"
線だけ半透明 stroke-opacity stroke-opacity="0.5"

例えば、

<path
    d="M20 20 L120 20 L120 120 Z"
    fill="#4CAF50"
    stroke="#333"
    stroke-width="3" />

これだけで、

  • 内側：緑
  • 外枠：濃いグレー
  • 線幅：3

の図形になります。

💡 この記事で分かること

  • path / rect / circle の基本的な着色方法
  • fill と stroke の違い
  • 線の太さや形を変更する方法
  • 点線を作る方法
  • 透明度を変更する方法
  • CSSからSVGの見た目を変更する方法
  • line / polyline / polygon でも同じ属性を使う方法

🎨 SVGの基本

まずは簡単なSVGです。

<svg
    width="300"
    height="200"
    viewBox="0 0 300 200"
    xmlns="http://www.w3.org/2000/svg">

    <rect
        x="20"
        y="20"
        width="100"
        height="60"
        fill="#4CAF50" />

</svg>

SVGでは、

fill="#4CAF50"

のように属性を指定して見た目を変更できます。

fill：図形の内側を着色する

図形の塗りつぶしには fill を使います。

<rect
    x="20"
    y="20"
    width="100"
    height="60"
    fill="red" />

色名だけでなく、

fill="#ff0000"

や、

fill="rgb(255, 0, 0)"

のような指定もできます。

塗りつぶしをなくす

塗りつぶしが不要な場合は、

fill="none"

を指定します。

<rect
    x="20"
    y="20"
    width="100"
    height="60"
    fill="none"
    stroke="black" />

枠線だけ表示したい場合によく使います。

stroke：図形の線を着色する

stroke は図形の輪郭線や線の色を指定します。

<rect
    x="20"
    y="20"
    width="100"
    height="60"
    fill="none"
    stroke="blue" />

fill と組み合わせることもできます。

<rect
    x="20"
    y="20"
    width="100"
    height="60"
    fill="#eeeeee"
    stroke="#333333" />

ざっくり分けると、

fill
→ 図形の内側

stroke
→ 図形の線

です。

stroke-width：線を太くする

線の太さは stroke-width で変更できます。

<path
    d="M20 50 L200 50"
    fill="none"
    stroke="black"
    stroke-width="5" />

数値を大きくすると線が太くなります。

stroke-width="1"
stroke-width="3"
stroke-width="10"

stroke-linecap：線の端の形を変える

線の端を変更する場合は stroke-linecap を使います。

<path
    d="M20 50 L200 50"
    fill="none"
    stroke="black"
    stroke-width="10"
    stroke-linecap="round" />

主な値は次の3つです。

値 見た目
butt 線の終端でそのまま切れる
round 端が丸くなる
square 四角い形で少し外側まで伸びる

例えば、

stroke-linecap="round"

を指定すると、線の端が丸くなります。

細い線では違いが分かりにくいので、
確認するときは stroke-width を少し太めにすると見やすいです。

stroke-linejoin：線の接続部分を変える

複数の線がつながる部分は stroke-linejoin で変更できます。

<path
    d="M20 100 L100 20 L180 100"
    fill="none"
    stroke="black"
    stroke-width="10"
    stroke-linejoin="round" />

主な値は次の3つです。

値 見た目
miter 角が尖る
round 角が丸くなる
bevel 角を切り落としたようになる

図形の角を少し柔らかくしたい場合は、

stroke-linejoin="round"

が使いやすいです。

stroke-dasharray：点線を作る

線を点線にしたい場合は stroke-dasharray を使います。

<path
    d="M20 50 L250 50"
    fill="none"
    stroke="black"
    stroke-width="3"
    stroke-dasharray="10 5" />

例えば、

stroke-dasharray="10 5"

なら、

10 → 線
5  → 空白

を繰り返します。

短めなら、

stroke-dasharray="3 3"

長めなら、

stroke-dasharray="15 5"

のように変更できます。

opacity：要素全体を半透明にする

要素全体の透明度は opacity で変更できます。

<rect
    x="20"
    y="20"
    width="100"
    height="60"
    fill="blue"
    opacity="0.5" />

値は 0 ～ 1 で指定します。

0 → 完全に透明
1 → 完全に不透明

fill-opacity

塗りつぶしだけ透明にしたい場合は fill-opacity を使います。

<rect
    x="20"
    y="20"
    width="100"
    height="60"
    fill="red"
    fill-opacity="0.3"
    stroke="black" />

この場合、線はそのままで内側だけ薄くなります。

stroke-opacity

線だけ透明にしたい場合は stroke-opacity を使います。

<rect
    x="20"
    y="20"
    width="100"
    height="60"
    fill="red"
    stroke="black"
    stroke-width="5"
    stroke-opacity="0.3" />

path / rect / circle で使い方は変わる？

形の作り方は違いますが、
着色や線に関する指定方法は基本的に同じです。

rect

<rect
    x="20"
    y="20"
    width="100"
    height="60"
    fill="#4CAF50"
    stroke="#333"
    stroke-width="3" />

circle

<circle
    cx="100"
    cy="100"
    r="50"
    fill="#2196F3"
    stroke="#333"
    stroke-width="3" />

path

<path
    d="M50 20 L150 20 L100 120 Z"
    fill="#FF9800"
    stroke="#333"
    stroke-width="3" />

path は形状を d 属性で指定しますが、

fill
stroke
stroke-width

などの見た目に関する指定方法は同じです。

line / polyline / polygon でも基本は同じ

今回の記事では path、rect、circle を中心にしていますが、
line、polyline、polygon でも同じ属性を使えます。

line

2点を結ぶ直線です。

<line
    x1="20"
    y1="50"
    x2="200"
    y2="50"
    stroke="#333"
    stroke-width="4"
    stroke-linecap="round" />

line は線なので、主に stroke 系の属性で見た目を変更します。

polyline

複数の点を順番につないで線を作ります。

<polyline
    points="20,80 60,20 100,80 140,20 180,80"
    fill="none"
    stroke="#333"
    stroke-width="4"
    stroke-linejoin="round" />

折れ線として使う場合は、

fill="none"

にしておくと分かりやすいです。

stroke-linejoin を指定すれば、
折れ曲がる部分の形も変更できます。

polygon

polygon も複数の点をつないで作りますが、
最後の点から最初の点まで自動的につながるため閉じた図形になります。

<polygon
    points="100,20 180,140 20,140"
    fill="#4CAF50"
    stroke="#333"
    stroke-width="3"
    stroke-linejoin="round" />

閉じた図形なので、
fill と stroke を組み合わせる使い方が分かりやすいです。

CSSから指定する

SVGの fill や stroke などは、
CSSから指定することもできます。

<svg
    width="200"
    height="150"
    xmlns="http://www.w3.org/2000/svg">

    <rect
        class="sample-shape"
        x="20"
        y="20"
        width="100"
        height="60" />

</svg>

.sample-shape {
    fill: #4CAF50;
    stroke: #333333;
    stroke-width: 3;
}

複数のSVG要素へ同じデザインを適用する場合は、
クラスにまとめておくと変更しやすくなります。

また、SVG側に fill="red" のような属性が書かれていても、
CSSから同じプロパティを指定している場合はCSS側の指定が反映されることがあります。

見た目が想定と違う場合は、
SVGの属性だけでなくCSS側も確認します。

currentColor を使う

色を周囲の文字色に合わせたい場合は currentColor も使えます。

<div class="sample-icon">

    <svg
        width="50"
        height="50"
        viewBox="0 0 50 50">

        <circle
            cx="25"
            cy="25"
            r="20"
            fill="currentColor" />

    </svg>

</div>

.sample-icon {
    color: red;
}

この場合、

fill="currentColor"

には .sample-icon の color が使われるため、
円も赤く表示されます。

アイコンと文字色を合わせたい場合などに便利です。

よく使う組み合わせ

塗りつぶし＋枠線

fill="#4CAF50"
stroke="#333"
stroke-width="2"

枠線だけ

fill="none"
stroke="#333"
stroke-width="2"

太い丸線

fill="none"
stroke="#333"
stroke-width="10"
stroke-linecap="round"
stroke-linejoin="round"

点線

fill="none"
stroke="#333"
stroke-width="3"
stroke-dasharray="10 5"

半透明の塗り＋通常の枠線

fill="#2196F3"
fill-opacity="0.3"
stroke="#2196F3"
stroke-width="2"

⚠️ ハマりやすいポイント

fill を変更しても線の色は変わらない

fill="red"

を指定して変更されるのは塗りつぶしです。

線の色を変更したい場合は、

stroke="red"

を指定します。

線として使っているpathは stroke を変更する

例えば、

<path
    d="M20 20 L100 100"
    fill="red"
    stroke="black" />

のような開いた path を線として表示している場合、
見えている線の色を変えるのは fill ではありません。

stroke="red"

を指定します。

fill は基本的に図形の内側を塗るための指定なので、
線を変更したいときはまず stroke を確認します。

CSSで上書きされていないか確認する

SVG側に、

fill="red"

と書いていても、
CSS側から fill が指定されていると想定とは違う色になることがあります。

見た目がおかしい場合は、

  • SVGの属性
  • style
  • CSSクラス

のどこで値が設定されているか確認します。

📝 まとめ

SVGの着色や線を変更するときは、
まずこのあたりを覚えておけば大体対応できます。

属性 用途
fill 塗りつぶし
stroke 線の色
stroke-width 線の太さ
stroke-linecap 線の端
stroke-linejoin 線の接続部分
stroke-dasharray 点線
opacity 全体の透明度
fill-opacity 塗りの透明度
stroke-opacity 線の透明度

path、rect、circle だけでなく、
line、polyline、polygon でも基本的な考え方は同じです。

自分の場合は fill と stroke はすぐ出てきても、
stroke-linecap や stroke-dasharray あたりを忘れがちなので、
今後はこの記事を見返そうと思います。

次回は、

CSSを使ったSVGのアニメーション

についてまとめる予定です。

0
0
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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?