🦮

svgを分解して一部のスタイルだけ変える

に公開
CSS
HTML
SVG
tech

svg分解してスタイルつけたときの備忘録です

きっかけ

クリックのたびにアイコン(svg)の一部の色を変更したいが
クリックのたびに表示するアイコンをすべて用意できない
(アイコンの色だけ違うsvgファイルはたくさん作りたくない....)

環境

windows 11
vscode
chrome

分解する

pathごとにまとまっていれば、分解が可能です
pathがM...Zが1つのpathです

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12">
  <path d="M4.27974 0.970313C3.98677 0.677344 3.51099 0.677344 3.21802 0.970313L0.968018 3.22031C0.675049 3.51328 0.675049 3.98906 0.968018 4.28203C1.26099 4.575 1.73677 4.575 2.02974 4.28203L3.00005 3.31172V10.5C3.00005 10.9148 3.33521 11.25 3.75005 11.25C4.16489 11.25 4.50005 10.9148 4.50005 10.5V3.31172L5.47036 4.28203C5.76333 4.575 6.23911 4.575 6.53208 4.28203C6.82505 3.98906 6.82505 3.51328 6.53208 3.22031L4.28208 0.970313H4.27974ZM12.5297 8.78203C12.8227 8.48906 12.8227 8.01328 12.5297 7.72031C12.2368 7.42734 11.761 7.42734 11.468 7.72031L10.5 8.68828V1.5C10.5 1.08516 10.1649 0.75 9.75005 0.75C9.33521 0.75 9.00005 1.08516 9.00005 1.5V8.68828L8.02974 7.71797C7.73677 7.425 7.26099 7.425 6.96802 7.71797C6.67505 8.01094 6.67505 8.48672 6.96802 8.77969L9.21802 11.0297C9.51099 11.3227 9.98677 11.3227 10.2797 11.0297L12.5297 8.77969V8.78203Z"/>
</svg>

グルーピング

分解したpathごとにgタグでまとめます

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12">
  <g>
    <path d="M4.27974 0.970313C3.98677 0.677344 3.51099 0.677344 3.21802 0.970313L0.968018 3.22031C0.675049 3.51328 0.675049 3.98906 0.968018 4.28203C1.26099 4.575 1.73677 4.575 2.02974 4.28203L3.00005 3.31172V10.5C3.00005 10.9148 3.33521 11.25 3.75005 11.25C4.16489 11.25 4.50005 10.9148 4.50005 10.5V3.31172L5.47036 4.28203C5.76333 4.575 6.23911 4.575 6.53208 4.28203C6.82505 3.98906 6.82505 3.51328 6.53208 3.22031L4.28208 0.970313H4.27974Z"/>
  </g>
  <g>
    <path d="M12.5297 8.78203C12.8227 8.48906 12.8227 8.01328 12.5297 7.72031C12.2368 7.42734 11.761 7.42734 11.468 7.72031L10.5 8.68828V1.5C10.5 1.08516 10.1649 0.75 9.75005 0.75C9.33521 0.75 9.00005 1.08516 9.00005 1.5V8.68828L8.02974 7.71797C7.73677 7.425 7.26099 7.425 6.96802 7.71797C6.67505 8.01094 6.67505 8.48672 6.96802 8.77969L9.21802 11.0297C9.51099 11.3227 9.98677 11.3227 10.2797 11.0297L12.5297 8.77969V8.78203Z"/>
  </g>
</svg>

適用

    input[type="checkbox"]:checked ~ svg>g {
      &:first-child {
        fill: blue
      }
      &:last-child {
        fill: gray
      }
    }

    svg>g {
      &:first-child {
        fill: gray
      }
      &:last-child {
        fill: blue
      }
    }

htmlに書いてみる

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input[type="checkbox"]:checked~svg>g {
      &:first-child {
        fill: blue
      }

      &:last-child {
        fill: gray
      }
    }

    svg>g {
      &:first-child {
        fill: gray
      }

      &:last-child {
        fill: blue
      }
    }
  </style>
</head>

<body>
  <label for="up-down">
    <input type="checkbox" name="" id="up-down">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12" width="14" height="12">
      <g>
        <path
          d="M4.27974 0.970313C3.98677 0.677344 3.51099 0.677344 3.21802 0.970313L0.968018 3.22031C0.675049 3.51328 0.675049 3.98906 0.968018 4.28203C1.26099 4.575 1.73677 4.575 2.02974 4.28203L3.00005 3.31172V10.5C3.00005 10.9148 3.33521 11.25 3.75005 11.25C4.16489 11.25 4.50005 10.9148 4.50005 10.5V3.31172L5.47036 4.28203C5.76333 4.575 6.23911 4.575 6.53208 4.28203C6.82505 3.98906 6.82505 3.51328 6.53208 3.22031L4.28208 0.970313H4.27974Z" />
      </g>
      <g>
        <path
          d="M12.5297 8.78203C12.8227 8.48906 12.8227 8.01328 12.5297 7.72031C12.2368 7.42734 11.761 7.42734 11.468 7.72031L10.5 8.68828V1.5C10.5 1.08516 10.1649 0.75 9.75005 0.75C9.33521 0.75 9.00005 1.08516 9.00005 1.5V8.68828L8.02974 7.71797C7.73677 7.425 7.26099 7.425 6.96802 7.71797C6.67505 8.01094 6.67505 8.48672 6.96802 8.77969L9.21802 11.0297C9.51099 11.3227 9.98677 11.3227 10.2797 11.0297L12.5297 8.77969V8.78203Z" />
      </g>
    </svg>
  </label>
</body>

</html>

ブラウザでhtmlファイルを開くとチェックボックスの変更に応じてアイコンの色が変化します
チェックなしのときのアイコン画面キャプチャ チェックをつけたときのアイコン画像キャプチャ

部品化して、ファイル参照する

画面が増えるたびにsvgをすべて書くのはてまなので、ファイル参照できるようにします

https://developer.mozilla.org/ja/docs/Web/SVG/Reference/Element/use#使用上のメモ

svgファイル改造

早速svgタグで囲っていた部分を切り分けてsvgファイルを作成します
ここから一部分のスタイルおよびサイズを変更できるようにします

  • 各パーツのサイズを指定できるようタグをgからsymbolに変更
  • viewBoxはベースとなるサイズを指定するものなので必ず指定
  • useタグで呼び出す際idを指定する必要があるので追加
updown.svg
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12" width="14" height="12">
+ <svg xmlns="http://www.w3.org/2000/svg">
-  <g>
+  <symbol id="up" viewBox="0 0 14 12">
    <path
      d="M4.27974 0.970313C3.98677 0.677344 3.51099 0.677344 3.21802 0.970313L0.968018 3.22031C0.675049 3.51328 0.675049 3.98906 0.968018 4.28203C1.26099 4.575 1.73677 4.575 2.02974 4.28203L3.00005 3.31172V10.5C3.00005 10.9148 3.33521 11.25 3.75005 11.25C4.16489 11.25 4.50005 10.9148 4.50005 10.5V3.31172L5.47036 4.28203C5.76333 4.575 6.23911 4.575 6.53208 4.28203C6.82505 3.98906 6.82505 3.51328 6.53208 3.22031L4.28208 0.970313H4.27974Z" />
-  </g>
+  </symbol>
-  <g>
+  <symbol id="down" viewBox="0 0 14 12">
    <path
      d="M12.5297 8.78203C12.8227 8.48906 12.8227 8.01328 12.5297 7.72031C12.2368 7.42734 11.761 7.42734 11.468 7.72031L10.5 8.68828V1.5C10.5 1.08516 10.1649 0.75 9.75005 0.75C9.33521 0.75 9.00005 1.08516 9.00005 1.5V8.68828L8.02974 7.71797C7.73677 7.425 7.26099 7.425 6.96802 7.71797C6.67505 8.01094 6.67505 8.48672 6.96802 8.77969L9.21802 11.0297C9.51099 11.3227 9.98677 11.3227 10.2797 11.0297L12.5297 8.77969V8.78203Z" />
-  </g>
+  </symbol>
</svg>

htmlに書いてみる

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input[type="checkbox"]:checked~svg use {
      &:first-child {
        fill: blue
      }

      &:last-child {
        fill: gray
      }
    }

    svg>use {
      &:first-child {
        fill: gray
      }

      &:last-child {
        fill: blue
      }
    }
  </style>
</head>

<body>
  <label for="up-down">
    <input type="checkbox" name="" id="up-down">
    <svg width="14" height="12">
      <use width="14" height="12" href="updown.svg#up"></use>
      <use width="14" height="12" href="updown.svg#down"></use>
    </svg>
  </label>
</body>

</html>

ローカルサーバを起動し、ブラウザで確認すると先ほどと同じ画面になります

注意点

  • cssでスタイルを適用する際、参照先のタグを指定しても適用できません
  • svgタグにはwidth, heightを指定しておきます
    指定しなかった場合、よこ300px、たて150pxです
  • useタグのwidth,heightには任意の値を設定できます
    設定を省略することも可
    省略した場合、svgタグで設定した値になります

Discussion