Description

Hi, I'm working on a project that pulls in a considerable number of SVGs from an external package and inlines them in CSS as data-urls. It works great, but a lot of the SVGs are not optimized and they have a lot of junk in them. Their size could be roughly cut in half if some of the useless bits were stripped out.

Is there a way to modify an SVG at the point it's being inlined? Or would it be possible to add some kind of hook so that the content could be stripped/optimized before it's inlined?

Suggested solution

I'm thinking of a callback here that gives access to the stringContent to allow an additional Regex or custom transformation to be applied before the content gets transformed/escaped:

Eg:

function svgToDataURL(content: Buffer): string { 
   const stringContent = content.toString() 

   const { beforeInlineSvg } = environment.config.build
   if (typeof beforeInlineSvg === 'function') {
      stringContent = beforeInlineSvg(stringContent)
   }
   
   ... 

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.