Skip to content

Commit 866eb7e

Browse files
i18n(fr): add experimental-flags/svg-optimization.mdx
See withastro#12739
1 parent 48ce21f commit 866eb7e

File tree

1 file changed

+179
-0
lines changed

1 file changed

+179
-0
lines changed
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
---
2+
title: Optimisation expérimentale des SVG
3+
sidebar:
4+
label: Optimisation des SVG
5+
i18nReady: true
6+
---
7+
8+
import Since from '~/components/Since.astro'
9+
10+
<p>
11+
12+
**Type :** `boolean | object`<br />
13+
**Par défaut :** `false`<br />
14+
<Since v="5.16.0" />
15+
</p>
16+
17+
Cette fonctionnalité expérimentale permet l'optimisation automatique de vos [composants SVG](/fr/guides/images/#composants-svg) à l'aide de [SVGO](https://svgo.dev/) au moment de la compilation.
18+
19+
Quand cette option est activée, vos fichiers SVG importés et utilisés comme composants seront optimisés afin de réduire leur taille et d'améliorer leurs performances, tout en préservant leur qualité visuelle. Cela peut réduire considérablement la taille de vos fichiers SVG en supprimant les métadonnées inutiles, les commentaires et le code redondant.
20+
21+
Pour activer cette fonctionnalité avec les paramètres par défaut, définissez-la sur `true` dans votre configuration d'Astro :
22+
23+
```js title="astro.config.mjs" ins={5}
24+
import { defineConfig } from "astro/config"
25+
26+
export default defineConfig({
27+
experimental: {
28+
svgo: true
29+
}
30+
})
31+
```
32+
33+
## Utilisation
34+
35+
Aucune modification de l'utilisation des composants SVG n'est requise pour bénéficier de cette fonctionnalité. Avec la fonctionnalité expérimentale `svgo` activée, tous vos fichiers de composants SVG importés seront automatiquement optimisés :
36+
37+
```astro title="src/pages/index.astro"
38+
---
39+
import Logo from '../assets/logo.svg';
40+
---
41+
42+
<Logo />
43+
```
44+
45+
Le fichier SVG sera optimisé lors du processus de compilation, ce qui permettra de réduire la taille des fichiers dans votre version de production.
46+
47+
Notez que cette optimisation s'applique à toutes les importations de composants SVG de votre projet. Il n'est pas possible de la désactiver composant par composant.
48+
49+
## Configuration
50+
51+
Vous pouvez transmettre un [objet de configuration SVGO](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335) pour personnaliser le comportement d'optimisation :
52+
53+
```js title="astro.config.mjs"
54+
export default defineConfig({
55+
experimental: {
56+
svgo: {
57+
plugins: [
58+
'preset-default',
59+
{
60+
name: 'removeViewBox',
61+
active: false
62+
}
63+
]
64+
}
65+
}
66+
})
67+
```
68+
69+
### `plugins`
70+
71+
**Type :** `Array<string | PluginConfig>`<br />
72+
**Par défaut :** `[]`
73+
74+
Un tableau de [modules d'extension SVGO](https://svgo.dev/docs/plugins/) qui seront utilisés pour optimiser vos importations de composants SVG.
75+
76+
Cela peut inclure n'importe quel module d'extension par son identifiant, y compris la collection de modules d'extension par défaut (`preset-default`) de SVGO. Un module d'extension peut éventuellement être transmis sous forme d'objet incluant à la fois son nom (`name`) et son état (`active`), afin de l'activer ou de le désactiver selon les besoins.
77+
78+
```js title="astro.config.mjs"
79+
export default defineConfig({
80+
experimental: {
81+
svgo: {
82+
plugins: [
83+
'preset-default',
84+
{
85+
name: 'removeViewBox',
86+
active: false
87+
}
88+
]
89+
}
90+
}
91+
})
92+
```
93+
94+
### Autres options de configuration
95+
96+
Vous pouvez également transmettre [d'autres options de configuration SVGO](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335), telles que `floatPrecision` et `multipass`, directement à votre objet de configuration :
97+
98+
```js title="astro.config.mjs"
99+
export default defineConfig({
100+
experimental: {
101+
svgo: {
102+
floatPrecision: 2,
103+
multipass: true
104+
}
105+
}
106+
})
107+
```
108+
109+
## Cas d'utilisation courants
110+
111+
SVGO propose une [liste complète des modules d'extension par défaut](https://svgo.dev/docs/preset-default/) avec des optimisations prédéfinies, plus pratique que l'ajout individuel de chaque module d'extension. Toutefois, vous devrez peut-être le personnaliser davantage en fonction de vos besoins. Par exemple, il pourrait supprimer des éléments ou effectuer un nettoyage trop agressif pour votre situation.
112+
113+
### Conserver des attributs spécifiques
114+
115+
Vous souhaiterez peut-être conserver certains attributs SVG, tels que `viewBox`, que SVGO supprime par défaut :
116+
117+
```js title="astro.config.mjs"
118+
export default defineConfig({
119+
experimental: {
120+
svgo: {
121+
plugins: [
122+
'preset-default',
123+
{
124+
name: 'removeViewBox',
125+
active: false // Conserver l'attribut viewBox
126+
}
127+
]
128+
}
129+
}
130+
})
131+
```
132+
133+
### Supprimer des éléments spécifiques
134+
135+
Vous pouvez configurer les modules d'extension pour supprimer des éléments indésirables spécifiques tels que les métadonnées ou les calques cachés. Notez que de nombreux modules d'extension sont déjà inclus dans `preset-default`, vous n'aurez donc généralement qu'à configurer leur comportement.
136+
137+
```js title="astro.config.mjs"
138+
export default defineConfig({
139+
experimental: {
140+
svgo: {
141+
plugins: [
142+
'preset-default',
143+
{
144+
name: 'removeMetadata',
145+
active: true
146+
}
147+
]
148+
}
149+
}
150+
})
151+
```
152+
153+
### Précision personnalisée
154+
155+
Contrôlez la précision des valeurs numériques dans les données de chemin :
156+
157+
```js title="astro.config.mjs"
158+
export default defineConfig({
159+
experimental: {
160+
svgo: {
161+
floatPrecision: 2
162+
}
163+
}
164+
})
165+
```
166+
167+
## Comment ça marche
168+
169+
L'optimisation SVG a lieu pendant le processus de compilation, et non lors de l'exécution :
170+
171+
- En **mode développement**, les fichiers SVG ne sont pas optimisés afin de garantir des temps de recompilation plus rapides et une expérience de développement plus fluide.
172+
- Dans les **versions de production**, tous les fichiers SVG importés sont optimisés une seule fois lors du processus de compilation, ce qui permet de réduire leur taille.
173+
- Il n'y a **aucune surcharge pour l'environnement d'exécution** - les SVG optimisés sont servis en tant que ressources statiques prétraitées.
174+
175+
Bien que le processus d'optimisation puisse légèrement augmenter vos temps de compilation, il en résulte des fichiers plus petits et des chargements de page plus rapides pour vos utilisateurs.
176+
177+
## Lectures complémentaires
178+
179+
- [Documentation de SVGO](https://svgo.dev/)

0 commit comments

Comments
 (0)