diff --git a/src/content/docs/ja/reference/experimental-flags/svg-optimization.mdx b/src/content/docs/ja/reference/experimental-flags/svg-optimization.mdx new file mode 100644 index 0000000000000..972d055668b66 --- /dev/null +++ b/src/content/docs/ja/reference/experimental-flags/svg-optimization.mdx @@ -0,0 +1,242 @@ +--- +title: 試験的なSVG最適化 +sidebar: + label: SVG最適化 +i18nReady: true +--- + +import Since from '~/components/Since.astro' + +

+ +**Type:** `SvgOptimizer`
+**Default:** `undefined`
+ +

+ +この試験的な機能を有効にすると、ビルド時に[SVGコンポーネント](/ja/guides/images/#svg-components)を自動的に最適化できます。 + +有効にすると、コンポーネントとしてインポートされたSVGファイルは、視覚的な品質を維持しながら、ファイルサイズの縮小とパフォーマンスの向上のために最適化されます。不要なメタデータ、コメント、冗長なコードを削除することで、SVGアセットのサイズを大幅に削減できます。 + +この機能を有効にするには、Astroの設定ファイルで`svgoOptimizer()`ヘルパーをインポートし、試験的な`svgOptimizer`フラグに割り当てます。 + +```js title="astro.config.mjs" ins={5} +import { defineConfig, svgoOptimizer } from "astro/config"; + +export default defineConfig({ + experimental: { + svgOptimizer: svgoOptimizer() + } +}); +``` + +## 使い方 + +この機能を活用するために、SVGコンポーネントの使い方を変更する必要はありません。試験的なSVG最適化を有効にすると、すべてのSVGコンポーネントのインポートファイルが自動的に最適化されます。 + +```astro title="src/pages/index.astro" +--- +import Logo from '../assets/logo.svg'; +--- + + +``` + +SVGはビルドプロセス中に最適化され、本番ビルドでのファイルサイズが小さくなります。 + +この最適化はプロジェクト内のすべてのSVGコンポーネントのインポートに適用されます。コンポーネント単位でオプトアウトすることはできません。 + +## SVGO + +Astroは[SVGO](https://svgo.dev/)を使用した1つの組み込みオプティマイザーを提供しています。 + +```js +import { svgoOptimizer } from "astro/config" +``` + +### 設定 + +最適化の動作をカスタマイズするために、[SVGOの設定オプション](https://github.com/svg/svgo#configuration)を含むオブジェクトを渡すことができます。 + +```js +svgoOptimizer({ + multipass: true, + floatPrecision: 2, + plugins: [ + 'preset-default', + 'removeXMLNS', + { + name: "removeXlink", + params: { + includeLegacy: true + } + } + ] +}); +``` + +#### `plugins` + +**Type:** `Array`
+**Default:** `[]` + +SVGコンポーネントのインポートを最適化するために使用する[SVGOプラグイン](https://svgo.dev/docs/plugins/)の配列です。 + +SVGOの[`preset-default`](https://svgo.dev/docs/preset-default/)プラグインコレクション、個別の組み込みプラグイン、または[カスタムプラグイン](https://svgo.dev/docs/plugins-api/)を含めることができます。 + +プラグインのデフォルト設定を使用するには、その名前を配列に追加します。より細かく制御したい場合は、`overrides`パラメーターを使用して`preset-default`内の特定のプラグインをカスタマイズするか、プラグインの`name`を含むオブジェクトを渡して個々のパラメーターをオーバーライドします。 + +```js +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の設定オプション](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335)を設定オブジェクトに直接渡すことができます。 + +```js +svgoOptimizer({ + multipass: true, + floatPrecision: 2, +}); +``` + +`multipass`オプションは、最適化エンジンをこれ以上最適化が見つからなくなるまで複数回実行するかどうかを設定します。`floatPrecision`オプションは小数点以下の桁数をグローバルに設定しますが、プラグインの`params`プロパティにカスタム値を指定することで、特定のプラグインに対してオーバーライドできます。 + +### 一般的なユースケース + +SVGOは、独自の判断による最適化を行う広範な[デフォルトプラグインリスト](https://svgo.dev/docs/preset-default/)を提供しています。このプリセットを使用する方が各プラグインを個別に追加するよりも便利ですが、さらにカスタマイズが必要な場合もあります。たとえば、特にアニメーションを使用する場合、状況によっては要素を削除したりクリーンアップしすぎることがあります。 + +### 特定の属性を保持する + +SVGOがデフォルトでインライン化または削除する`