はじめに
SVG はテキストとして編集できるため、VS Code で作業する人は多いと思います。一方で、プレビューや PNG へのエクスポートまで含めると、VS Code と Inkscape を行き来しがちです。これは手数が増えます。
この記事では、VS Code を起点にして、SVG の編集、プレビュー、最適化、PNG と PDF へのエクスポートまで進める方法を紹介します。エクスポートは Inkscape (CLI) を使います。普段は VS Code だけ触れば作業できます。
この記事でできること
- VS Code のサイドプレビューで SVG の見た目を確認しながら編集できる
- SVGO で SVG を整形・圧縮できる
- VS Code から Inkscape (CLI) を呼び出し、PNG と PDF を出力できる
検証環境
- Windows 11
- VS Code
- Inkscape (1.x 系)
どうやって実現する？
VS Code には Tasks という仕組みがあります。ターミナルで実行するコマンドを、VS Code のメニューから呼び出せます。
この記事では、Tasks から Inkscape (CLI) を起動し、開いている SVG を PNG と PDF に変換します。ここで VS Code の変数展開を使います。たとえば ${file} は、現在開いているファイルのパスです。
Inkscape の準備
Windows では Inkscape の実行ファイルが複数あります。CLI 用には inkscape.com を使います。インストール先は環境によって異なりますが、既定では次の場所にあります。
例: C:\Program Files\Inkscape\bin\inkscape.com
OS 設定で C:\Program Files\Inkscape\bin にパスを通し、PowerShell で動作確認します。
inkscape.com --version
VS Code 拡張のインストール
Svg Preview のインストール
Svg Preview は、SVG を VS Code のサイドにプレビュー表示します。SVG を保存するとプレビューも更新されます。
svgo のインストール
SVGO は SVG の最適化ツールです。不要なメタデータを削る、パスを短くする、といった処理でファイルを軽くできます。svgo 拡張を入れると、VS Code のコマンドとして実行できます。
拡張のインストール後、コマンドパレット (Ctrl + Shift + P) で svgo と入力すると候補が出ます。
User tasks.json の作成
- VS Code で Ctrl + Shift + P
-
Tasks: Open User Tasksを実行 -
tasks.jsonを開く。未作成なら作成
PNG と PDF のエクスポート Task を追加する
User tasks.json に次を追加します。すでに tasks がある場合は、tasks 配列へ追記します。
{
"version": "2.0.0",
"tasks": [
{
"label": "SVG: Export PNG (Inkscape)",
"type": "process",
"command": "inkscape.com",
"args": [
"${file}",
"--export-type=png",
"--export-filename=${fileDirname}\\${fileBasenameNoExtension}.png"
],
"problemMatcher": []
},
{
"label": "SVG: Export PDF (Inkscape)",
"type": "process",
"command": "inkscape.com",
"args": [
"${file}",
"--export-type=pdf",
"--export-filename=${fileDirname}\\${fileBasenameNoExtension}.pdf"
],
"problemMatcher": []
}
]
}
type には process を使います。shell よりも引数の扱いが安定しやすいためです。
使い方
.svg として保存
はじめに、ファイルを .svg として保存します。 VS Code では .svg として保存されたファイルは画像で表示されますが、右上の Reopen as source code ボタンを押すとソースで表示できます。
プレビューを開く
SVG を開いた状態で Ctrl + Shift + P を押し、Svg Preview のコマンドを実行します。サイドにプレビューが表示されます。
SVG を最適化する
Ctrl + Shift + P を押し、svgo のコマンドを実行します。用途に応じて Format と Minify を使い分けます。
PNG と PDF にエクスポートする
保存済みの SVG を開いた状態で、Ctrl + Shift + P から Tasks: Run Task を実行します。次の Task を選ぶと、同じフォルダに出力されます。
- SVG: Export PNG (Inkscape)
- SVG: Export PDF (Inkscape)
未保存のファイルはエクスポートできません。Untitled のまま Task を実行すると、Inkscape はファイルを開けずに失敗します。必ず一度は名前を付けて保存します。
まとめ
VS Code の Tasks と Inkscape (CLI) を組み合わせると、SVG の作業を VS Code 起点で進められます。ツールを行き来する回数が減り、作業が止まりにくくなります。