SVG画像の作成方法

スケーラブルベクターグラフィックス（SVG）は、JPEGやGIFのような他の画像フォーマットほど帯域幅を使用せずに、ウェブページ上でよりインタラクティブな要素を可能にし、ウェブデザインに最適です。 Adobe Illustratorのようないくつかのデジタルイラストレーションプログラムは、SVGオプションを提供し、無料でアクセスできるオンラインSVGコンバータウェブサイトがあります。このWikiHowでは、SVG画像を自分で作成する方法を紹介します。

知っておくべきこと

• JPGファイルをConvertioにアップロードして、SVG形式に変換することができます。
• Adobe Illustratorをお持ちであれば、カスタムベクターグラフィックスを作成し、SVGファイルとして書き出すことができます。
• Adobe Illustratorでは、プロジェクト内の個々のレイヤーにSVGフィルタを適用することもできます。

方法1

JPGからSVGへのコンバータを使用する

1. ウェブブラウザを開き、.ConvertioのJPGからSVGへのコンバータのページに移動します。
2. JPG画像のソースを選択します。コンバータメニューの上部に、SVGに変換するJPG画像ファイルをアップロードするためにアクセスできるさまざまなソースをリストした赤いツールバーが表示されます。
3. 変換したいファイルに移動します。ソースを選択すると、コンピュータのフォルダのライブラリを表示するダイアログボックスがポップアップ表示されます。そこから変換したいファイルのあるフォルダに移動し、ファイルを選択します。
4. 変換]をクリックします。ファイルがアップロードされると、メニュー画面の右下に赤いボタンが表示されます。ファイルサイズによっては数分かかる場合があります。
5. ダウンロードをクリックします。ファイルの変換が完了すると、コンバーターメニューのファイル名の右側に青いボタンが表示されます。クリックすると、画像がSVGファイルとしてパソコンにダウンロードされます。

方法2

Adobe Illustratorを使用する

1. Adobe Illustratorを開きます。Illustratorはグラフィックデザインアプリで、さまざまなツールや機能を使用して独自のアートを作成することができます。
2. 画像を作成します。Illustratorを開いたら、画面左側のツールバーから任意のツールを選択し、画像のデザインを開始します。
3. 画像の特定のレイヤーにSVG効果を適用します。画像にカスタムエフェクトを追加したい場合は、レイヤーを選択し、[エフェクト] > [SVG フィルタ] > [SVG フィルタの適用] をクリックします。次に、[SVGフィルタを編集] ボタンをクリックしてデフォルトコードを編集し、[OK] をクリックしてSVGエフェクトを保存します。
4. ファイルタブをクリックします。これは画面の左上にあります。
5. メニューからエクスポートを選択します。作成したSVGファイルをIllustratorの外部で表示・使用できるようにするには、エクスポートする必要があります。

   • 名前を付けて保存...を選択することもできますが、この場合、Illustratorでのみ表示・編集できるように保存されます。
6. 名前を付けてエクスポート...をクリックします。新しいメニューが表示され、Illustratorから好きな形式にファイルを書き出すことができます。

   • スクリーン用にエクスポート...を選択して、SVG画像をiOSやAndroidデバイスでアクセスできるように保存することもできます。
7. ファイルタイプのリストからSVGを選択します。Illustratorには、ウェブ対応のSVGファイルを含む、さまざまなファイルタイプが用意されています。
8. 保存をクリックします。画像がSVGファイルとして使用できるようになります。

この記事は、CC BY-NC-SAの下で公開されている「 How to Create SVG Images 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。