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フレームワークの特徴と使い方の解説、Content LayerやServer Islandsなど5.0の変更はAstro 5の新機能と移行手順にまとめています。

まとめ：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系のパッチは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>要素のバイト数を比べました。

効果が大きいのは、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の両方で、端末から実際に入力して確かめています。

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防御の解説で扱っています。

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系向けの修正版が出ていません。

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の移行手順）
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の新機能と移行手順で解説しています。

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の画像最適化とパフォーマンス改善で扱っています。

関連記事

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