このチュートリアルでは、作成したベクターグラフィックをスケーラブルベクターグラフィック（SVG）形式で保存する方法をお見せします。SVGファイルは、インターネットでの使用に特に適しており、品質を損なうことなく任意のサイズに拡大縮小できるため、少ないディスク容量しか必要としません。企業ロゴ、アイコン、または図面など、Inkscapeでベクターグラフィックを作成した後は、Webで最適に活用できるよう保存手順を解説します。
最も重要なポイント
- SVGファイルは高い拡張性と小さなファイルサイズを提供します。
- Inkscapeは、SVG形式でベクターグラフィックを保存し、レイヤーや補助線に関する特別な情報を含んでいます。
- 異なるSVGタイプがあります。Inkscape SVGとウェブ用に最適化されたSVGの2種類があります。
ステップバイステップの手順
ベクターグラフィックをSVG形式で保存するには、以下の手順に従ってください：
まず、Inkscapeでデザインが完成していることを確認してください。そうであれば、メニューバーの「ファイル」をクリックします。
ドロップダウンメニューから「名前を付けて保存」を選択します。これにより新しいウィンドウが開き、保存場所とファイルタイプを選択できます。
Inkscapeはデフォルトで独自のSVG形式で保存され、デザインのレイヤーや構造に関する情報が含まれています。しかし、ウェブでの使用には、最適化されたバージョンの使用が良いでしょう。ファイルを保存したいハードドライブ上の場所を探します。
ファイルタイプのドロップダウンメニューから通常のSVGまたは最適化されたSVGを選択します。最初の試みでは通常のSVGを選択してください。
例えば、Logo_normalなどという名前をファイルに付け、保存をクリックします。このファイルは通常のSVG形式で保存されます。
通常のSVGがInkscape SVGよりも通常約11KBであることに気づくでしょう。通常のSVGはわずか6KBでしかなく、格納容量がさらに少なくなったことがわかります。
次に、再度「ファイル」をクリックし、「名前を付けて保存」をクリックしますが、今回は最適化されたSVGを選択します。
ファイルをLogo_optimiertなどとして保存します。いくつかのオプションが表示されるため、ここでCSS属性をXML属性に変換したり、さまざまな最適化設定を行ったりできます。最善の選択肢を選ぶことをお勧めします。
選択を確認し、新しいファイルサイズを確認してください。最適化されたものは通常4KB程度にしかなりません。この方法により、さらにファイルが圧縮されることが示されます。
これらのファイルをブラウザで開くと、通常のSVGと最適化されたSVGが同じように見えることに気付くでしょう。結果を確認するため、ブラウザのアドレスバーにファイルのURLを入力します。
拡大縮小のテストを行うために、ブラウザのズームレベルを調整できます。例えば、50%にズームアウトしたり、300%までズームインしたりします。ズームレベルに関係なく、エッジが鮮明であることに気づくでしょう。
これらのSVGファイルの特性は、ウェブサイトでの使用に適しています。どれほど大きく表示しても、あなたのロゴがすべてのデバイスで明確に表示されることを確信できます。
グラフィックにSVG形式を使用することで、ファイルサイズを削減するだけでなく、デザインの品質がどんな解像度でも維持されることも確認できます。
概要
このチュートリアルでは、SVG形式でベクトルグラフィックを保存する方法を学びました。これにより、効率的にWebでデザインを活用し、拡縮性とファイルサイズの低さの利点を提供します。
