この短い記事では、Inkscapeのベクターグラフィックスエディターで作業するための便利なトリックをいくつか紹介します。これは、SVGコードの準備プロセスを高速化するのに役立ちます。
1.コンパクトなSVGの作成
デフォルトでは、Inkscapeは独自のSVG形式を使用します。これには、有用なメタ情報が大量に含まれています。 ドキュメントでの作業が終了した後、最終バージョンはプレーンSVG形式で保存するのが最適です。 これを行うには、[ ファイル ]- > [名前を付けて保存 ]メニュー（またはキーボードショートカットCtrl + Shift + Sを使用 ）を使用します。 開いたダイアログで、「 プレーンSVG 」を選択します 。
多くの場合、インターネット上で最適化されていない形式でベクター画像をアップロードしますが、よりコンパクトな形式で再保存する必要があります。
空のドキュメントをInkscape SVG形式で保存しても、そのサイズ（1.8Kb）はプレーンSVG （0.4Kb）よりも数倍大きくなります。
2.定規を使用します
ルーラー（キーボードショートカットCtrl + Rを使用して有効にできます）は、左上隅に図形を配置するのに役立つ便利なツールです。 そのような図形の初期座標は0.0に近くなります。つまり、位置-1000、-2000または3000、1000からプログラムでドラッグする必要はありません。 まあ、テキスト形式では、そのような数字は明らかにコンパクトになります。
3. Inkscapeを使用して、形状から情報をすばやく抽出します
pathなどのオブジェクトのプロパティにすばやくアクセスするには、組み込みのXMLエディターを使用できます。 キーボードショートカットCtrl + Shift + Xを使用して呼び出すことができます。 通常、アニメーション化するオブジェクトのパスをすばやくスケッチする必要がある場合に使用します。 たとえば、 SVG車でデモを準備するとき、各車のルートに関する情報を取得するのは非常に簡単で便利でした。
4.ウェイ最適化
最初は、パス要素pathを生成するためのSVG設定はかなり冗長です。 ポイントの後、座標内の各数値はさらに5つの数値を追加します。 例： 122.85714、295.21933 。 多くのタスクでは、このような精度は有用ですが、単純な数字の場合は精度を下げる方が良いでしょう。 その結果、122、295を取得できます。 そのような数値が多数ある場合は、設定で遊ぶのが理にかなっています。
Inkscapeはデフォルトで相対座標も使用します。 Web開発者にとって有用なのはまれな場合のみであるため、オフにすることをお勧めします。
[ファイル]-> [Inkscape設定]に移動するか、キーボードショートカットCtrl + Shift + Pを使用します。 左側に設定があるウィンドウで、 SVG Outputを選択します 。
[相対座標を許可する]をオフにして、 数値の精度を2に変更します。
その結果、Inkscapeはよりコンパクトなデータを生成します。
5.簡素化ツール
Inkscapeのもう1つの便利なツールはSimplifyです。 無関係なポイントを減らすことで、パス要素を簡素化し、コンパクトにします。 メニューから使用できます： Path-> Simplifyまたは、簡略化された要素を選択した後、 Ctrl + Lを押します。 Simplifyの作業に常に同意できるとは限りませんが、ほとんどの場合、そのように見つけるのが難しい関連性のないポイントを実際に削除します。