diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json index 1093ca9088f76..28923a70a5331 100644 --- a/packages/gatsby-plugin-sharp/package.json +++ b/packages/gatsby-plugin-sharp/package.json @@ -21,7 +21,7 @@ "probe-image-size": "^7.2.3", "semver": "^7.3.7", "sharp": "^0.30.7", - "svgo": "1.3.2" + "svgo": "2.8.0" }, "devDependencies": { "@babel/cli": "^7.15.4", diff --git a/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap index ea17e500aba82..5d1766c7135c9 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ Object { "aspectRatio": 1, "height": 20, "originalName": "test.png", - "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVQ4y2P4r8ZANmKgvuZ/agy/VaHojyopmv+CNf/XQCCoCEHNf1VBqv+oM5yVY1giwbBakuG2AkjknzoW/eh2/tdgOCPHYM7OwMDAwAgiGFgYGMJ5GF4og43ApRmuk58JqpMJRjIwMBizMbxTZviPaj8ihCD6rThAStkgljJATWEHc3P5wT5SxdD8B2ztERmQIiYGdAAxSpaF4T2q5TDN4HCaLgZSxMyAE1yQgwY+Fs1zxQloviSPTTMktM7JgVzIiKEH4hElFoavKogAQgltiJA3F0gdOyPC58yw8GsUwhFgUMvVGR4oMqiwogQbhOHLxfBLDcVabIlEneGxEkMMLwMvTLc4M0OdEMN3VfRIxp48/6mDnPdCieGkHCiRflRh+K+JPXljz1IQJ0AzhjrRGQPZC5As+ZeuhQGRmgHU8mT34D0STQAAAABJRU5ErkJggg==", + "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQ4y7WUzUrDQBSFT37aij8UFFqFNmriZFy7s8/QF+iiz+ArCL6EGzeufBDBRVEQV67ciLgR3YgoyVju3IkxTaa2osNw4Yb57pmcOzP4jPHrib+HVYwkRiIopnPBBtjNZ2opMZnTIomPGKMuTts4W8ftFn1JJW1nGsyClwH2GwDgUIDvYLCMx4hKKBvM5ChA0yXGBTwddYa9Op5KfO4Qx94CLa2xaDbqOj1oUvWkDCda9rxjNCcGl+r4eC6KZ7Ag+LhFizxYx3VgzK+AT9o/wDebVTC7dRXQDp0Swz8S1vC6kxtUcFvpDveXtEPfSriZf0dr2jBha5XE3TYi35jEk2X7i3gXBdmqQyJxH2K4YrrtABseDlfxJqYeki9eSdreQ4iLLp2Zl8iYpGa5GCm3XWYXQ1Kq5rrPXMKG/dtjMCM8Br7rZPFvbj2AAAAAAElFTkSuQmCC", "width": 20, } `; @@ -1014,7 +1014,7 @@ exports[`gatsby-plugin-sharp fluid ensure maxWidth is in srcSet breakpoints 1`] exports[`gatsby-plugin-sharp fluid includes responsive image properties, e.g. sizes, srcset, etc. 1`] = ` Object { "aspectRatio": 1, - "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVQ4y2P4r8ZANmKgvuZ/agy/VaHojyopmv+CNf/XQCCoCEHNf1VBqv+oM5yVY1giwbBakuG2AkjknzoW/eh2/tdgOCPHYM7OwMDAwAgiGFgYGMJ5GF4og43ApRmuk58JqpMJRjIwMBizMbxTZviPaj8ihCD6rThAStkgljJATWEHc3P5wT5SxdD8B2ztERmQIiYGdAAxSpaF4T2q5TDN4HCaLgZSxMyAE1yQgwY+Fs1zxQloviSPTTMktM7JgVzIiKEH4hElFoavKogAQgltiJA3F0gdOyPC58yw8GsUwhFgUMvVGR4oMqiwogQbhOHLxfBLDcVabIlEneGxEkMMLwMvTLc4M0OdEMN3VfRIxp48/6mDnPdCieGkHCiRflRh+K+JPXljz1IQJ0AzhjrRGQPZC5As+ZeuhQGRmgHU8mT34D0STQAAAABJRU5ErkJggg==", + "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQ4y7WUzUrDQBSFT37aij8UFFqFNmriZFy7s8/QF+iiz+ArCL6EGzeufBDBRVEQV67ciLgR3YgoyVju3IkxTaa2osNw4Yb57pmcOzP4jPHrib+HVYwkRiIopnPBBtjNZ2opMZnTIomPGKMuTts4W8ftFn1JJW1nGsyClwH2GwDgUIDvYLCMx4hKKBvM5ChA0yXGBTwddYa9Op5KfO4Qx94CLa2xaDbqOj1oUvWkDCda9rxjNCcGl+r4eC6KZ7Ag+LhFizxYx3VgzK+AT9o/wDebVTC7dRXQDp0Swz8S1vC6kxtUcFvpDveXtEPfSriZf0dr2jBha5XE3TYi35jEk2X7i3gXBdmqQyJxH2K4YrrtABseDlfxJqYeki9eSdreQ4iLLp2Zl8iYpGa5GCm3XWYXQ1Kq5rrPXMKG/dtjMCM8Br7rZPFvbj2AAAAAAElFTkSuQmCC", "density": 72, "originalImg": "/static/1234/7e516/test.png", "originalName": "test.png", @@ -1405,7 +1405,7 @@ Object { "originalName": "test.png", "src": "/static/1234/7e516/test.png", "srcSet": "/static/1234/7e516/test.png 1x", - "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3e%3cpath%20d='M41%2024c-18%207-24%2029-11%2043%2015%2017%2044%208%2046-15%201-19-17-34-35-28'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e", + "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20version='1.1'%20preserveAspectRatio='none'%3e%3cpath%20d='M%2040.627%2024.468%20C%2023.010%2030.748%2c%2017.338%2053.384%2c%2029.891%2067.311%20C%2045.080%2084.160%2c%2073.671%2074.751%2c%2075.713%2052.231%20C%2077.463%2032.931%2c%2058.650%2018.044%2c%2040.627%2024.468'%20stroke='none'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e", "width": 100, } `; @@ -1425,6 +1425,6 @@ Object { /static/1234/a1812/test.png 50w, /static/1234/7e516/test.png 100w", "srcSetType": "image/png", - "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3e%3cpath%20d='M41%2024c-18%207-24%2029-11%2043%2015%2017%2044%208%2046-15%201-19-17-34-35-28'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e", + "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20version='1.1'%20preserveAspectRatio='none'%3e%3cpath%20d='M%2040.627%2024.468%20C%2023.010%2030.748%2c%2017.338%2053.384%2c%2029.891%2067.311%20C%2045.080%2084.160%2c%2073.671%2074.751%2c%2075.713%2052.231%20C%2077.463%2032.931%2c%2058.650%2018.044%2c%2040.627%2024.468'%20stroke='none'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e", } `; diff --git a/packages/gatsby-plugin-sharp/src/trace-svg.js b/packages/gatsby-plugin-sharp/src/trace-svg.js index 0a039a50734bd..3cbadfaa8cd46 100644 --- a/packages/gatsby-plugin-sharp/src/trace-svg.js +++ b/packages/gatsby-plugin-sharp/src/trace-svg.js @@ -72,16 +72,17 @@ exports.notMemoizedPrepareTraceSVGInputFile = async ({ } const optimize = svg => { - const SVGO = require(`svgo`) - const svgo = new SVGO({ + const { optimize } = require(`svgo`) + const svgo = optimize(svg, { multipass: true, floatPrecision: 0, plugins: [ { - removeViewBox: false, + name: `removeViewBox`, }, { - addAttributesToSVGElement: { + name: `addAttributesToSVGElement`, + params: { attributes: [ { preserveAspectRatio: `none`, @@ -91,7 +92,7 @@ const optimize = svg => { }, ], }) - return svgo.optimize(svg).then(({ data }) => data) + return svgo.data } exports.notMemoizedtraceSVG = async ({ file, args, fileArgs, reporter }) => { diff --git a/yarn.lock b/yarn.lock index 0a71c69d7bd54..a4e4b5f0b8dd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23629,19 +23629,7 @@ svgo@1.3.2, svgo@^1.0.0: unquote "~1.1.1" util.promisify "~1.0.0" -svgo@^0.7.2: - version "0.7.2" - resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" - dependencies: - coa "~1.0.1" - colors "~1.1.2" - csso "~2.3.1" - js-yaml "~3.7.0" - mkdirp "~0.5.1" - sax "~1.2.1" - whet.extend "~0.9.9" - -svgo@^2.3.0, svgo@^2.8.0: +svgo@2.8.0, svgo@^2.3.0, svgo@^2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24" integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg== @@ -23654,6 +23642,18 @@ svgo@^2.3.0, svgo@^2.8.0: picocolors "^1.0.0" stable "^0.1.8" +svgo@^0.7.2: + version "0.7.2" + resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" + dependencies: + coa "~1.0.1" + colors "~1.1.2" + csso "~2.3.1" + js-yaml "~3.7.0" + mkdirp "~0.5.1" + sax "~1.2.1" + whet.extend "~0.9.9" + sw-precache@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.1.tgz#06134f319eec68f3b9583ce9a7036b1c119f7179"