Skip to content

Commit 258ed4c

Browse files
jsparkdevyanthomasdev
jsparkdev
and
yanthomasdev
authored
i18n(ko-KR): update svg-optimization.mdx (#13816)
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
1 parent b266280 commit 258ed4c

1 file changed

Lines changed: 140 additions & 114 deletions

File tree

‎src/content/docs/ko/reference/experimental-flags/svg-optimization.mdx‎

Lines changed: 140 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,30 @@ import Since from '~/components/Since.astro'
99

1010
<p>
1111

12-
**타입:** `boolean | object`<br />
12+
**타입:** `SvgOptimizer`<br />
1313
**기본값:** `false`<br />
1414
<Since v="5.16.0" />
1515
</p>
1616

17-
이 실험적인 기능은 빌드 시점에 [SVGO](https://svgo.dev/)를 사용하여 [SVG 컴포넌트](/ko/guides/images/#svg-컴포넌트)를 자동으로 최적화합니다.
17+
이 실험적인 기능은 빌드 시점에 [SVG 컴포넌트](/ko/guides/images/#svg-컴포넌트)를 자동으로 최적화합니다.
1818

1919
이 기능을 활성화하면 컴포넌트로 사용되는 SVG 파일이 시각적 품질을 유지하면서 더 작은 파일 크기와 더 나은 성능을 위해 최적화됩니다. 이를 통해 불필요한 메타데이터, 주석, 중복된 코드를 제거하여 SVG 자산의 크기를 크게 줄일 수 있습니다.
2020

21-
이 기능을 활성화하려면 Astro 구성에서 `true`로 설정하세요.
21+
이 기능을 활성화하려면 Astro 설정에서 `svgoOptimizer()` 헬퍼를 가져와 실험적 `svgOptimizer` 플래그에 할당하세요.
2222

2323
```js title="astro.config.mjs" ins={5}
24-
import { defineConfig } from "astro/config"
24+
import { defineConfig, svgoOptimizer } from "astro/config";
2525

2626
export default defineConfig({
2727
experimental: {
28-
svgo: true
28+
svgOptimizer: svgoOptimizer()
2929
}
30-
})
30+
});
3131
```
3232

3333
## 사용 방법
3434

35-
이 기능을 활용하기 위해 SVG 컴포넌트의 사용 방법을 변경할 필요는 없습니다. 실험적 `svgo`를 활성화하면 가져온 모든 SVG 컴포넌트 파일이 자동으로 최적화됩니다.
35+
이 기능을 활용하기 위해 SVG 컴포넌트의 사용 방법을 변경할 필요는 없습니다. 실험적 SVG 최적화를 활성화하면 가져온 모든 SVG 컴포넌트 파일이 자동으로 최적화됩니다.
3636

3737
```astro title="src/pages/index.astro"
3838
---
@@ -46,32 +46,36 @@ SVG는 빌드 과정에서 최적화되어 프로덕션 빌드 시 파일 크기
4646

4747
이 최적화는 프로젝트 내 모든 SVG 컴포넌트 가져오기에 적용됩니다. 특정 컴포넌트를 제외할 수는 없습니다.
4848

49-
## 구성
49+
## SVGO
5050

51-
최적화 동작을 사용자 정의하기 위해 [SVGO 구성 객체](https://github.com/svg/svgo#configuration)를 전달할 수 있습니다.
51+
Astro는 [SVGO](https://svgo.dev/)를 사용하는 내장 최적화 도구를 제공합니다:
5252

53-
```js title="astro.config.mjs"
54-
export default defineConfig({
55-
experimental: {
56-
svgo: {
57-
multipass: true,
58-
floatPrecision: 2,
59-
plugins: [
60-
'preset-default',
61-
'removeXMLNS',
62-
{
63-
name: "removeXlink",
64-
params: {
65-
includeLegacy: true
66-
}
67-
}
68-
]
53+
```js
54+
import { svgoOptimizer } from "astro/config"
55+
```
56+
57+
### 구성
58+
59+
최적화 동작을 사용자 지정하기 위해 [SVGO 구성 옵션](https://github.com/svg/svgo#configuration)을 포함한 객체를 전달할 수 있습니다.
60+
61+
```js
62+
svgoOptimizer({
63+
multipass: true,
64+
floatPrecision: 2,
65+
plugins: [
66+
'preset-default',
67+
'removeXMLNS',
68+
{
69+
name: "removeXlink",
70+
params: {
71+
includeLegacy: true
72+
}
6973
}
70-
}
71-
})
74+
]
75+
});
7276
```
7377

74-
### `plugins`
78+
#### `plugins`
7579

7680
**타입:** `Array<string | PluginConfig>`<br />
7781
**기본값:** `[]`
@@ -82,125 +86,151 @@ SVG 컴포넌트 가져오기를 최적화하는 데 사용될 [SVGO 플러그
8286

8387
플러그인의 기본 구성을 사용하려면 배열에 이름을 추가하세요. 더 세밀하게 제어하려면 `overrides` 매개변수를 사용하여 `preset-default` 내의 특정 플러그인을 사용자 정의하거나, 플러그인의 `name`이 포함된 객체를 전달하여 개별 매개변수를 재정의하세요.
8488

85-
```js title="astro.config.mjs"
86-
export default defineConfig({
87-
experimental: {
88-
svgo: {
89-
plugins: [
90-
{
91-
name: 'preset-default',
92-
params: {
93-
overrides: {
94-
convertPathData: false,
95-
convertTransform: {
96-
degPrecision: 1,
97-
transformPrecision: 3
98-
},
99-
inlineStyles: false
100-
},
89+
```js
90+
svgoOptimizer({
91+
plugins: [
92+
{
93+
name: 'preset-default',
94+
params: {
95+
overrides: {
96+
convertPathData: false,
97+
convertTransform: {
98+
degPrecision: 1,
99+
transformPrecision: 3
101100
},
101+
inlineStyles: false
102102
},
103-
'removeXMLNS',
104-
{
105-
name: "removeXlink",
106-
params: {
107-
includeLegacy: true
108-
}
109-
}
110-
]
103+
},
104+
},
105+
'removeXMLNS',
106+
{
107+
name: "removeXlink",
108+
params: {
109+
includeLegacy: true
110+
}
111111
}
112-
}
113-
})
112+
]
113+
});
114114
```
115115

116-
### 기타 구성 옵션
116+
#### 기타 구성 옵션
117117

118118
특히 `floatPrecision` 및 `multipass`를 비롯하여 구성 객체에 직접 전달할 수 있는 몇 가지 [SVGO 구성 옵션](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335)이 있습니다.
119119

120-
```js title="astro.config.mjs"
121-
export default defineConfig({
122-
experimental: {
123-
svgo: {
124-
multipass: true,
125-
floatPrecision: 2
126-
}
127-
}
128-
})
120+
```js
121+
svgoOptimizer({
122+
multipass: true,
123+
floatPrecision: 2,
124+
});
129125
```
130126

131127
`multipass` 옵션은 더 이상 최적화할 수 없을 때까지 최적화 엔진을 여러 번 실행할지 여부를 설정합니다. `floatPrecision` 옵션은 전역적으로 유지할 소수점 자릿수를 설정하지만, 플러그인의 `params` 속성에 사용자 정의 값을 지정하여 특정 플러그인에 대해 재정의할 수 있습니다.
132128

133-
## 일반적인 사용 사례
129+
### 일반적인 사용 사례
134130

135131
SVGO는 권장되는 최적화가 포함된 광범위한 [기본 플러그인 목록](https://svgo.dev/docs/preset-default/)을 제공합니다. 이 프리셋을 사용하는 것이 각 플러그인을 개별적으로 추가하는 것보다 편리하지만, 추가적인 사용자 정의가 필요할 수 있습니다. 예를 들어, 특히 애니메이션을 사용하는 경우 상황에 따라 항목을 매우 공격적으로 제거하거나 정리할 수 있습니다.
136132

137133
### 특정 속성 유지하기
138134

139135
SVGO가 기본적으로 인라인화하거나 제거하는 `<style>`과 같은 특정 SVG 속성 및 요소를 유지하고 싶을 수 있습니다.
140136

141-
```js title="astro.config.mjs"
142-
export default defineConfig({
143-
experimental: {
144-
svgo: {
145-
plugins: [
146-
{
147-
name: 'preset-default',
148-
params: {
149-
overrides: {
150-
inlineStyles: false, // CSP 해싱을 위해 스타일 요소를 유지합니다
151-
removeDesc: false // 내용에 관계없이 요소를 유지합니다
152-
}
153-
}
137+
```js
138+
svgoOptimizer({
139+
plugins: [
140+
{
141+
name: 'preset-default',
142+
params: {
143+
overrides: {
144+
inlineStyles: false, // CSP 해싱을 위해 스타일 요소를 유지합니다
145+
removeDesc: false // 내용에 관계없이 요소를 유지합니다
154146
}
155-
]
147+
}
156148
}
157-
}
158-
})
149+
]
150+
});
159151
```
160152

161153
### 특정 요소 제거하기
162154

163155
플러그인을 구성하여 메타데이터 또는 숨겨진 레이어와 같이 원치 않는 특정 요소를 제거할 수 있습니다. 많은 플러그인이 이미 `preset-default`에 포함되어 있으므로 해당 동작만 구성하면 됩니다.
164156

165-
```js title="astro.config.mjs"
166-
export default defineConfig({
167-
experimental: {
168-
svgo: {
169-
plugins: [
170-
'preset-default',
171-
{
172-
name: 'removeMetadata',
173-
active: true
174-
}
175-
]
176-
}
177-
}
178-
})
157+
```js
158+
svgoOptimizer({
159+
plugins: [
160+
{
161+
name: 'preset-default',
162+
params: {
163+
overrides: {
164+
removeHiddenElems: {
165+
isHidden: false,
166+
displayNone: false
167+
}
168+
},
169+
},
170+
},
171+
'removeRasterImages'
172+
]
173+
});
179174
```
180175

181176
### 현대적인 HTML5에서의 인라인화를 위한 최적화
182177

183178
인라인 SVG는 `xmlns` 속성이 필요하지 않으며 SVG 2 사양으로 안전하게 변환될 수 있습니다. 이러한 목적으로 `removeXMLNS` 및 `removeXlink` 플러그인을 사용하는 것을 권장합니다:
184179

185-
```js title="astro.config.mjs"
186-
export default defineConfig({
187-
experimental: {
188-
svgo: {
189-
plugins: [
190-
'preset-default',
191-
'removeXMLNS',
192-
{
193-
name: "removeXlink",
194-
params: {
195-
includeLegacy: true
196-
}
197-
}
198-
]
180+
```js
181+
svgoOptimizer({
182+
plugins: [
183+
'preset-default',
184+
'removeXMLNS',
185+
{
186+
name: "removeXlink",
187+
params: {
188+
includeLegacy: true
189+
}
199190
}
191+
]
192+
});
193+
```
194+
195+
## SVG 최적화 도구 만들기
196+
197+
<p>
198+
199+
<Since v="6.2.0" />
200+
</p>
201+
202+
커스텀 SVG 최적화 도구를 구현하는 권장 방법은 구성을 매개변수로 받고 `SvgOptimizer` 객체를 반환하는 함수를 내보내는 것입니다:
203+
204+
```ts
205+
import type { SvgOptimizer } from "astro";
206+
import { optimize, type Options } from "./optimizer";
207+
208+
export function mySvgOptimizer(options?: Options): SvgOptimizer {
209+
return {
210+
name: "my-optimizer",
211+
optimize: (contents) => optimize(contents, options),
200212
}
201-
})
213+
}
202214
```
203215

216+
### `name`
217+
218+
<p>
219+
220+
**타입:** `string`
221+
</p>
222+
223+
로그에 사용되는 최적화 도구의 고유한 이름입니다.
224+
225+
### `optimize()`
226+
227+
<p>
228+
229+
**타입:** `(contents: string) => string | Promise<string>`
230+
</p>
231+
232+
SVG 내용을 처리합니다.
233+
204234
## 동작 방식
205235

206236
SVG 최적화는 런타임이 아닌 빌드 과정에서 발생합니다.
@@ -210,7 +240,3 @@ SVG 최적화는 런타임이 아닌 빌드 과정에서 발생합니다.
210240
- **런타임 오버헤드**는 없으며, 최적화된 SVG는 사전 처리된 정적 자산으로 제공됩니다.
211241

212242
최적화 과정에서 빌드 시간이 약간 증가할 수 있지만, 사용자에게 더 작은 파일 크기와 더 빠른 페이지 로드를 제공합니다.
213-
214-
## 추가 자료
215-
216-
- [SVGO 문서](https://svgo.dev/)

0 commit comments

Comments
 (0)