SVG、WebP、AVIFの書き出しや変換はどうやって行う？

2023年12月 6日　Posted　野々瀨(フロントエンドエンジニア)

Webページで画像を扱う場合に近年ではSVGやWebPが主流になりつつあり、AVIFも少しずつ見かけるようになりました。しかし、自身で出力しようとした場合、その方法が分からなかったりすることがあると思います。今回はそんなSVG、WebP、AVIFの書き出しや変換をどのようにして行うのか、一部ご紹介します。

読んでいただくにあたって

幾つかのアプリケーションが登場しますが、実際の使い方については限定してご紹介しています。全てご紹介することはできませんので、ご了承ください。

SVGへの書き出し

SVGは次のようなアプリケーションで書き出すことができます。

書き出すオブジェクトがベクターデータであることに限ります。例えば、Adobe Illustratorでは、次のような感じです。

なお、一部のアプリケーションではラスターデータでも書き出すことはできますが、中身がbase64で書き出されますのでご注意ください。

Adobe Illustratorでの書き出し方法

Adobe Illustratorで書き出す場合幾つか方法がありますが、例えば、次のようにして書き出すことができます。

  1. 「レイヤー」パネルから書き出したいレイヤーを選択
  2. 「書き出し用に追加」ボタンを押す
  3. 「アセットの書き出し」パネルを開く
  4. 追加されたアイテムを選択
  5. 形式のプルダウンから「SVG」を選択
  6. 「書き出し」ボタンを押す

次のようなコードが書かれたファイルが出力されます。

Webページで使用する際には、余分なタグなどを削って保存しておくとよいでしょう。

ちなみに、ラスターデータでも書き出すことはできますが、中身がbase64で書き出されますのでご注意ください。

Figmaでの書き出し方法

Figmaで書き出す場合は次のようにして行います。

  1. 書き出したいレイヤーを選択
  2. 「デザイン」パネルにある「エクスポート」の「+」ボタン（追加ボタン）を押す
  3. 形式のプルダウンから「SVG」を選択
  4. 「～をエクスポート」ボタンを押す

WebPへの書き出し・変換

WebPはアプリケーションによる書き出し、コマンドラインによる変換、WordPressのプラグインによる変換、オンラインツールによる変換を行うことができます。

書き出しは次のアプリケーションで行うことができます。

コマンドラインによる変換は次のツールで行うことができます。

WordPressであれば、プラグインによって変換することができます。

オンラインツールでの変換は、次のサービスで行うことができます。

Adobe Photoshopでの書き出し方法

Adobe Photoshopで書き出す場合幾つか方法がありますが、例えば次のようにして書き出すことができます。

  1. メニューから「ファイル」を押し「コピーを保存」を押す
  2. 保存先フォルダーへ移動
  3. 「ファイルの種類」のプルダウンから「WebP (*.WEBP)」を選択
  4. 「保存」ボタンを押す
  5. 画質の調整などを行い「OK」ボタンを押す

コマンドラインツール「WebP Converter」での変換方法

ツールのインストール

コマンドラインツール「WebP Converter」で変換するには、まず次の手順でツールをインストールします。

  1. 次のページへアクセスし各プラットフォームに応じたZIPファイルをダウンロードhttps://developers.google.com/speed/webp/docs/precompiled?hl=ja
  2. ダウンロードしたZIPファイルを解凍し、任意の場所へ設置
  3. 環境変数を開き設置した場所のbinフォルダーを追加
  4. コマンドプロンプトなどのコマンドラインツールを開きcwebp -versionと入力し実行

これでバージョンが表示されればインストール完了です。

変換方法

変換するには次のように行います。

  1. コマンドプロンプトなどのコマンドツールを起動
  2. cwebp 元のファイルパス -o 出力ファイルパスという構文でコマンドを入力
    例：cwebp C:\temp\icon.png -o C:\temp\icon.webp
  3. Enterキーを押して実行

これで変換が完了です。圧縮率など、詳細なオプションについては次のページをご覧ください。https://developers.google.com/speed/webp/docs/cwebp?hl=ja

オンラインツール「File Converter」での変換方法

オンラインツール「File Converter」での変換は次のようにして行います。

  1. File Converter - CloudConvertページへアクセス
  2. 「Select File」ボタンを押す
  3. ダイアログボックスから変換したい画像ファイルを選択し「開く」ボタンを押す
  4. 「Convert to」のプルダウンを押し「WEBP」を押す
  5. 「Convert」ボタンを押す
  6. しばらく待って変換が完了するとモーダルウィンドウが表示される
  7. 「Download」ボタンを押す

これで完了です。

AVIFへの変換

AVIFはコマンドラインやオンラインツールで変換を行うことができます。

コマンドラインによる変換は次のツールで行うことができます。

オンラインツールでの変換は、次のサービスで行うことができます。

コマンドラインツール「ImageMagick」での変換方法

ツールのインストール

コマンドラインツール「ImageMagick」で変換するには、まず次の手順でツールをインストールします。

  1. 次のページへアクセスしプラットフォームに合わせてダウンロードするhttps://imagemagick.org/script/download.php
    例えば、Windowsなら「ImageMagick-x.x.x-x-Q16-HDRI-x64-dll.exe」のようなリンクを押す
  2. ダウンロードしたファイルを起動
  3. 手順に従ってインストール
  4. コマンドラインツールを起動しmagick -versionとコマンドを入力
  5. Enterキーを押して実行

これでバージョンが表示されればインストール完了です。

変換方法

変換するには次のように行います。

  1. コマンドプロンプトなどのコマンドツールを起動
  2. magick 元のファイルパス 出力ファイルパスという構文でコマンドを入力
    例：magick C:\temp\icon.png C:\temp\icon.avif
  3. Enterキーを押して実行

これで変換が完了です。圧縮率など、詳細な変換については次のページをご覧ください。https://imagemagick.org/script/command-line-processing.php

オンラインツール「Squoosh」での変換方法

オンラインツール「Squoosh」での変換は次のようにして行います。

  1. Squooshページへアクセス
  2. 変換したい画像ファイルをアクセスしたページへドラッグ&ドロップする
  3. 「Compress」項目のプルダウンメニューから「AVIF」を選択
  4. ダウンロードボタンを押す

これで完了です。