🐧

svgファイルを加工する

2025/04/10に公開

VS Code

SVG

tech

おなじデザインで色違い、サイズ違いだけで
ファイルを新たに作って管理するのめんどくさい...となったので
1ファイルだけ用意してどれほどパターン作れるのか試したときの記録です

環境

windows
vscode
拡張機能live server を使って確認しました

svgファイルを用意

google fontのiconを使いました
https://fonts.google.com/icons
任意のアイコンを選択してデフォルト設定のままダウンロードします

加工する

1. 外部参照する

svgファイルを直接定義せず、外部参照できるようにします

ダウンロードしたsvgファイルにidを追加する

- <svg
xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M660-160h40v-160h-40v160Zm20-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM200-800v640-640 200-200Zm80 400h147q11-23 25.5-43t32.5-37H280v80Zm0 160h123q-3-20-3-40t3-40H280v80ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h320l240 240v92q-19-6-39-9t-41-3v-40H480v-200H200v640h227q11 23 25.5 43T485-80H200Zm480-400q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480Z"/></svg>
+ <svg id="quick_reference"
xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M660-160h40v-160h-40v160Zm20-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM200-800v640-640 200-200Zm80 400h147q11-23 25.5-43t32.5-37H280v80Zm0 160h123q-3-20-3-40t3-40H280v80ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h320l240 240v92q-19-6-39-9t-41-3v-40H480v-200H200v640h227q11 23 25.5 43T485-80H200Zm480-400q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480Z"/></svg>

ファイルパスを指定する
useタグのxlink:href属性にダウンロードしたファイルパスと追加したID名を指定します
xlink:href="{ファイルパス}#<追加したid名>"

  <svg>
    <use xlink:href="./quick_reference_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg#quick_reference"></use>
  </svg>

2. 拡大縮小する

svgファイルはそのままにサイズ指定して拡大縮小します

ダウンロードしたファイルからwidth, height属性を削除

- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f">
  <path d="M660-160h40v-160h-40v160Zm20-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM200-800v640-640 200-200Zm80 400h147q11-23 25.5-43t32.5-37H280v80Zm0 160h123q-3-20-3-40t3-40H280v80ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h320l240 240v92q-19-6-39-9t-41-3v-40H480v-200H200v640h227q11 23 25.5 43T485-80H200Zm480-400q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480Z"/></svg>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#1f1f1f">
  <path d="M660-160h40v-160h-40v160Zm20-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM200-800v640-640 200-200Zm80 400h147q11-23 25.5-43t32.5-37H280v80Zm0 160h123q-3-20-3-40t3-40H280v80ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h320l240 240v92q-19-6-39-9t-41-3v-40H480v-200H200v640h227q11 23 25.5 43T485-80H200Zm480-400q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480Z"/></svg>

拡大する
ダウンロードした１０倍にする

  <svg width="240px" height="240px">
    <use xlink:href="./quick_reference_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg#quick_reference"></use>
  </svg>

縮小する
ダウンロードした1/2倍にする

  <svg width="12px" height="12px">
    <use xlink:href="./quick_reference_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg#quick_reference"></use>
  </svg>

CSSでも同様に設定できます
どちらも設定した場合、css設定が優先されます

/* <svg width="120px" height="120px"> と書いても実際は12pxで表示される */
     svg {
        width: 12px;
        height: 12px;
    }

3. 色指定する

svgファイルはそのままにスタイル変更して色を変更します

ダウンロードしたファイルからfill属性をすべて削除

- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f">
  <path d="M660-160h40v-160h-40v160Zm20-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM200-800v640-640 200-200Zm80 400h147q11-23 25.5-43t32.5-37H280v80Zm0 160h123q-3-20-3-40t3-40H280v80ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h320l240 240v92q-19-6-39-9t-41-3v-40H480v-200H200v640h227q11 23 25.5 43T485-80H200Zm480-400q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480Z"/></svg>
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
  <path d="M660-160h40v-160h-40v160Zm20-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM200-800v640-640 200-200Zm80 400h147q11-23 25.5-43t32.5-37H280v80Zm0 160h123q-3-20-3-40t3-40H280v80ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h320l240 240v92q-19-6-39-9t-41-3v-40H480v-200H200v640h227q11 23 25.5 43T485-80H200Zm480-400q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480Z"/></svg>

色指定する

    svg {
      width: 24px;
      height: 24px;
      fill: red;
    }

  <svg>
    <use xlink:href="./quick_reference_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg#quick_reference"></use>
  </svg>

透過させる

アイコンの透明度指定により、濃淡の色違いを作成できました

    svg {
      width: 24px;
      height: 24px;
      fill: red;
      fill-opacity: 0.5;
    }

  <svg>
    <use xlink:href="./quick_reference_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg#quick_reference"></use>
  </svg>

グラデーションさせる

アイコンのグラデーションもつくることができました
ただし、外部参照させる方法ではできませんでした..

    .mask-img {
      width: 24px;
      height: 24px;
      background: linear-gradient(to bottom right, rgb(7, 67, 105), rgb(172, 191, 191), rgb(242, 225, 207), rgb(255, 110, 61));
      -webkit-mask-image: url(./quick_reference_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg);
      mask-image: url(./quick_reference_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg);
      mask-repeat: no-repeat;
    }

<div class="mask-img"></div>

4. 反転させる

    svg {
      width: 24px;
      height: 24px;
      transform: rotateY(180deg);
    }

  <svg>
    <use xlink:href="./quick_reference_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg#quick_reference"></use>
  </svg>

まとめ

これだけバリデーションつくれたので1ファイルでだいぶまかなえそうです
加工したsvgファイルを表示している画面キャプチャ