Optimización SVG experimental

Type: SvgOptimizer
Default: undefined

Añadido en: astro@5.16.0

Esta funcionalidad experimental habilita la optimización automática de tus componentes SVG en el build time.

Cuando se habilita, tus archivos SVG importados y usados como componentes serán optimizados para tamaños de archivo más pequeños y mejor rendimiento manteniendo la calidad visual. Esto puede reducir significativamente el tamaño de tus assets SVG eliminando metadatos innecesarios, comentarios y código redundante.

Para habilitar esta funcionalidad, importa el helper svgoOptimizer() en tu configuración de Astro y asígnalo a la flag experimental svgOptimizer:

astro.config.mjs

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

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

Uso

No se requiere ningún cambio en el uso de componentes SVG para aprovechar esta funcionalidad. Con la optimización SVG experimental habilitada, todos los archivos importados de componentes SVG serán optimizados automáticamente:

src/pages/index.astro

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

<Logo />

El SVG será optimizado durante el proceso de build, resultando en tamaños de archivo más pequeños en tu build de producción.

Ten en cuenta que esta optimización aplica a cada import de componente SVG en tu proyecto. No es posible excluirse por componente.

SVGO

Astro proporciona un optimizador integrado usando SVGO:

import { svgoOptimizer } from "astro/config"

Configuración

Puedes pasar un objeto conteniendo opciones de configuración de SVGO para personalizar el comportamiento de optimización:

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

plugins

Type: Array<string | PluginConfig>
Default: []

Un array de plugins de SVGO que se usarán para optimizar tus imports de componentes SVG.

Esto puede incluir la colección de plugins preset-default de SVGO, plugins integrados individuales, o plugins personalizados.

Para usar la configuración por defecto de un plugin, añade su nombre al array. Si necesitas más control, usa el parámetro overrides para personalizar plugins específicos dentro de preset-default, o pasa un objeto con el name de un plugin para sobrescribir sus parámetros individuales.

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

Otras opciones de configuración

Hay algunas opciones de configuración de SVGO, especialmente floatPrecision y multipass, que pueden pasarse directamente a tu objeto de config:

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

La opción multipass establece si se debe ejecutar el motor de optimización múltiples veces hasta que no se encuentren más optimizaciones. La opción floatPrecision establece el número de decimales a preservar globalmente, pero puede sobrescribirse para un plugin específico especificando un valor personalizado en su propiedad params.

Casos de uso comunes

SVGO proporciona una extensa lista de plugins por defecto con optimizaciones opinadas. Aunque usar este preset es más conveniente que añadir cada plugin individualmente, puede que necesites personalizarlo más. Por ejemplo, puede eliminar elementos o limpiar de manera demasiado agresiva para tu situación, especialmente al usar animaciones.

Preservar atributos específicos

Puede que quieras preservar ciertos atributos y elementos SVG, como <style>, que SVGO inlinea o elimina por defecto:

svgoOptimizer({
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: false, // Preserve style elements for CSP hashing
          removeDesc: false // Keep element regardless of contents
        }
      }
    }
  ]
});

Eliminar elementos específicos

Puedes configurar plugins para eliminar elementos no deseados específicos como metadatos o capas ocultas. Ten en cuenta que muchos plugins ya están incluidos en preset-default, así que típicamente solo necesitas configurar su comportamiento:

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

Optimizar para inlining en HTML5 moderno

El SVG inline no requiere el atributo xmlns y puede convertirse de forma segura a la especificación SVG 2. Los plugins removeXMLNS y removeXlink son recomendados para este propósito:

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

Construir un optimizador SVG

Añadido en: astro@6.2.0

El método preferido para implementar un optimizador SVG personalizado es exportar una función que devuelva el objeto SvgOptimizer y tome la configuración como parámetro:

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

Type: string

Un nombre único para el optimizador, usado en logs.

optimize()

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

Procesa el contenido del SVG.

Cómo funciona

La optimización SVG ocurre durante el proceso de build, no en runtime:

• En modo desarrollo, los archivos SVG no se optimizan para asegurar tiempos de rebuild más rápidos y una experiencia de desarrollo más fluida.
• En builds de producción, todos los archivos SVG importados se optimizan una vez durante el proceso de build, resultando en tamaños de archivo más pequeños.
• No hay sobrecarga de runtime: los SVGs optimizados se sirven como assets estáticos pre-procesados.

Aunque el proceso de optimización puede aumentar ligeramente tus tiempos de build, el resultado son tamaños de archivo más pequeños y cargas de página más rápidas para tus usuarios.