Optimisation expérimentale des SVG

Type : SvgOptimizer
Par défaut : undefined

Ajouté à la version : astro@5.16.0

Cette fonctionnalité expérimentale permet l’optimisation automatique de vos composants SVG au moment de la compilation.

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.

Pour activer cette fonctionnalité, importez la fonction utilitaire svgoOptimizer() dans votre configuration d’Astro et assignez-la à l’option expérimentale svgOptimizer :

astro.config.mjs

import { defineConfig, svgoOptimizer } from "astro/config";

export default defineConfig({
  experimental: {
    svgOptimizer: svgoOptimizer()
  }
});

Utilisation

Aucune modification de l’utilisation des composants SVG n’est requise pour bénéficier de cette fonctionnalité. Avec l’optimisation SVG expérimentale activée, tous vos fichiers de composants SVG importés seront automatiquement optimisés :

src/pages/index.astro

---
import Logo from '../assets/logo.svg';
---

<Logo />

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.

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.

SVGO

Astro fournit un optimiseur intégré utilisant SVGO :

import { svgoOptimizer } from "astro/config"

Configuration

Vous pouvez transmettre un objet de configuration SVGO pour personnaliser le comportement d’optimisation :

svgoOptimizer({
  multipass: true,
  floatPrecision: 2,
  plugins: [
    'preset-default',
    'removeXMLNS',
    {
      name: "removeXlink",
      params: {
        includeLegacy: true
      }
    }
  ]
});

plugins

Type : Array<string | PluginConfig>
Par défaut : []

Un tableau de modules d’extension SVGO qui seront utilisés pour optimiser vos importations de composants SVG.

Cela peut inclure la collection de modules d’extension preset-default de SVGO, des modules d’extension intégrés individuels ou des modules d’extension personnalisés.

Pour utiliser la configuration par défaut d’un module d’extension, ajoutez son nom au tableau. Si vous avez besoin de plus de contrôle, utilisez le paramètre overrides pour personnaliser des modules d’extension spécifiques au sein de preset-default, ou transmettez un objet contenant le nom (name) d’un module d’extension pour modifier ses paramètres individuels.

svgoOptimizer({
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          convertPathData: false,
          convertTransform: {
            degPrecision: 1,
            transformPrecision: 3
          },
          inlineStyles: false
        },
      },
    },
    'removeXMLNS',
    {
      name: "removeXlink",
      params: {
        includeLegacy: true
      }
    }
  ]
});

Autres options de configuration

Il existe quelques options de configuration pour SVGO, notamment floatPrecision et multipass, qui peuvent être transmises directement à votre objet de configuration :

svgoOptimizer({
  multipass: true,
  floatPrecision: 2,
});

L’option multipass détermine si le moteur d’optimisation doit être exécuté plusieurs fois jusqu’à ce qu’aucune optimisation supplémentaire ne soit trouvée. L’option floatPrecision définit le nombre de décimales à conserver globalement, mais peut être redéfinie pour un module d’extension spécifique en indiquant une valeur personnalisée dans sa propriété params.

Cas d’utilisation courants

SVGO propose une liste complète des modules d’extension par défaut avec des optimisations prédéfinies. Bien que l’utilisation de ce préréglage soit plus pratique que l’ajout individuel de chaque module d’extension, vous pourriez avoir besoin de le personnaliser davantage. Par exemple, il peut supprimer des éléments ou effectuer un nettoyage trop agressif pour votre situation, notamment lors de l’utilisation d’animations.

Conserver des attributs spécifiques

Vous souhaiterez peut-être conserver certains attributs et éléments SVG, tels que <style>, que SVGO incorpore dans la balise ou supprime par défaut :

svgoOptimizer({
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: false, // Préserver les éléments de style pour le hachage CSP
          removeDesc: false // Conserver l'élément quel que soit son contenu
        }
      }
    }
  ]
});

Supprimer des éléments spécifiques

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.

svgoOptimizer({
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeHiddenElems: {
            isHidden: false,
            displayNone: false
          }
        },
      },
    },
    'removeRasterImages'
  ]
});

Optimiser pour l’incorporation dans du HTML5 moderne

Les SVG incorporés ne nécessitent pas l’attribut xmlns et peuvent être convertis sans risque au format SVG 2. Les modules d’extension removeXMLNS et removeXlink sont recommandés à cet effet.

svgoOptimizer({
  plugins: [
    'preset-default',
    'removeXMLNS',
    {
      name: "removeXlink",
      params: {
        includeLegacy: true
      }
    }
  ]
});

Créer un optimiseur SVG

Ajouté à la version : astro@6.2.0 Nouveau

La méthode recommandée pour implémenter un optimiseur SVG personnalisé consiste à exporter une fonction qui renvoie l’objet SvgOptimizer et prend la configuration en paramètre :

import type { SvgOptimizer } from "astro";
import { optimize, type Options } from "./optimizer";

export function mySvgOptimizer(options?: Options): SvgOptimizer {
  return {
    name: "mon-optimiseur",
    optimize: (contents) => optimize(contents, options),
  }
}

name

Type : string

Un nom unique pour l’optimiseur, utilisé dans les journaux.

optimize()

Type : (contents: string) => string | Promise<string>

Traite le contenu SVG.

Comment ça marche

L’optimisation SVG a lieu pendant le processus de compilation, et non lors de l’exécution :

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

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.