Preserve existing viewBox

README.md

@@ -60,7 +60,26 @@ plugins: [
 ];
 ```
 
-6. Execute your SVG transformation NPM script.
+6. Arguments
+
+-   `overwrite` - boolean - defaults to `true` - If set to `false` will preserve any existing `viewBox` attribute on your input SVG files.
+
+Usage:
+
+```javascript
+plugins: [
+	// ... more plugins
+	{
+		...addViewBox,
+		params: {
+			overwrite: false
+		}
+	}
+	// ... more plugins
+];
+```
+
+7. Execute your SVG transformation NPM script.
 
 ## LICENSE
 
@@ -131,30 +150,30 @@ Support and sponsor my work:
 <br />
 <br />
 <a href="https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome" title="Tweet">
-	<img src="https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter&color=38A1F3" />
+ <img src="https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter&color=38A1F3" />
 </a>
 <a href="https://paypal.me/scriptex" title="Donate on Paypal">
-	<img src="https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal&color=222d65" />
+ <img src="https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal&color=222d65" />
 </a>
 <a href="https://revolut.me/scriptex" title="Donate on Revolut">
-	<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json" />
+ <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json" />
 </a>
 <a href="https://patreon.com/atanas" title="Become a Patron">
-	<img src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413" />
+ <img src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413" />
 </a>
 <a href="https://ko-fi.com/scriptex" title="Buy Me A Coffee">
-	<img src="https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi" />
+ <img src="https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi" />
 </a>
 <a href="https://liberapay.com/scriptex/donate" title="Donate on Liberapay">
-	<img src="https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay&logo=liberapay" />
+ <img src="https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay&logo=liberapay" />
 </a>
 <a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" title="Donate Bitcoin">
-	<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" />
+ <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" />
 </a>
 <a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" title="Donate Etherium">
-	<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" />
+ <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" />
 </a>
 <a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" title="Donate Shiba Inu">
-	<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" />
+ <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" />
 </a>
 </div>

index.mjs

@@ -13,25 +13,33 @@ const name = 'SVGOAddViewBox';
 /**
  * @type {SVGOPluginFunction}
  */
-const fn = () => ({
-	root: {
-		enter: node => {
-			const element = /** @type {SVGOElement} */ (node?.children?.[0]);
+const fn = (_, params) => {
+	const { overwrite = true } = params;
 
-			if (!element) {
-				return;
-			}
+	return {
+		root: {
+			enter: node => {
+				const element = /** @type {SVGOElement} */ (node?.children?.[0]);
 
-			const { width, height } = element.attributes;
+				if (!element) {
+					return;
+				}
 
-			if (typeof width === 'undefined' || typeof height === 'undefined') {
-				return;
-			}
+				const { width, height, viewBox } = element.attributes;
+
+				if (viewBox && !overwrite) {
+					return;
+				}
 
-			element.attributes.viewBox = `0 0 ${Number(width)} ${Number(height)}`;
+				if (typeof width === 'undefined' || typeof height === 'undefined') {
+					return;
+				}
+
+				element.attributes.viewBox = `0 0 ${Number(width)} ${Number(height)}`;
+			}
 		}
-	}
-});
+	};
+};
 
 /**
  * @type {SVGOPlugin}

test/index.mjs

@@ -23,3 +23,27 @@ tape('Has viewBox attribute', async t => {
 
 	t.end();
 });
+
+tape('Preserves existing viewBox attribute', async t => {
+	const input = resolve('test', 'input', 'test-preserve.svg');
+	const output = resolve('test', 'output', 'test-preserve.svg');
+	const inputSVG = readFileSync(input, 'utf-8');
+	const outputSVG = readFileSync(output, 'utf-8');
+
+	const config = await loadConfig(resolve('test', 'svgo.config.mjs'));
+	const optimized = optimize(inputSVG, config).data;
+	const parsedInput = parse(inputSVG);
+	const parsedOutput = parse(optimized);
+	const rootNodeInput = /** @type {svgParser.ElementNode} */ (parsedInput.children[0]);
+	const rootNodeOutput = /** @type {svgParser.ElementNode} */ (parsedOutput.children[0]);
+
+	t.ok(existsSync(input), 'Input file exists.');
+	t.ok(existsSync(output), 'Output file exists.');
+	t.equals(optimized, outputSVG, 'The parsed input file and saved output files match.');
+	t.equals(
+		rootNodeInput?.properties?.viewBox,
+		rootNodeOutput?.properties?.viewBox,
+		'The viewBox attribute was not changed.'
+	);
+	t.ok(!!rootNodeInput?.properties?.viewBox, 'Has viewBox attribute.');
+});

test/svgo.config.mjs

@@ -17,6 +17,11 @@ export default {
 				}
 			}
 		},
-		addViewBox
+		{
+			...addViewBox,
+			params: {
+				overwrite: false
+			}
+		}
 	]
 };