I have a problem with disable removeViewBox.
I tried a few ways, eg. via svgo.config.js, bud.imagemin.encode, bud.imagemin.svgo.setEncodeOptions. I got examples from github svgo issues.
Below is svg example 128x128 scaled to 90x90 in CSS, without viewBox and with viewBox.
This issue is after bud build, because svgo optimize svgs from assets and remove viewBox attribute froms svgs.
I’m trying to understand this topic but having some issues. Are you saying that Bud removes the viewBox attribute on builds? Because Bud does not remove viewBox by default, at least not on Sage 10 which this topic is tagged with
What is your Bud config? What is your package.json? What exact steps do I need to follow in order to reproduce your issue?
This line app.imagemin.svgo.disable(); works fine, but it disable a whole optimization.
If you need, I can send complete theme files for you via PM.
package.json
"devDependencies": {
"@roots/bud": "6.11.0",
"@roots/bud-babel": "6.11.0",
"@roots/bud-esbuild": "6.11.0",
"@roots/bud-eslint": "6.11.0",
"@roots/bud-imagemin": "6.11.0",
"@roots/bud-postcss": "6.11.0",
"@roots/bud-prettier": "6.11.0",
"@roots/bud-sass": "6.11.0",
"@roots/bud-stylelint": "6.11.0",
"@roots/bud-tailwindcss": "6.11.0",
"@roots/eslint-config": "6.11.0",
"@roots/sage": "6.11.0",
"prettier": "^2.8",
"prettier-plugin-tailwindcss": "^0.2",
"tailwindcss": "^3.2"
},
"dependencies": {
"lazysizes": "^5.3",
"stylelint-order": "^6.0",
"swiper": "^8.4"
}
bud.config.js
/**
* Build configuration
*
* @see {@link https://bud.js.org/guides/getting-started/configure}
* @param {import('@roots/bud').Bud} app
*/
export default async (app) => {
/**
* Application entrypoints
* Paths are relative to your resources directory
*/
app.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
other: ['@scripts/other'],
admin: ['@styles/admin'],
// ...(await mappedAssets(app, 'blocks')),
});
/**
* Directory contents to be included in the compilation
*/
app.assets(['images', 'fonts']);
/**
* Matched files trigger a page reload when modified
*/
app.watch(['resources/views/**/*', 'app/**/*']);
/**
* Global external JS scripts.
*/
app.externals({
jQuery: 'window.jquery',
grecaptcha: 'window.grecaptcha',
})
/**
* By default, bud generates a runtime per chunk.
* This fixes HMR for multiple entries.
*/
app.runtime('single')
/**
* Global JS scripts.
*/
// app.provide({
// swiper: 'Swiper',
// })
/**
* Proxy origin (`WP_HOME`)
*/
app.proxy('http://templanet-sage.local');
/**
* Development origin
*/
app.serve('http://templanet-sage.local:3000');
/**
* URI of the `public` directory
*/
app.setPublicPath('/wp-content/themes/sage-10-template/public/');
/**
* Generate WordPress `theme.json`
*
* @note This overwrites `theme.json` on every build.
*/
app.wpjson
.settings({
color: {
custom: false,
customGradient: false,
defaultPalette: false,
defaultGradients: false,
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
},
})
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize()
.enable();
};
I’m still trying to understand this topic. Are you saying that you want to remove the viewBox on your SVG files when you run the build?
I still need a minimal reproduction. Your Bud config doesn’t have any mention of either imagemin or svgo.
What exact steps to I need to follow in order to reproduce your issue?
I want to keep viewBox attribute in compiled SVGs.
Reproduction:
yarn add @roots/bud-imagemin --dev
yarn run build
Following these steps I’m unable to reproduce an SVG no longer having a viewBox.
Source SVG:
<svg enable-background="new 0 0 858 292" viewBox="0 0 858 292" xmlns="http://www.w3.org/2000/svg"><path d="m447 129.3c0-22.1-15.8-33.2-37.9-33.2h-52.1l-1.6 1.6v107.4l1.6 1.6h19l1.6-1.6v-41.1l1.6-1.6h15.8l3.2 1.6 31.6 41.1 3.2 1.6h9.5l1.6-1.6v-15.8l-20.5-26.9v-1.6c12.3-3 23.4-14.1 23.4-31.5zm-37.9 14.3h-30l-1.6-1.6v-25.3l1.6-1.6h30c9.5 0 15.8 3.2 15.8 14.2 0 11.1-6.4 14.3-15.8 14.3zm80.9-17.4c-25.3 0-33.2 14.2-33.2 23.7l1.6 1.6h19l1.6-1.6c1.6-4.7 6.3-4.7 11.1-4.7 9.5 0 11.1 1.6 11.1 9.5v1.6l-1.6 1.6s-4.7-1.6-11.1-1.6c-12.6 0-34.8 3.2-34.8 26.9 0 15.8 11.1 25.3 28.4 25.3 11.1 0 17.4-6.3 17.4-6.3h1.6l1.6 3.2 1.6 1.6h17.4l1.6-1.6v-42.7c-.2-23.9-8.1-36.5-33.3-36.5zm11 52.1c0 6.3-6.3 11.1-14.2 11.1s-11.1-3.2-11.1-7.9c0-6.3 4.7-9.5 14.2-9.5 6.3 0 9.5 1.6 9.5 1.6l1.6 1.6zm90.7-82.1-1.6 1.6v36.3h-1.6s-6.3-7.9-20.5-7.9c-19 0-34.8 15.8-34.8 41.1s15.8 41.1 34.8 41.1c14.2 0 20.5-7.9 20.5-7.9h1.6l1.6 4.7 1.6 1.6h17.4l1.6-1.6v-107.5l-1.6-1.6h-19zm-18.9 93.2c-12.6 0-17.4-9.5-17.4-22.1s4.7-22.1 17.4-22.1 17.4 9.5 17.4 22.1-4.8 22.1-17.4 22.1zm74.5-61.6 1.6 1.6v75.8l-1.6 1.6h-19l-1.6-1.6v-75.8l1.6-1.6zm0-31.6 1.6 1.6v15.8l-1.6 1.6h-19l-1.6-1.6v-15.9l1.6-1.6h19zm35.4 71.1c0 14.2 6.3 22.1 17.4 22.1 7.9 0 12.6-3.2 14.2-7.9l1.6-1.6h19l1.6 1.6c-3.2 19-19 26.9-36.3 26.9-23.7 0-39.5-15.8-39.5-41.1s15.8-41.1 39.5-41.1c17.4 0 33.2 7.9 36.3 26.9l-1.6 1.6h-19l-1.6-1.6c-1.6-4.7-6.3-7.9-14.2-7.9-11.1-.1-17.4 7.8-17.4 22.1zm85.7-71.1 1.6 1.6v107.4l-1.6 1.6h-19l-1.6-1.6v-107.5l1.6-1.6h19zm50.8 30c-25.3 0-37.9 19-37.9 41.1s12.6 41.1 39.5 41.1c23.7 0 31.6-14.2 33.2-23.7l-1.6-1.6h-19l-1.6 1.6c-1.6 3.2-6.3 4.7-11.1 4.7-12.6 0-15.8-9.5-15.8-12.6l1.6-1.6h49l1.6-1.6v-6.3c.1-22.2-12.6-41.1-37.9-41.1zm12.7 33.2h-25.3l-1.6-1.6c0-1.6 1.6-12.6 14.2-12.6s14.2 11.1 14.2 12.6zm-725.9-158.4 55 55-35 10-30-30zm0 110 75 75-90 30-90-90 30-90 75 75 55-55 55-55 20 65-65 65zm145.3 4.7 28.2 91.8-83.5 83.5h-120l105-105z" fill="#5361d9"/></svg>
SVG from the public folder after building (note the viewBox still in place):
<svg viewBox="0 0 858 292" xmlns="http://www.w3.org/2000/svg"><path d="M447 129.3c0-22.1-15.8-33.2-37.9-33.2H357l-1.6 1.6v107.4l1.6 1.6h19l1.6-1.6V164l1.6-1.6H395l3.2 1.6 31.6 41.1 3.2 1.6h9.5l1.6-1.6v-15.8l-20.5-26.9v-1.6c12.3-3 23.4-14.1 23.4-31.5zm-37.9 14.3h-30l-1.6-1.6v-25.3l1.6-1.6h30c9.5 0 15.8 3.2 15.8 14.2 0 11.1-6.4 14.3-15.8 14.3zm80.9-17.4c-25.3 0-33.2 14.2-33.2 23.7l1.6 1.6h19l1.6-1.6c1.6-4.7 6.3-4.7 11.1-4.7 9.5 0 11.1 1.6 11.1 9.5v1.6l-1.6 1.6s-4.7-1.6-11.1-1.6c-12.6 0-34.8 3.2-34.8 26.9 0 15.8 11.1 25.3 28.4 25.3 11.1 0 17.4-6.3 17.4-6.3h1.6l1.6 3.2 1.6 1.6h17.4l1.6-1.6v-42.7c-.2-23.9-8.1-36.5-33.3-36.5zm11 52.1c0 6.3-6.3 11.1-14.2 11.1s-11.1-3.2-11.1-7.9c0-6.3 4.7-9.5 14.2-9.5 6.3 0 9.5 1.6 9.5 1.6l1.6 1.6zm90.7-82.1-1.6 1.6v36.3h-1.6s-6.3-7.9-20.5-7.9c-19 0-34.8 15.8-34.8 41.1s15.8 41.1 34.8 41.1c14.2 0 20.5-7.9 20.5-7.9h1.6l1.6 4.7 1.6 1.6h17.4l1.6-1.6V97.7l-1.6-1.6h-19zm-18.9 93.2c-12.6 0-17.4-9.5-17.4-22.1s4.7-22.1 17.4-22.1 17.4 9.5 17.4 22.1-4.8 22.1-17.4 22.1zm74.5-61.6 1.6 1.6v75.8l-1.6 1.6h-19l-1.6-1.6v-75.8l1.6-1.6zm0-31.6 1.6 1.6v15.8l-1.6 1.6h-19l-1.6-1.6V97.7l1.6-1.6h19zm35.4 71.1c0 14.2 6.3 22.1 17.4 22.1 7.9 0 12.6-3.2 14.2-7.9l1.6-1.6h19l1.6 1.6c-3.2 19-19 26.9-36.3 26.9-23.7 0-39.5-15.8-39.5-41.1s15.8-41.1 39.5-41.1c17.4 0 33.2 7.9 36.3 26.9l-1.6 1.6h-19l-1.6-1.6c-1.6-4.7-6.3-7.9-14.2-7.9-11.1-.1-17.4 7.8-17.4 22.1zm85.7-71.1 1.6 1.6v107.4l-1.6 1.6h-19l-1.6-1.6V97.7l1.6-1.6h19zm50.8 30c-25.3 0-37.9 19-37.9 41.1s12.6 41.1 39.5 41.1c23.7 0 31.6-14.2 33.2-23.7l-1.6-1.6h-19l-1.6 1.6c-1.6 3.2-6.3 4.7-11.1 4.7-12.6 0-15.8-9.5-15.8-12.6l1.6-1.6h49l1.6-1.6v-6.3c.1-22.2-12.6-41.1-37.9-41.1zm12.7 33.2h-25.3l-1.6-1.6c0-1.6 1.6-12.6 14.2-12.6s14.2 11.1 14.2 12.6zM106 1l55 55-35 10-30-30zm0 110 75 75-90 30-90-90 30-90 75 75 55-55 55-55 20 65-65 65zm145.3 4.7 28.2 91.8L196 291H76l105-105z" fill="#5361d9"/></svg>
This is the API for working with bud-imagemin if you want to make adjustments:
bud.imagemin.svgo.set(`encodeOptions`, {
...
})
Hmm, your SVG works…
Try with this SVG - font awesome brand icon scaled to 48px in figma and exported.
<svg width="42" height="48" viewBox="0 0 42 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.0093 13.2188C15.0468 13.2188 10.2375 18.0281 10.2375 23.9906C10.2375 29.9531 15.0468 34.7625 21.0093 34.7625C26.9718 34.7625 31.7812 29.9531 31.7812 23.9906C31.7812 18.0281 26.9718 13.2188 21.0093 13.2188ZM21.0093 30.9938C17.1562 30.9938 14.0062 27.8531 14.0062 23.9906C14.0062 20.1281 17.1468 16.9875 21.0093 16.9875C24.8718 16.9875 28.0125 20.1281 28.0125 23.9906C28.0125 27.8531 24.8625 30.9938 21.0093 30.9938V30.9938ZM34.7343 12.7781C34.7343 14.175 33.6093 15.2906 32.2218 15.2906C30.825 15.2906 29.7093 14.1656 29.7093 12.7781C29.7093 11.3906 30.8343 10.2656 32.2218 10.2656C33.6093 10.2656 34.7343 11.3906 34.7343 12.7781ZM41.8687 15.3281C41.7093 11.9625 40.9406 8.98125 38.475 6.525C36.0187 4.06875 33.0375 3.3 29.6718 3.13125C26.2031 2.93438 15.8062 2.93438 12.3375 3.13125C8.9812 3.29063 5.99995 4.05938 3.53433 6.51563C1.0687 8.97188 0.309326 11.9531 0.140576 15.3188C-0.0562988 18.7875 -0.0562988 29.1844 0.140576 32.6531C0.299951 36.0188 1.0687 39 3.53433 41.4563C5.99995 43.9125 8.97183 44.6813 12.3375 44.85C15.8062 45.0469 26.2031 45.0469 29.6718 44.85C33.0375 44.6906 36.0187 43.9219 38.475 41.4563C40.9312 39 41.7 36.0188 41.8687 32.6531C42.0656 29.1844 42.0656 18.7969 41.8687 15.3281V15.3281ZM37.3875 36.375C36.6562 38.2125 35.2406 39.6281 33.3937 40.3688C30.6281 41.4656 24.0656 41.2125 21.0093 41.2125C17.9531 41.2125 11.3812 41.4563 8.62495 40.3688C6.78745 39.6375 5.37183 38.2219 4.6312 36.375C3.53433 33.6094 3.78745 27.0469 3.78745 23.9906C3.78745 20.9344 3.5437 14.3625 4.6312 11.6063C5.36245 9.76875 6.77808 8.35313 8.62495 7.6125C11.3906 6.51563 17.9531 6.76875 21.0093 6.76875C24.0656 6.76875 30.6375 6.525 33.3937 7.6125C35.2312 8.34375 36.6468 9.75938 37.3875 11.6063C38.4843 14.3719 38.2312 20.9344 38.2312 23.9906C38.2312 27.0469 38.4843 33.6188 37.3875 36.375Z" fill="currentColor"/>
</svg>
I made test with your source SVG and I found the difference. If SVG has attribute width and height, then svgo remove viewBox.
I will try override settings by the API from your last reply.
example from bud docs
app.imagemin.encode(`svg`, {
// multipass is here in bud docs
// so other settings, like plugin should be here, and this is not working
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false
},
},
},
],
})
your example from last reply works fine
app.imagemin.svgo.set(`encodeOptions`, {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false
},
},
},
],
})