---
title: "Astro 5.16の変更点｜SVGO最適化・previewショートカットと6/7系での扱い"
url: "https://www.issoh.co.jp/tech/details/9939/"
published: 2025-11-21
updated: 2026-10-03
categories: ["Astro"]
publisher: "株式会社一創"
---

# Astro 5.16の変更点｜SVGO最適化・previewショートカットと6/7系での扱い

Astro 5.16.0は2025年11月20日に公開されたマイナーリリースです。追加された機能は、SVGOによるSVGの自動最適化（実験的機能）、`astro preview`のキーボードショートカット、Actionの入力型を取り出す`ActionInputSchema`、`astro add`の`--yes`ヒントの4つです。実験的なFonts APIには、既定のサブセットを`latin`だけにする破壊的変更も入りました。

この記事では5.16で入った変更だけを扱い、astro 5.16.0と、2026年10月時点の現行版7.3.5で実際にビルドした結果を添えて説明します。Astroの全体像と現行版については[Astroフレームワークの特徴と使い方の解説](/tech/details/15369/)、Content LayerやServer Islandsなど5.0の変更は[Astro 5の新機能と移行手順](/tech/details/10386/)にまとめています。

## まとめ：Astro 5.16で変わった点と今の扱い

- `experimental.svgo`を有効にすると、コンポーネントとして読み込んだSVGがビルド時に圧縮されます。Inkscapeで作られたSVG（ページ埋め込み時23,074バイト）は19,243バイト（16.6%減）になりました。`dist/_astro/`に出力されるSVGファイルは圧縮されません。
- 5.16.0時点の公式ドキュメントにあった`{ name: 'removeViewBox', active: false }`の設定例は、SVGO 4では逆効果です。`active`は無視され、プラグイン名を書いた時点で有効になるため、`viewBox`が消えます。
- `astro preview`では`o`＋Enterでブラウザを開き、`q`＋Enterでプレビューを終了し、`h`＋Enterでショートカットの一覧を表示します。
- `experimental.svgo`は6.2.0で廃止され、`experimental.svgOptimizer: svgoOptimizer()`に置き換わりました。7.3.5に`svgo: true`を残すと設定エラーでビルドが止まります。
- 5系の最終版は5.18.2で、セキュリティ修正の対象からも外れています。5.16を使い続けるのではなく、7系に上げることを前提に計画してください。

## Astro 5.16.0の変更点一覧と6/7系での行き先

5.16.0のCHANGELOGに載ったMinor Changesは4件、破壊的変更を含むPatch Changesは1件（Fonts API）です。そのうち2件（SVGO最適化とFonts API）は、6系・7系で名前や置き場所が変わっています。

| 変更                     | 5.16での扱い              | 6/7系での扱い                  |
| ---------------------- | --------------------- | ------------------------- |
| SVGOによるSVG最適化          | `experimental.svgo`   | 6.2.0で`svgOptimizer`に置き換え |
| previewのショートカット        | o / q / h＋Enter       | 7.3.5でも同じ                 |
| `ActionInputSchema`型   | 追加                    | 引き続き利用可                   |
| `astro add`の`--yes`ヒント | 確認プロンプト時に表示（エージェント向け） | 7.3.5でも同じ                 |
| Fonts APIの既定サブセット      | `["latin"]`に変更（実験的機能） | 6.0.0でFonts APIが安定版に      |

5.16系のパッチは2026年1月28日の5.16.16まで出ており、翌日に5.17.0が公開されました。パッチでは、passthrough画像サービス使用時にSVGが開発モードで表示されない不具合（5.16.6）やCSPリソースの重複排除（5.16.4）に加え、ミドルウェアでの二重URLエンコードによる認証回避（5.16.3）が修正されています。実験的なFonts APIはパッチの中でも変わり続け、5.16.7〜5.16.14で破壊的変更が6回入ったほか、Google Iconsプロバイダー（5.16.9）や`getFontBuffer()`（5.16.13）も追加されています。

## SVGO最適化（experimental.svgo）の設定と削減量

### 有効化の設定とSVGコンポーネントの書き方

設定は`astro.config.mjs`に1行足すだけです。最適化されるのは、`import Logo from '../assets/logo.svg'`のように読み込んで`<Logo />`と書いた**SVGコンポーネント**だけです。プロジェクト内のすべてのSVGコンポーネントにまとめて適用され、コンポーネントごとに外すことはできません。

```
// astro.config.mjs（5.16〜6.1）
import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    svgo: true,
  },
});
```

`svgo`には`true`のほか、SVGOの設定オブジェクトも渡せます。`true`のときはSVGOの`preset-default`が使われます。Astroの内部（`dist/assets/utils/svg.js`）ではSVGOの`optimize()`が例外を投げると`CannotOptimizeSvg`エラーとしてビルドを止めるため、壊れたSVGが1つ混ざっているだけでビルド全体が失敗します。

### 実ビルドで測ったインラインSVGの削減量

2026年10月3日に、macOS・Node.js v26.5.0上のastro 5.16.0（同梱のSVGOは4.1.0）で同じページを`svgo`あり・なしでビルドし、HTMLに埋め込まれた`<svg>`要素のバイト数を比べました。

| SVG                           | 無効       | svgo: true | 削減率   |
| ----------------------------- | -------- | ---------- | ----- |
| Inkscapeロゴ（Wikimedia Commons） | 23,074 B | 19,243 B   | 16.6% |
| スターターのastro.svg               | 2,882 B  | 2,829 B    | 1.8%  |
| スターターのbackground.svg          | 1,424 B  | 1,423 B    | 0.1%  |
| ページ全体のHTML                    | 27,469 B | 23,584 B   | 14.1% |

効果が大きいのは、Inkscapeなどの編集ソフトが書き出したSVGです。インデント、冗長な`style`属性、小数点以下5〜8桁の座標が残っているためです。`npm create astro`のスターターに入っているSVGは最初から圧縮済みなので、ほとんど縮みません。

見落としやすいのは、`Logo.src`や`?url`で参照する**ファイルとしてのSVGは圧縮されない**点です。`dist/_astro/`に出力されたInkscapeロゴは、有効・無効のどちらでも23,080バイトのままでした。`<img src>`で配信しているSVGを軽くしたい場合は、SVGOをCLIで実行してからリポジトリに入れる必要があります。

### 公式例のactive: falseでviewBoxが消える問題

5.16.0の公開日（2025年11月20日）時点のAstro公式ドキュメントとCHANGELOGには、`viewBox`を残す目的で次の設定例が載っていました。

```
experimental: {
  svgo: {
    plugins: [
      'preset-default',
      { name: 'removeViewBox', active: false },
    ],
  },
}
```

この例はSVGO 4では逆の結果になります。SVGOはv3でプラグインの`active`プロパティを廃止しており、「名前を書いたプラグインは有効、書かなければ無効」という仕様に変わっているためです。さらにv4では、`removeViewBox`と`removeTitle`が`preset-default`から外れました。`viewBox="0 0 24 24"`のアイコンを`width={48}`で描画して確かめた結果は次のとおりです。

- `svgo: true`：`viewBox`と`<title>`が残り、コメントは削除され、パスは`m0 0 24 24`に短縮される
- 上の`active: false`の例：`viewBox`が消え、48pxの枠に24単位のパスが拡大されずに描かれる

Astroのドキュメントは2026年3月23日にSVGO 4に合わせて修正されています。ただし、5.16.0のCHANGELOG（GitHubとnpmに掲載）には今もこの例が残っています。`viewBox`を残したいだけなら、プラグイン配列は書かずに`true`にしてください。

### 6.2以降のsvgOptimizerへの書き換え

6.2.0で`svgOptimizer`フラグが追加され、`svgo`フラグは削除されました。最適化の処理を差し替えられる設計になり、SVGOを使う場合は同梱の`svgoOptimizer()`を渡します。

```
// astro.config.mjs（6.2以降・7.3.5で確認）
import { defineConfig, svgoOptimizer } from 'astro/config';

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

7.3.5で同じページをビルドすると、各SVGのバイト数は5.16.0の`svgo: true`のときと一致しました（19,243 B / 2,829 B / 1,423 B）。一方、`svgo: true`を残したままビルドすると、`Invalid or outdated experimental feature.`と表示されて終了コード1で止まります。5.16から上げるときは、このフラグの書き換えを最初に行ってください。

## astro previewのショートカットと7系での起動の違い

5.16.0から、`astro preview`の実行中にキー入力でプレビューサーバーを操作できるようになりました。5.16.0と7.3.5の両方で、端末から実際に入力して確かめています。

| 入力      | 動作               |
| ------- | ---------------- |
| o＋Enter | 既定のブラウザでサイトを開く   |
| q＋Enter | プレビューを終了（終了コード0） |
| h＋Enter | ショートカット一覧を表示     |

`h`で表示される一覧には`o`と`q`の2つしか出ません。起動時に案内は表示されず、標準入力が端末でない場合や環境変数`CI`がある場合は無効です（Vite 6.4.3の`bindCLIShortcuts`の条件）。Ctrl+Cでプロセスを強制終了しなくても、`q`で正常終了（終了コード0）できます。

7系では起動のしかたが変わっています。7.2.0で`astro preview --background`が追加され、AIコーディングエージェントからの実行を検知した場合は自動でバックグラウンド起動になります（7.3.4以降、Windowsでは前面で起動します）。この場合は端末にショートカットが出ず、`astro preview status`・`logs`・`stop`で操作します。エージェントのセッション内でも前面で起動したい場合は、`ASTRO_PREVIEW_BACKGROUND=0`を付けて実行してください。

## ActionInputSchemaによるActionの入力型の取り出し

`ActionInputSchema`は、`defineAction()`に渡したZodスキーマを型として取り出すユーティリティ型です。フォームの値の型をAction側の定義から作れるので、同じ形の型を別の場所に二重に書く必要がなくなります。

```
// src/actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro/zod';

export const server = {
  subscribe: defineAction({
    accept: 'form',
    input: z.object({
      email: z.string().email(),
      plan: z.enum(['free', 'pro']).default('free'),
    }),
    handler: async ({ email, plan }) => ({ email, plan }),
  }),
};

// src/check-types.ts（型を使う側・別ファイル）
import { type ActionInputSchema } from 'astro:actions';
import { z } from 'astro/zod';
import { server } from './actions';

type Schema = ActionInputSchema<typeof server.subscribe>;
type FormInput = z.input<Schema>;   // { email: string; plan?: 'free' | 'pro' }
type Parsed = z.output<Schema>;     // { email: string; plan: 'free' | 'pro' }
```

`z.input`と`z.output`のどちらを使うかで型が変わる点に注意してください。`default()`を付けた`plan`は、送信前の値（input）では省略できますが、検証後の値（output）では必須になります。astro 5.16.0と`astro sync`で生成した型をTypeScript 5.9.3で検査したところ、`plan: 'team'`を入力型に渡したときと、`plan`のない値を出力型に渡したときにだけ型エラーになりました。

## Fonts APIの既定サブセット変更とastro add –yes

実験的なFonts APIでは、取得するサブセットの既定値が`["latin"]`になりました。それまでは既定で多くのフォントファイルがダウンロードされていたためで、ギリシャ文字やキリル文字が必要な場合は`subsets: ["latin", "greek"]`のように明示します。Fonts APIは6.0.0で安定版になり、`experimental`の外のトップレベル`fonts`で設定します（7.3.5でビルドを確認）。

`astro add`のヒントは、コーディングエージェントが対話プロンプトで止まらないよう、`--yes`で確認を省略できることを案内するものです。`npx astro add react --yes`のように書けば、CIでも対話なしでインテグレーションを追加できます。

## 5.16時点のCSPとCSRF対策の扱い

「Astro CSP」「Astro CSRF」で調べてこの記事にたどり着く方が多いのですが、どちらも5.16で入った機能ではありません。

- **CSP**：5.9.0で`experimental.csp`として追加され、6.0.0で`security.csp`として安定版になりました。7.3.5に`experimental.csp`を残すと、`svgo`と同じ設定エラーで止まります。6.0からは`Astro.csp`がCSP無効時に`undefined`になるため、`Astro.csp?.insertDirective()`のように書く必要があります。
- **CSRF**：5.0.0で`security.checkOrigin`の既定値が`true`になり、オンデマンドでレンダリングするページへのPOSTなどで`Origin`ヘッダーが照合されます。5.16で設定は変わっていません。

```
// 5.9〜5.18（実験的機能）
export default defineConfig({ experimental: { csp: true } });

// 6.0以降（7.3.5でビルドを確認）
export default defineConfig({ security: { csp: true } });
```

CSPのディレクティブの選び方やnonce方式の仕組みは、[コンテンツセキュリティポリシー（CSP）の設定とXSS防御の解説](/tech/details/16358/)で扱っています。

## 5.16に留まるリスクと7系への上げ方

5.16を使い続ける理由は、2026年10月時点ではほぼありません。Astroの延長メンテナンスは「1つ前のメジャー版」へのセキュリティ修正だけで、7系が現行の今は6系が対象です。5系の最終版は2026年5月26日の5.18.2です。GitHub Security Advisoriesで影響範囲に5.16を含む主なものは次のとおりで、GHSA-g735以外は5系向けの修正版が出ていません。

| アドバイザリ                                | 深刻度      | 影響範囲            | 修正版    |
| ------------------------------------- | -------- | --------------- | ------ |
| GHSA-26w7-cxv4-gfx2（AVIF処理）           | critical | < 7.2.8         | 7.2.8  |
| GHSA-2pvr-wf23-7pc7（エラーページ取得のSSRF）    | high     | ≦ 6.4.4         | 6.4.6  |
| GHSA-4g3v-8h47-v7g6（View Transitions） | medium   | 2.9.0〜7.0.9     | 7.1.0  |
| GHSA-j687-52p2-xcff（define:vars）      | medium   | ≦ 6.1.1         | 6.1.6  |
| GHSA-376h-93r7-7g6f（base処理）           | medium   | ≦ 7.2.3         | 7.2.4  |
| GHSA-g735-7g2w-hh3f（remotePatterns）   | low      | 2.10.10超〜5.18.0 | 5.18.1 |

5.16.0のまま止めている場合は、5.16.3で修正されたミドルウェアの認証回避も残っています。criticalのGHSA-26w7は、既定の画像サービスであるSharpが使うlibheifの脆弱性で、信頼できないAVIF画像を最適化すると任意のコードが実行され得るものです。修正版の7.2.8はSharp 0.35.4を必要とします。一方、5.16.0の`sharp`の依存範囲は`^0.34.0`なので、5系のままでは依存関係の更新だけでは修正版のSharpに届きません。

上げる手順は次のとおりです。

1. `experimental`の中身を整理する。`svgo`は`svgOptimizer: svgoOptimizer()`に、`csp`は`security.csp`に、`fonts`はトップレベルに移す
2. `astro/zod`が6.0でZod 4になるため、Actionやコレクションのスキーマを見直す（`z.string().email()`はZod 4で非推奨）
3. 旧Content Collections（`src/content/config.ts`）と`Astro.glob()`を5系のうちに書き換える。7系ではどちらも既定でビルドエラーになる（`legacy.collectionsBackwardsCompat`で旧配置の設定だけは一時的に残せる。詳しくは[Astro 5の移行手順](/tech/details/10386/)）
4. `npm install astro@latest`と各インテグレーションの更新を同時に行い、`astro build`のエラー文を1つずつ潰す

手順1を後回しにすると、7系でのビルドは設定の検査の段階で止まります。ページ単位の問題が1件も表示されないまま終わるため、移行の見通しが立ちません。

## よくある質問

### Astro 5.16はいつリリースされましたか？

5.16.0は2025年11月20日に公開されました。5.16系のパッチは5.16.16（2026年1月28日）まで出ており、翌日に5.17.0が公開されています。

### AstroでSVGをコンポーネントとしてimportするには？

`import Logo from '../assets/logo.svg'`と読み込み、`<Logo width={64} />`のように書きます。渡した属性は出力される`<svg>`要素に付きます。5.16以降はここで読み込んだSVGだけが`svgo`の最適化の対象で、`Logo.src`で参照するファイルは圧縮されません。

### output: ‘hybrid’は5.16で使えますか？

使えません。`hybrid`は5.0.0で廃止され、`static`に統合されました。5.16.5からは、書いたままにすると移行方法を示すエラーが出ます。オンデマンドで描画したいページだけに`export const prerender = false`を書きます。経緯は[Astro 5の新機能と移行手順](/tech/details/10386/)で解説しています。

### Astroの現在のバージョンはいくつですか？

2026年10月3日時点のnpmの`latest`は7.3.5で、5系の最終版は5.18.2です。プロジェクトで使っている版は`npx astro --version`で確認できます。

### 5.16の画像最適化はSVG以外にも効きますか？

`svgo`の対象はSVGコンポーネントだけです。PNGやJPEGを変換する`<Image />`・`<Picture />`は5.16.0では変わっていません。設定と落とし穴は[Astroの画像最適化とパフォーマンス改善](/tech/details/2762/)で扱っています。

## 関連記事

- [Astroフレームワークとは？特徴と使い方・Next.jsとの使い分けを解説【2026年版】](/tech/details/15369/)
- [Astro 5の新機能と移行手順｜Content Layer・Server Islands・hybrid廃止をビルドで検証](/tech/details/10386/)
- [Astroの画像最適化とパフォーマンス改善｜astro:assetsとprefetchの実装](/tech/details/2762/)
- [コンテンツセキュリティポリシー（CSP）とは？nonce方式の設定とXSS防御の実装判断を解説](/tech/details/16358/)
- [アイランドアーキテクチャとは？仕組み・Astroの実装・PPRとの違い](/tech/details/2423/)

---

出典: [Astro 5.16の変更点｜SVGO最適化・previewショートカットと6/7系での扱い](<https://www.issoh.co.jp/tech/details/9939/>)（株式会社一創）