withastro · yanthomasdev · May 2, 2026 · May 2, 2026 · May 2, 2026
diff --git a/src/content/docs/ko/reference/experimental-flags/svg-optimization.mdx b/src/content/docs/ko/reference/experimental-flags/svg-optimization.mdx
@@ -9,30 +9,30 @@ import Since from '~/components/Since.astro'
 
 <p>
 
-**타입:** `boolean | object`<br />
+**타입:** `SvgOptimizer`<br />
 **기본값:** `false`<br />
 <Since v="5.16.0" />
 </p>
 
-이 실험적인 기능은 빌드 시점에 [SVGO](https://svgo.dev/)를 사용하여 [SVG 컴포넌트](/ko/guides/images/#svg-컴포넌트)를 자동으로 최적화합니다.
+이 실험적인 기능은 빌드 시점에 [SVG 컴포넌트](/ko/guides/images/#svg-컴포넌트)를 자동으로 최적화합니다.
 
 이 기능을 활성화하면 컴포넌트로 사용되는 SVG 파일이 시각적 품질을 유지하면서 더 작은 파일 크기와 더 나은 성능을 위해 최적화됩니다. 이를 통해 불필요한 메타데이터, 주석, 중복된 코드를 제거하여 SVG 자산의 크기를 크게 줄일 수 있습니다.
 
-이 기능을 활성화하려면 Astro 구성에서 `true`로 설정하세요.
+이 기능을 활성화하려면 Astro 설정에서 `svgoOptimizer()` 헬퍼를 가져와 실험적 `svgOptimizer` 플래그에 할당하세요.
 
 ```js title="astro.config.mjs" ins={5}
-import { defineConfig } from "astro/config"
+import { defineConfig, svgoOptimizer } from "astro/config";
 
 export default defineConfig({
   experimental: {
-    svgo: true
+    svgOptimizer: svgoOptimizer()
   }
-})
+});
 ```
 
 ## 사용 방법
 
-이 기능을 활용하기 위해 SVG 컴포넌트의 사용 방법을 변경할 필요는 없습니다. 실험적 `svgo`를 활성화하면 가져온 모든 SVG 컴포넌트 파일이 자동으로 최적화됩니다.
+이 기능을 활용하기 위해 SVG 컴포넌트의 사용 방법을 변경할 필요는 없습니다. 실험적 SVG 최적화를 활성화하면 가져온 모든 SVG 컴포넌트 파일이 자동으로 최적화됩니다.
 
 ```astro title="src/pages/index.astro"
 ---
@@ -46,32 +46,36 @@ SVG는 빌드 과정에서 최적화되어 프로덕션 빌드 시 파일 크기
 
 이 최적화는 프로젝트 내 모든 SVG 컴포넌트 가져오기에 적용됩니다. 특정 컴포넌트를 제외할 수는 없습니다.
 
-## 구성
+## SVGO
 
-최적화 동작을 사용자 정의하기 위해 [SVGO 구성 객체](https://github.com/svg/svgo#configuration)를 전달할 수 있습니다.
+Astro는 [SVGO](https://svgo.dev/)를 사용하는 내장 최적화 도구를 제공합니다:
 
-```js title="astro.config.mjs"
-export default defineConfig({
-  experimental: {
-    svgo: {
-      multipass: true,
-      floatPrecision: 2,
-      plugins: [
-        'preset-default',
-        'removeXMLNS',
-        {
-          name: "removeXlink",
-          params: {
-            includeLegacy: true
-          }
-        }
-      ]
+```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`
+#### `plugins`
 
 **타입:** `Array<string | PluginConfig>`<br />
 **기본값:** `[]`
@@ -82,125 +86,151 @@ SVG 컴포넌트 가져오기를 최적화하는 데 사용될 [SVGO 플러그
 
 플러그인의 기본 구성을 사용하려면 배열에 이름을 추가하세요. 더 세밀하게 제어하려면 `overrides` 매개변수를 사용하여 `preset-default` 내의 특정 플러그인을 사용자 정의하거나, 플러그인의 `name`이 포함된 객체를 전달하여 개별 매개변수를 재정의하세요.
 
-```js title="astro.config.mjs"
-export default defineConfig({
-  experimental: {
-    svgo: {
-      plugins: [
-        {
-          name: 'preset-default',
-          params: {
-            overrides: {
-              convertPathData: false,
-              convertTransform: {
-                degPrecision: 1,
-                transformPrecision: 3
-              },
-              inlineStyles: false
-            },
+```js
+svgoOptimizer({
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          convertPathData: false,
+          convertTransform: {
+            degPrecision: 1,
+            transformPrecision: 3
           },
+          inlineStyles: false
         },
-        'removeXMLNS',
-        {
-          name: "removeXlink",
-          params: {
-            includeLegacy: true
-          }
-        }
-      ]
+      },
+    },
+    'removeXMLNS',
+    {
+      name: "removeXlink",
+      params: {
+        includeLegacy: true
+      }
     }
-  }
-})
+  ]
+});
 ```
 
-### 기타 구성 옵션
+#### 기타 구성 옵션
 
 특히 `floatPrecision` 및 `multipass`를 비롯하여 구성 객체에 직접 전달할 수 있는 몇 가지 [SVGO 구성 옵션](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335)이 있습니다.
 
-```js title="astro.config.mjs"
-export default defineConfig({
-  experimental: {
-    svgo: {
-      multipass: true,
-      floatPrecision: 2
-    }
-  }
-})
+```js
+svgoOptimizer({
+  multipass: true,
+  floatPrecision: 2,
+});
 ```
 
 `multipass` 옵션은 더 이상 최적화할 수 없을 때까지 최적화 엔진을 여러 번 실행할지 여부를 설정합니다. `floatPrecision` 옵션은 전역적으로 유지할 소수점 자릿수를 설정하지만, 플러그인의 `params` 속성에 사용자 정의 값을 지정하여 특정 플러그인에 대해 재정의할 수 있습니다.
 
-## 일반적인 사용 사례
+### 일반적인 사용 사례
 
 SVGO는 권장되는 최적화가 포함된 광범위한 [기본 플러그인 목록](https://svgo.dev/docs/preset-default/)을 제공합니다. 이 프리셋을 사용하는 것이 각 플러그인을 개별적으로 추가하는 것보다 편리하지만, 추가적인 사용자 정의가 필요할 수 있습니다. 예를 들어, 특히 애니메이션을 사용하는 경우 상황에 따라 항목을 매우 공격적으로 제거하거나 정리할 수 있습니다.
 
 ### 특정 속성 유지하기
 
 SVGO가 기본적으로 인라인화하거나 제거하는 `<style>`과 같은 특정 SVG 속성 및 요소를 유지하고 싶을 수 있습니다.
 
-```js title="astro.config.mjs"
-export default defineConfig({
-  experimental: {
-    svgo: {
-      plugins: [
-        {
-          name: 'preset-default',
-          params: {
-            overrides: {
-              inlineStyles: false, // CSP 해싱을 위해 스타일 요소를 유지합니다
-              removeDesc: false // 내용에 관계없이 요소를 유지합니다
-            }
-          }
+```js
+svgoOptimizer({
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          inlineStyles: false, // CSP 해싱을 위해 스타일 요소를 유지합니다
+          removeDesc: false // 내용에 관계없이 요소를 유지합니다
         }
-      ]
+      }
     }
-  }
-})
+  ]
+});
 ```
 
 ### 특정 요소 제거하기
 
 플러그인을 구성하여 메타데이터 또는 숨겨진 레이어와 같이 원치 않는 특정 요소를 제거할 수 있습니다. 많은 플러그인이 이미 `preset-default`에 포함되어 있으므로 해당 동작만 구성하면 됩니다.
 
-```js title="astro.config.mjs"
-export default defineConfig({
-  experimental: {
-    svgo: {
-      plugins: [
-        'preset-default',
-        {
-          name: 'removeMetadata',
-          active: true
-        }
-      ]
-    }
-  }
-})
+```js
+svgoOptimizer({
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeHiddenElems: {
+            isHidden: false,
+            displayNone: false
+          }
+        },
+      },
+    },
+    'removeRasterImages'
+  ]
+});
 ```
 
 ### 현대적인 HTML5에서의 인라인화를 위한 최적화
 
 인라인 SVG는 `xmlns` 속성이 필요하지 않으며 SVG 2 사양으로 안전하게 변환될 수 있습니다. 이러한 목적으로 `removeXMLNS` 및 `removeXlink` 플러그인을 사용하는 것을 권장합니다:
 
-```js title="astro.config.mjs"
-export default defineConfig({
-  experimental: {
-    svgo: {
-      plugins: [
-        'preset-default',
-        'removeXMLNS',
-        {
-          name: "removeXlink",
-          params: {
-            includeLegacy: true
-          }
-        }
-      ]
+```js
+svgoOptimizer({
+  plugins: [
+    'preset-default',
+    'removeXMLNS',
+    {
+      name: "removeXlink",
+      params: {
+        includeLegacy: true
+      }
     }
+  ]
+});
+```
+
+## SVG 최적화 도구 만들기
+
+<p>
+
+<Since v="6.2.0" />
+</p>
+
+커스텀 SVG 최적화 도구를 구현하는 권장 방법은 구성을 매개변수로 받고 `SvgOptimizer` 객체를 반환하는 함수를 내보내는 것입니다:
+
+```ts
+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`
+
+<p>
+
+**타입:** `string`
+</p>
+
+로그에 사용되는 최적화 도구의 고유한 이름입니다.
+
+### `optimize()`
+
+<p>
+
+**타입:** `(contents: string) => string | Promise<string>`
+</p>
+
+SVG 내용을 처리합니다.
+
 ## 동작 방식
 
 SVG 최적화는 런타임이 아닌 빌드 과정에서 발생합니다.
@@ -210,7 +240,3 @@ SVG 최적화는 런타임이 아닌 빌드 과정에서 발생합니다.
 - **런타임 오버헤드**는 없으며, 최적화된 SVG는 사전 처리된 정적 자산으로 제공됩니다.
 
 최적화 과정에서 빌드 시간이 약간 증가할 수 있지만, 사용자에게 더 작은 파일 크기와 더 빠른 페이지 로드를 제공합니다.
-
-## 추가 자료
-
-- [SVGO 문서](https://svgo.dev/)