i18n(zh-cn): Add experimental-flags/svg.mdx

src/content/docs/zh-cn/reference/experimental-flags/svg.mdx

@@ -0,0 +1,100 @@
+---
+title: 实验性 SVG 组件
+sidebar:
+  label: SVG 组件
+i18nReady: true
+---
+
+import Since from '~/components/Since.astro'
+
+<p>
+
+**类型：** `boolean`<br />
+**默认值：** `false`<br />
+<Since v="5.0.0" />
+</p>
+
+该功能允许你导入 SVG 文件并将其作为 Astro 组件来使用。默认情况下，Astro 会将 SVG 内容内联到你的 HTML 输出中。
+
+要启用该功能，请在你的 Astro 配置中将 `experimental.svg` 设置为 `true`。
+
+ ```js
+{
+  experimental: {
+    svg: true,
+  },
+}
+```
+
+要使用该功能，请引用任意本地 `.svg` 文件的默认导入。由于此导入会被视为 Astro 组件，因此需要使用与 [使用动态标签](/zh-cn/reference/astro-syntax/#动态标签) 时相同的约定（例如：大写）。
+
+```astro
+---
+import Logo from './path/to/svg/file.svg';
+---
+
+<Logo />
+```
+
+## SVG 组件属性
+
+你可以传入诸如 `width`、`height`、`fill`、`stroke` 这样的属性，以及任何 [原生的 `<svg>` 元素](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg) 接受的其他属性。这些属性将自动应用于底层的 `<svg>` 元素。如果原有的 `.svg` 文件中已有某个将要传递给组件的属性，那么这个原有值将会被传入值覆盖。
+
+```astro
+---
+import Logo from '../assets/logo.svg';
+---
+
+<Logo width={64} height={64} fill="currentColor" />
+```
+
+### `size`
+
+为了方便起见，SVG 组件还接受 `size` 属性。 `size` 是将 `width` 和 `height` 属性设置为相同值的简写方式。
+
+以下示例使用 Astro 的 `size` 属性将宽度和高度设置为相同的 48，而无需分别设置 HTML `<svg>` 属性的 `width` 和 `height`：
+
+```astro
+<!-- 使用 size 属性来设置相同的宽度和高度 -->
+<Logo size={48} />
+```
+
+### `mode`
+
+在任意 SVG 组件上添加 `mode` 属性，以覆盖你默认配置的 `svg.mode` 技术来处理导入的 SVG 文件。
+
+以下示例生成了一个精灵序列图，而不是将图标的 SVG 内容内联到 HTML 输出中：
+
+```astro
+---
+import Logo from '../assets/logo.svg';
+---
+
+<Logo size={64} mode="sprite" />
+```
+
+## experimental.svg.mode
+
+<p>
+
+**类型：** `string`<br />
+**默认值：** `'inline'`<br />
+<Since v="5.0.0" />
+</p>
+
+处理导入的 SVG 文件的默认技术。如果未指定，Astro 会将 SVG 内容内联到 HTML 输出中。
+
+ ```js
+{
+  experimental: {
+    svg: {
+      mode: 'sprite',
+    }
+  },
+}
+```
+
+- `inline`：Astro 会将 SVG 内容内联到你的 HTML 输出中。（默认）
+- `sprite`：Astro 将生成包含所有导入的 SVG 文件的精灵序列图。
+
+有关完整概述以及对此实验性 API 的反馈，请参阅 [SVG 功能 RFC](https://github.com/withastro/roadmap/pull/1035)。