Dynamically adjusts the viewBox of SVGs to tightly fit the visible content. It's particularly useful for SVGs with excessive whitespace or padding around the main graphic elements.
This is a plugin for SVGO, which is also utilized by SVGR.
I have been a long-time user of SVGR, a tool that simplifies working with SVGs in React projects. Typically, to eliminate unwanted padding around SVGs, I relied on the SVG Crop service, which involved manually copying and pasting SVGs. However, curiosity about the inner workings of this process led me to develop my own solution. The result is a plugin that seamlessly integrates with SVGR, thereby automating the cropping of SVGs. With this plugin, the need for manual copy-pasting is eliminated, streamlining the workflow as soon as the SVGR CLI is run.
Utilizing icons from diverse sources often leads to sizing inconsistencies due to varying padding in different icon sets. This is particularly problematic in applications like rich text editor toolbars, where uniform icon sizing is essential. Disparate whitespace around these icons complicates their alignment and visual harmony. This plugin addresses this by stripping away the excess padding, ensuring that the specified SVG dimensions accurately reflect the visible icon size.
The plugin iterates through all <path> elements in an SVG, ignoring paths with fill="none" (typically non-visible elements). It calculates the bounding box based on visible content and updates the SVG's viewBox attribute to match this area, effectively cropping the SVG to its visible content.
- Install the plugin in your SVGO environment.
- Include it in your SVGO configuration.
- Run SVGO as usual - the plugin will automatically adjust the
viewBoxof processed SVGs.
- SVGO
svgdomand@svgdotjs/svg.jsfor DOM manipulation in Node.js.
Contributions are welcome! Feel free to submit pull requests or report issues on the repository.