やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > inkscape > Inkscapeでクリップボード用アイコンを作る

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

inkscape SVG

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

成果物

clipboard.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="256" height="256" viewBox="0 0 256 256"><path style="fill:currentColor;" d="M64 0a8 8 0 0 0-8 8v16H32a8 8 0 0 0-8 8v216a8 8 0 0 0 8 8h192a8 8 0 0 0 8-8V32a8 8 0 0 0-8-8h-24V8a8 8 0 0 0-8-8Zm8 16h112v48H72V32ZM40 40h16v32a8 8 0 0 0 .041.799 8 8 0 0 0 .12.79 8 8 0 0 0 .472 1.526 8 8 0 0 0 .765 1.403 8 8 0 0 0 .485.636 8 8 0 0 0 1.144 1.114 8 8 0 0 0 1.346.863 8 8 0 0 0 .729.326 8 8 0 0 0 1.54.426A8 8 0 0 0 64 80h128a8 8 0 0 0 1.59-.16 8 8 0 0 0 1.525-.473 8 8 0 0 0 .72-.347 8 8 0 0 0 .683-.418 8 8 0 0 0 2.214-2.28 8 8 0 0 0 .977-2.183A8 8 0 0 0 200 72V40h16v200H40Z"/></svg>

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

　特徴は以下。

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

準備

  1. Inkscape (version 0.92)を起動する
  2. 前回のテンプレートで新規作成する
    1. メニュー→ファイル→New from Template
    2. ダイアログ→検索にicon-cc0を入力→テンプレートから作成ボタン押下

　256x256の正方形領域ができた。あとはここにクリップボード用アイコンを描いていく。

手順

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

　ここまでで大枠はできた。しかしクリップとボードの線が重なっている。クリップ内部の線は消したい。これは図形を組み合わせることで実現する。以下にその手順を示す。

  1. クリップ内部の線を消す
    1. クリップを複製する
      1. 画面左の選択ツールをクリックする
      2. クリップの矩形をクリックする
      3. メニューー→編集→コピーをクリックする
      4. メニューー→編集→ペーストをクリックする
      5. ペーストされた二個目のクリップは適当な場所に置いておく
    2. ボードとクリップの差分図形を作る
      1. 画面左の選択ツールをクリックする
      2. ボードの矩形をクリックする
      3. Shiftキーを押下しながら、最初に作ったクリップの矩形をクリックする（コピーしたほうは選択しない）
      4. ボードとクリップの二つが選択された状態であることを確認する
      5. メニュー→パス→差分をクリックする
      6. ボードが凹んだことを確認する
  2. コピーしていた二個目のクリップボードを移動させる
    1. 画面左の選択ツールをクリックする
    2. コピーしていた二個目のクリップボードをクリックする
    3. 画面右の整列と配置をクリックする
    4. 整列にある基準をページにする
    5. 整列にある中心を垂直軸に合わせるをクリックする
    6. 整列にある上端で揃えるをクリックする

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

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

　最後に保存する。

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

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

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

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

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

　以上。

図解

　InkscapeにはUIが大量にあって文章だけでは伝わりにくいかもしれない。ボタンをマウスオーバーすれば各用語がポップアップされるが、念の為画像で補足する。

矩形ツール

選択ツール

幅、高さ

フィル/ストローク

　画面右下にある以下項目がポイント。特に整列と配置、フィル/ストロークの二つは今回使用した。

  • 整列と配置
  • PNG 画像にエクスポート
  • フィル/ストローク
  • レイヤー
  • Objects
  • 変形

整列と配置