|
| 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