Inkscapeでファイル用アイコンを作る

　CC0の成果物を掲載した。再現可能な手順も残した。

成果物

file.svg

<svg version="1.0" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M32 0a8 8 0 0 0-8 8v240a8 8 0 0 0 8 8h192a8 8 0 0 0 8-8V72a8 8 0 0 0-.006-.125 8 8 0 0 0-.021-.39 8 8 0 0 0-.032-.405 8 8 0 0 0-.056-.373 8 8 0 0 0-.076-.42 8 8 0 0 0-.09-.35 8 8 0 0 0-.121-.423 8 8 0 0 0-.131-.356 8 8 0 0 0-.153-.383 8 8 0 0 0-.171-.357 8 8 0 0 0-.182-.348 8 8 0 0 0-.219-.357 8 8 0 0 0-.213-.324 8 8 0 0 0-.242-.319 8 8 0 0 0-.25-.31 8 8 0 0 0-.38-.416l-.085-.082-63.916-63.918a8 8 0 0 0-.049-.045 8 8 0 0 0-.27-.244 8 8 0 0 0-.32-.284 8 8 0 0 0-.351-.257 8 8 0 0 0-.291-.207 8 8 0 0 0-.365-.22 8 8 0 0 0-.33-.187 8 8 0 0 0-.457-.213 8 8 0 0 0-.25-.11 8 8 0 0 0-.48-.169 8 8 0 0 0-.288-.096 8 8 0 0 0-.447-.105 8 8 0 0 0-.338-.076 8 8 0 0 0-.422-.059 8 8 0 0 0-.37-.045A8 8 0 0 0 160 0zm8 16h112v56a8 8 0 0 0 .041.799 8 8 0 0 0 .94 3.037 8 8 0 0 0 .417.682 8 8 0 0 0 2.28 2.214 8 8 0 0 0 2.965 1.15A8 8 0 0 0 160 80h56v160H40zm128 11.312L204.688 64H168z" fill="currentColor"/></svg>

Light Dark ダウンロード(986 Byte)

• ダウンロードボタンを押すと入手できる
• Light/Darkコンボボックスで配色確認できる

　特徴は以下。

• ライセンスはCC0とする（著作権なし）
• fill:currentColor;にすることでライト／ダークモードに対応した
  • 文字色color属性値と同じ色になる

手順

1. ファイルの本体を描く
   1. 矩形を描く
      1. 画面左の矩形ツールをクリックする
      2. ページ内をドラッグして適当なサイズの矩形を描く
      3. 画面上の幅と高さをそれぞれ192,240にする
   2. 矩形の設定
      1. 塗りなし
         1. 画面右のフィル/ストロークをクリックする
         2. 画面右の上に現れた領域にあるフィルタブをクリックする
         3. 塗りなしボタンをクリックする
      2. 線の幅と角丸
         1. 画面右の上に現れた領域にあるストロークのスタイルタブをクリックする
         2. 幅に16を入力する
         3. 角は丸結合ボタンを押す
   3. 矩形を整列する
      1. 画面右の整列と配置をクリックする
      2. 画面右の上に現れた領域のUIを以下のように操作する
         1. 整列にある基準をページにする
         2. 整列にある中心を垂直軸に合わせるをクリックする
         3. 整列にある水平軸の中心に合わせるをクリックする
2. 右上の角を折り曲げた部分を描く１
   1. 矩形を描く
      1. 画面左の矩形ツールをクリックする
      2. ページ外をドラッグして適当なサイズの矩形を描く
      3. 画面上の幅と高さをそれぞれ64,64にする
   2. 矩形を整列する
      1. 画面左の選択ツールをクリックする
      2. マウスでドラッグして、ファイル矩形の右上角に位置を合わせる

　ここまでで大枠はできた。しかし右上角の折り曲げが正しく表現できていない。対角線を引いた斜めの図形、つまり三角形にしたい。これは図形を組み合わせることで実現する。以下にその手順を示す。

1. 右上の角を折り曲げた部分を描く２
   1. 右上角の矩形を複製する
      1. 画面左の選択ツールをクリックする
      2. クリップの矩形をクリックする
      3. メニューー→編集→コピーをクリックする
      4. メニューー→編集→ペーストをクリックする
      5. ペーストされた二個目のクリップは適当な場所に置いておく
   2. 右上角とファイルの差分図形を作る
      1. 画面左の選択ツールをクリックする
      2. ファイルの矩形をクリックする
      3. Shiftキーを押下しながら、最初に作った右上角の矩形をクリックする（コピーしたほうは選択しない）
      4. ファイルと右上角の二つが選択された状態であることを確認する
      5. メニュー→パス→差分をクリックする
      6. ファイルの右上が凹んで削れたことを確認する
2. 右上の角を折り曲げた部分を描く３
   1. コピーしていた二個目の右上角矩形を三角形にする
      1. 画面左の選択ツールをクリックする
      2. コピーしていた二個目の右上角矩形をクリックする
      3. メニュー→パス→オブジェクトをパスへを選ぶ
      4. 画面左のノードツールをクリックする
      5. コピーしていた二個目の右上角矩形をクリックする
      6. 削りたい頂点である右上の頂点をクリックする
      7. コントロールバーの選択ノードでパスを切断ボタンを押す
      8. コントロールバーの選択したノードを削除ボタンを押す
      9. 四角形の一辺が消えることを確認する
      10. 6と同じ右上の頂点をクリックする
      11. コントロールバーの選択したノードを削除ボタンを押す
      12. 三角形に近い形になったことを確認する
      13. 辺がないので辺を作る
          1. 左上の頂点をクリックする
          2. Shiftキーを押したまま右下の頂点をクリックする
          3. コントロールバーの選択した端点ノード同士を新しいセグメントで連結ボタンを押す
          4. 直角三角形が完成する
3. 右上の角を折り曲げた部分を移動する
   1. 画面左の選択ツールをクリックする
   2. 上記で作成した三角形をクリックする
   3. マウスでドラッグして右上の位置に合わせる

　ここまでで見た目上は完成した。しかし図形を単一のパスに変換することで軽量化できる。その工程を以下に示す。

1. 図形をパスに変換する
   1. 画面左の選択ツールをクリックする
   2. ファイルの矩形をクリックする
   3. Shiftキーを押下しながら、右上角の三角形をクリックする
   4. ファイル矩形と三角形の二つが選択された状態であることを確認する
   5. メニュー→パス→結合をクリックする
   6. メニュー→パス→オブジェクトをパスへをクリックする
   7. メニュー→パス→ストロークをパスに変換をクリックする

　最後に保存する。

1. メニュー→ファイル→名前を付けて保存
2. ダイアログ→名前にfile.svg等を入力する
3. 保存ボタンを押下する

　尚、保存形式はInkscape SVG、最適化 SVGの二種類が候補になるが、いずれにせよ無駄なデータが付与している。そこで、さらなる軽量化のためSVGOMGを使う。

1. SVGOMGにアクセスする
2. 作成したSVGファイルをドラッグ＆ドロップする
3. Remove ViewBoxのチェックを外す
4. Downloadボタンを押す

　それでも無駄なデータがついている。最終的にはテキストエディタで開いて確認し、ブラウザなどのSVG表示ツールで見た目に問題ないか確認して完成する。

1. ダウンロードしたSVGファイルをテキストエディタで開く
2. style属性値をすべて消す
3. fill属性値にcurrentColorを追記する
4. ファイル保存する

　以上。

図解

　ノードツール選択時におけるコントロールバーのボタンについて。

選択ノードでパスを切断

選択したノードを削除

選択した端点ノード同士を新しいセグメントで連結

前回まで

• Inkscapeでクリップボード用アイコンを作る