試験的なSVG最適化

Type: SvgOptimizer
Default: undefined

追加： astro@5.16.0

この試験的な機能を有効にすると、ビルド時にSVGコンポーネント (EN)を自動的に最適化できます。

有効にすると、コンポーネントとしてインポートされたSVGファイルは、視覚的な品質を維持しながら、ファイルサイズの縮小とパフォーマンスの向上のために最適化されます。不要なメタデータ、コメント、冗長なコードを削除することで、SVGアセットのサイズを大幅に削減できます。

この機能を有効にするには、Astroの設定ファイルでsvgoOptimizer()ヘルパーをインポートし、試験的なsvgOptimizerフラグに割り当てます。

import { defineConfig, svgoOptimizer } from "astro/config";

export default defineConfig({
  experimental: {
    svgOptimizer: svgoOptimizer()
  }
});

使い方

この機能を活用するために、SVGコンポーネントの使い方を変更する必要はありません。試験的なSVG最適化を有効にすると、すべてのSVGコンポーネントのインポートファイルが自動的に最適化されます。

---
import Logo from '../assets/logo.svg';
---

<Logo />

SVGはビルドプロセス中に最適化され、本番ビルドでのファイルサイズが小さくなります。

この最適化はプロジェクト内のすべてのSVGコンポーネントのインポートに適用されます。コンポーネント単位でオプトアウトすることはできません。

SVGO

AstroはSVGOを使用した1つの組み込みオプティマイザーを提供しています。

import { svgoOptimizer } from "astro/config"

設定

最適化の動作をカスタマイズするために、SVGOの設定オプションを含むオブジェクトを渡すことができます。

svgoOptimizer({
  multipass: true,
  floatPrecision: 2,
  plugins: [
    'preset-default',
    'removeXMLNS',
    {
      name: "removeXlink",
      params: {
        includeLegacy: true
      }
    }
  ]
});

`plugins`

Type: Array<string | PluginConfig>
Default: []

SVGコンポーネントのインポートを最適化するために使用するSVGOプラグインの配列です。

SVGOのpreset-defaultプラグインコレクション、個別の組み込みプラグイン、またはカスタムプラグインを含めることができます。

プラグインのデフォルト設定を使用するには、その名前を配列に追加します。より細かく制御したい場合は、overridesパラメーターを使用してpreset-default内の特定のプラグインをカスタマイズするか、プラグインのnameを含むオブジェクトを渡して個々のパラメーターをオーバーライドします。

svgoOptimizer({
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          convertPathData: false,
          convertTransform: {
            degPrecision: 1,
            transformPrecision: 3
          },
          inlineStyles: false
        },
      },
    },
    'removeXMLNS',
    {
      name: "removeXlink",
      params: {
        includeLegacy: true
      }
    }
  ]
});

その他の設定オプション

特にfloatPrecisionとmultipassなど、いくつかのSVGOの設定オプションを設定オブジェクトに直接渡すことができます。

svgoOptimizer({
  multipass: true,
  floatPrecision: 2,
});

multipassオプションは、最適化エンジンをこれ以上最適化が見つからなくなるまで複数回実行するかどうかを設定します。floatPrecisionオプションは小数点以下の桁数をグローバルに設定しますが、プラグインのparamsプロパティにカスタム値を指定することで、特定のプラグインに対してオーバーライドできます。

一般的なユースケース

SVGOは、独自の判断による最適化を行う広範なデフォルトプラグインリストを提供しています。このプリセットを使用する方が各プラグインを個別に追加するよりも便利ですが、さらにカスタマイズが必要な場合もあります。たとえば、特にアニメーションを使用する場合、状況によっては要素を削除したりクリーンアップしすぎることがあります。

特定の属性を保持する

SVGOがデフォルトでインライン化または削除する<style>などの特定のSVG属性や要素を保持したい場合があります。

svgoOptimizer({
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: false, // Preserve style elements for CSP hashing
          removeDesc: false // Keep element regardless of contents
        }
      }
    }
  ]
});

特定の要素を削除する

メタデータや非表示レイヤーなど、不要な特定の要素を削除するようにプラグインを設定できます。多くのプラグインはすでにpreset-defaultに含まれているため、通常はその動作を設定するだけで十分です。

svgoOptimizer({
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeHiddenElems: {
            isHidden: false,
            displayNone: false
          }
        },
      },
    },
    'removeRasterImages'
  ]
});

SVGオプティマイザーの構築

追加： astro@6.2.0

カスタムSVGオプティマイザーを実装するための推奨する方法は、設定をパラメーターとして受け取り、SvgOptimizerオブジェクトを返す関数をエクスポートすることです。

import type { SvgOptimizer } from "astro";
import { optimize, type Options } from "./optimizer";

export function mySvgOptimizer(options?: Options): SvgOptimizer {
  return {
    name: "my-optimizer",
    optimize: (contents) => optimize(contents, options),
  }
}

`name`

Type: string

ログで使用されるオプティマイザーの一意の名前です。

`optimize()`

Type: (contents: string) => string | Promise<string>

SVGのコンテンツを処理します。

仕組み

SVG最適化はランタイムではなく、ビルドプロセス中に行われます。

開発モードでは、より高速な再ビルド時間とスムーズな開発体験を確保するために、SVGファイルは最適化されません。
本番ビルドでは、インポートされたすべてのSVGファイルがビルドプロセス中に一度最適化され、ファイルサイズが小さくなります。
ランタイムオーバーヘッドはありません - 最適化されたSVGは事前に処理された静的アセットとして配信されます。

最適化プロセスによってビルド時間がわずかに増加する場合がありますが、その結果としてファイルサイズが小さくなり、ユーザーのページ読み込みが速くなります。

貢献するコミュニティスポンサー