SVGO Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The SVGO configuration defines how SVG master files are optimized before they are used to generate PNGs, favicons, and other web assets. This system ensures that the branding assets remain lean by removing editor metadata and document overhead while preserving visual integrity and exact vector coordinates.
Optimization Strategy
The project uses a conservative optimization approach. It explicitly allows specific plugins to clean the SVG structure without altering paths, transforms, or IDs. This prevents rounding errors and ensures that the optimized assets match the dimensions of the original source files.
Sources: scripts/svgo.config.ts:4-8, scripts/generate-assets.ts:114-118
Enabled Plugins
The configuration uses a specific allowlist of plugins to remove non-essential data.
| Plugin | Description |
|---|---|
removeDoctype | Removes the doctype declaration. |
removeXMLProcInst | Removes XML processing instructions. |
removeComments | Strips comments from the SVG source. |
removeMetadata | Removes metadata tags (e.g., from Inkscape or Illustrator). |
removeEditorsNSData | Removes editor-specific namespace data. |
cleanupAttrs | Cleans up attributes by removing leading/trailing spaces. |
convertStyleToAttrs | Converts inline styles to individual SVG attributes. |
convertColors | Minimizes color definitions where possible. |
removeUnusedNS | Removes unused namespace declarations. |
sortAttrs | Sorts element attributes for better readability. |
Sources: scripts/svgo.config.ts:10-21
Integration with Asset Pipeline
The generate-assets.ts script imports this configuration to process every SVG defined in export.config.json. The pipeline validates that the optimization process does not change the physical dimensions of the artwork.
Asset Processing Flow
The following diagram illustrates how the SVGO configuration is utilized during the asset generation process.
The script requires all lettering to be converted to paths (outlined) before optimization to ensure consistent rendering across platforms without requiring font installation.
Sources: scripts/generate-assets.ts:107-118, README.md:38-40
Configuration Data Structure
The configuration object follows the svgo package Config type.
export default {
multipass: false,
plugins: [
// ... plugin list
],
js2svg: { pretty: false, finalNewline: true },
} satisfies Config;
Sources: scripts/svgo.config.ts:9-24, package.json:16
Validation and Testing
The optimization process is verified by the project's test suite. Tests ensure that the optimize function correctly handles the inputs and that the resulting manifest accurately reflects the metadata of the optimized assets.
Summary
The SVGO configuration serves as a critical bridge between editable source files and production-ready assets. By stripping away editor overhead while strictly preserving coordinate precision, it ensures that FOSSBilling branding remains consistent across all generated formats and sizes.