SVGO plugin for imagemin
License: MIT License
SVGO imagemin plugin
npm install imagemin-svgoimport imagemin from 'imagemin';
import imageminSvgo from 'imagemin-svgo';
await imagemin(['images/*.svg'], {
destination: 'build/images',
plugins: [
imageminSvgo({
plugins: [{
name: 'removeViewBox',
active: false
}]
})
]
});
console.log('Images optimized');Returns a Promise<Buffer>.
Type: object
Pass options to SVGO.
Type: Buffer
The buffer to optimize.
I didn't see anything in the readme about not submitting issues here, so if this is the wrong place, sorry.
This SVG code generates an error:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.0" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 17.4 32" enable-background="new 0 0 17.4 32" xml:space="preserve">
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds height="31.8" width="17.4" bottomLeftOrigin="true" x="0" y="-31.8"></sliceSourceBounds>
</sfw>
</metadata>
<path fill="#FFFFFF" d="M16.7,13.3C11.4,8.9,6.1,4.4,0.9,0C0.6-0.2-0.7,4.3,0.5,5.3C4.7,8.8,9,12.4,13.2,15.9
C9,19.5,4.7,23,0.5,26.6c-1.2,1,0.1,5.5,0.4,5.2c5.3-4.4,10.6-8.8,15.8-13.3C17.6,17.8,17.6,14.1,16.7,13.3z"/>
</svg>
And here's the error I get from grunt-contrib-imagemin with stack trace enabled:
Fatal error: First argument needs to be a number, array or string.
TypeError: First argument needs to be a number, array or string.
at new Buffer (buffer.js:188:15)
at /project/node_modules/imagemin-svgo/index.js:24:29
at /project/node_modules/imagemin-svgo/node_modules/svgo/lib/svgo.js:31:13
at Object.sax.onerror (/project/node_modules/imagemin-svgo/node_modules/svgo/lib/svgo/svg2js.js:120:9)
at emit (/project/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:615:33)
at error (/project/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:644:3)
at strictFail (/project/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:662:22)
at Object.write (/project/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:1336:11)
at module.exports (/project/node_modules/imagemin-svgo/node_modules/svgo/lib/svgo/svg2js.js:131:9)
at SVGO.optimize (/project/node_modules/imagemin-svgo/node_modules/svgo/lib/svgo.js:28:5)
I try to disable some plugins as described in README, but they are still used.
imagemin-svgo + imagemin are used with Gulp in this setup:
[...]
.pipe(plugins.imagemin([
imageminSvgo({
plugins: [
{removeUnknownsAndDefaults: false}
]
}))
[...]Hi and thank you!
This isn't a bug so I hope you don't mind me posting here.
I would love to be able to access the file object so I can create a class named from the file name like so:
`var path = require("path");
var class_name = path.basename(file.relative, path.extname(file.relative));`
Based on this readme for svgmin.
My gulp task looks like this, but no luck - fails without complaint.
// ### Images //gulp images- Run lossless compression on all the images. gulp.task('images', function() { return gulp.src(globs.images) .pipe(imagemin( function ( file ) { var path = require("path"); var prefix = path.basename(file.relative, path.extname(file.relative)); return { progressive: true, interlaced: true, svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}, {addClassesToSVGElement: { className: prefix + ' svgfile', }}] }; } )) .pipe(gulp.dest(path.dist + 'images')) .pipe(browserSync.stream()); });
Is this possible in Imagemin?
Node 16.9.1
DeprecationWarning: No "main" or "exports" field defined in the package.json for ".../imagemin-svgo" resolving the main entry point "index.js"
Hey guys, we have a error ocurring on:
/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:666:10
I get the following error. The SVG was produced with illustrator.
Warning: Error: no writecb in Transform class in file
any idea ?
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected] for the project I'm working on.
This fixes a build error with next.js and the ERR_REQUIRE_ESM error.
https://github.com/vercel/next.js/issues/30307
Here is the diff that solved my problem:
diff --git a/node_modules/imagemin-svgo/index.js b/node_modules/imagemin-svgo/index.cjs
similarity index 100%
rename from node_modules/imagemin-svgo/index.js
rename to node_modules/imagemin-svgo/index.cjsThis issue body was partially generated by patch-package.
⭐
Nearly all of the SVG has been stripped after running it through the gulp-imagemin plugin.
Node: v7.2.0
Package: v3.1.1
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="svg-icon--facebook" viewBox="0 0 32 32">
<title>facebook</title>
<path d="M30.234 0h-28.468c-0.976 0-1.766 0.79-1.766 1.766v28.468c0 0.976 0.79 1.766 1.766 1.766h15.326v-12.392h-4.172v-4.828h4.172v-3.566c0-4.132 2.524-6.38 6.212-6.38 1.766 0 3.284 0.128 3.726 0.188v4.32h-2.56c-2 0-2.39 0.96-2.39 2.36v3.080h4.78l-0.62 4.84h-4.16v12.378h8.154c0.976 0 1.766-0.79 1.766-1.766v-28.468c0-0.976-0.79-1.766-1.766-1.766z"></path>
</symbol>
<symbol id="svg-icon--google-plus" viewBox="0 0 32 32">
<title>google-plus</title>
<path d="M10.18 14.546v3.49h5.78c-0.232 1.5-1.746 4.394-5.774 4.394-3.474 0-6.31-2.88-6.31-6.43s2.83-6.43 6.304-6.43c1.98 0 3.304 0.844 4.060 1.572l2.764-2.66c-1.774-1.66-4.074-2.66-6.82-2.66-5.634-0.002-10.184 4.558-10.184 10.178s4.552 10.18 10.18 10.18c5.88 0 9.776-4.13 9.776-9.948 0-0.668-0.072-1.18-0.16-1.686h-9.616zM32 14.546h-2.91v-2.91h-2.91v2.91h-2.908v2.908h2.91v2.91h2.92v-2.91h2.898z"></path>
</symbol>
<symbol id="svg-icon--instagram" viewBox="0 0 32 32">
<title>instagram</title>
<path d="M16 0c-4.346 0-4.89 0.020-6.596 0.096-1.704 0.080-2.864 0.348-3.884 0.744-1.052 0.408-1.946 0.956-2.834 1.846-0.89 0.888-1.44 1.78-1.846 2.834-0.396 1.020-0.666 2.18-0.744 3.884-0.080 1.706-0.096 2.25-0.096 6.596s0.020 4.89 0.096 6.596c0.080 1.704 0.348 2.866 0.744 3.884 0.408 1.052 0.956 1.946 1.846 2.834 0.888 0.89 1.78 1.44 2.834 1.846 1.020 0.396 2.18 0.666 3.884 0.744 1.706 0.080 2.25 0.096 6.596 0.096s4.89-0.020 6.596-0.096c1.704-0.080 2.866-0.348 3.884-0.744 1.052-0.408 1.946-0.956 2.834-1.846 0.89-0.888 1.44-1.78 1.846-2.834 0.396-1.020 0.666-2.18 0.744-3.884 0.080-1.706 0.096-2.25 0.096-6.596s-0.020-4.89-0.096-6.596c-0.080-1.704-0.348-2.866-0.744-3.884-0.408-1.052-0.956-1.946-1.846-2.834-0.888-0.89-1.78-1.44-2.834-1.846-1.020-0.396-2.18-0.666-3.884-0.744-1.706-0.080-2.25-0.096-6.596-0.096zM16 2.88c4.272 0 4.78 0.020 6.466 0.096 1.56 0.072 2.406 0.332 2.97 0.552 0.748 0.29 1.28 0.636 1.84 1.196s0.906 1.092 1.196 1.84c0.22 0.564 0.48 1.41 0.552 2.97 0.076 1.688 0.094 2.194 0.094 6.466s-0.020 4.78-0.1 6.466c-0.080 1.56-0.34 2.406-0.56 2.97-0.3 0.748-0.64 1.28-1.2 1.84s-1.1 0.906-1.84 1.196c-0.56 0.22-1.42 0.48-2.98 0.552-1.7 0.076-2.2 0.094-6.48 0.094s-4.78-0.020-6.48-0.1c-1.56-0.080-2.42-0.34-2.98-0.56-0.76-0.3-1.28-0.64-1.84-1.2s-0.92-1.1-1.2-1.84c-0.22-0.56-0.48-1.42-0.56-2.98-0.060-1.68-0.080-2.2-0.080-6.46s0.020-4.78 0.080-6.48c0.080-1.56 0.34-2.42 0.56-2.98 0.28-0.76 0.64-1.28 1.2-1.84s1.080-0.92 1.84-1.2c0.56-0.22 1.4-0.48 2.96-0.56 1.7-0.060 2.2-0.080 6.48-0.080zM16 7.784c-4.54 0-8.216 3.68-8.216 8.216 0 4.54 3.68 8.216 8.216 8.216 4.54 0 8.216-3.68 8.216-8.216 0-4.54-3.68-8.216-8.216-8.216zM16 21.334c-2.946 0-5.334-2.388-5.334-5.334s2.388-5.334 5.334-5.334c2.946 0 5.334 2.388 5.334 5.334s-2.388 5.334-5.334 5.334zM26.46 7.46c0 1.060-0.86 1.92-1.92 1.92s-1.92-0.86-1.92-1.92 0.86-1.92 1.92-1.92 1.92 0.86 1.92 1.92z"></path>
</symbol>
<symbol id="svg-icon--twitter" viewBox="0 0 32 32">
<title>twitter</title>
<path d="M32 6.076c-1.18 0.52-2.44 0.874-3.77 1.034 1.354-0.814 2.396-2.1 2.886-3.632-1.268 0.74-2.674 1.28-4.17 1.58-1.196-1.28-2.9-2.080-4.792-2.080-3.624 0-6.564 2.94-6.564 6.56 0 0.52 0.060 1.020 0.17 1.5-5.456-0.26-10.294-2.88-13.532-6.84-0.568 0.962-0.888 2.082-0.888 3.302 0 2.28 1.16 4.286 2.92 5.464-1.076-0.034-2.090-0.33-2.974-0.82v0.080c0 3.18 2.26 5.836 5.266 6.44-0.552 0.148-1.132 0.228-1.73 0.228-0.42 0-0.82-0.040-1.22-0.116 0.84 2.608 3.26 4.506 6.14 4.56-2.24 1.76-5.080 2.808-8.14 2.808-0.52 0-1.040-0.030-1.56-0.090 2.92 1.86 6.36 2.948 10.080 2.948 12.080 0 18.68-10 18.68-18.66 0-0.28 0-0.56-0.020-0.84 1.28-0.92 2.4-2.080 3.28-3.4z"></path>
</symbol>
</defs>
</svg><svg style="position:absolute;width:0;height:0" xmlns="http://www.w3.org/2000/svg" overflow="hidden"/>return gulp.src([
config.dirs.img.input + '**/*.{png,jpg,jpeg,gif,svg}',
])
.pipe(plugins.imagemin())
.pipe(gulp.dest(config.dirs.img.output));This file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
<path transform="translate(2)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(8)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(14)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(20)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(26)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
</svg>
Is being run through gulp-imagemin...and it comes out like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#fff"><path d="M2 12v8h4v-8zM8 12v8h4v-8zM14 12v8h4v-8zM20 12v8h4v-8zM26 12v8h4v-8z"><animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"/></path></svg>
Which renders as a much different image.
I expected to get the minimized .svg files.
I get errors for each of my svg files: ERROR in minimizer function doesn't return the 'data' property or result is not a 'Buffer' value
Note: I only see this in production mode, development mode doesn't show any errors
...
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
...
config = {
...
optimization: {
...
minimizer: [
...
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
// Lossless optimization with custom option
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 5 }],
// Svgo configuration here https://github.com/svg/svgo#configuration
[
'svgo',
{
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
addAttributesToSVGElement: {
params: {
attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
},
},
},
},
},
],
},
],
],
},
},
}),
...
]
...
}
...
}
The following is displayed for each svg file:
ERROR in ./src/img/usage.svg
Module Error (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
minimizer function doesn't return the 'data' property or result is not a 'Buffer' value
// there's also a stack trace after this ^ but it doesn't have anything about imagemin, only my codebase
After the above is displayed for each file, I see the following error repeated 24 times: ERROR in minimizer function doesn't return the 'data' property or result is not a 'Buffer' value
OS & version: Windows 11 Pro version 22H2 build 22621.3737
node version (run node -v): 20.14.0
npm version (run npm -v): 10.7.0
Webpack version (run npx webpack -v): 5.91.0
imagemin version: 9.0.0
imagemin-svgo: 11.0.1
gulp: 3.9.1
imagemin-svgo: 5.2.0
I'm using imagemin-svgo in my gulp project. Here´s my gulpfile:
var imagesTask = function() {
return gulp.src([paths.src, exclude])
.pipe(changed(paths.dest))
.pipe(imagemin({
use: [
svgo({
plugins: [
{removeXMLProcInst : false}
]
})]}))
.pipe(gulp.dest(paths.dest))
}
In my original svg I have a XML processing instruction which I need.
After I run the imagemin task that XML processing instruction is gone even though I do set the option to false. What am I doing wrong or is this perhaps a bug?
The recent update (v10.0.0) breaks nuxt-optimized-images because of lacking support of CommonJS. Including both ESM and CommonJS files would be ideal.
svgo 1.2.2 fixes the js-yaml < 3.13.1 vulnerability.
Can you update svgo from 1.0.5 to 1.2.2 in package.json?
When trying to use the latest version of this plugin, imagemin throws an error:
Plugin name should be specified
One motivation for updating to a recent svgo release is that the issue with prefix IDs had been fixed.
For preventing long term issues, svgo should be used as a peerDependency instead a normal dependency.
I've got a problem with an SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="3.000001907348633 3 14 14">
<g fill="none" fill-rule="evenodd">
<g class="color" fill="#00ff00">
<path
d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"
transform="translate(-1115.000000, -334.000000) translate(430.000000, 314.000000) translate(19.496462, 15.000000) translate(655.503538, 0.000000) translate(10.000000, 5.000000) translate(3.000000, 3.000000)">
</path>
</g>
</g>
</svg>
I set a class="color" to be able to change the color via css later on.
After optimizing the class is missing:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="3 3 14 14"><path d="M17 4.41L15.59 3 10 8.59 4.41 3 3 4.41 8.59 10 3 15.59 4.41 17 10 11.41 15.59 17 17 15.59 11.41 10z" fill="#0f0" fill-rule="evenodd"/></svg>
Other attributes have moved to the path, but not the class.
I'm not able to find an option/plugin to avoid that.
It does work as expected if the original SVG looks like this (class in path):
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="3.000001907348633 3 14 14">
<g fill="none" fill-rule="evenodd">
<g fill="#00ff00">
<path class="color"
d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"
transform="translate(-1115.000000, -334.000000) translate(430.000000, 314.000000) translate(19.496462, 15.000000) translate(655.503538, 0.000000) translate(10.000000, 5.000000) translate(3.000000, 3.000000)">
</path>
</g>
</g>
</svg>
will result in:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="3 3 14 14"><path class="color" d="M17 4.41L15.59 3 10 8.59 4.41 3 3 4.41 8.59 10 3 15.59 4.41 17 10 11.41 15.59 17 17 15.59 11.41 10z" fill="#0f0" fill-rule="evenodd"/></svg>
Is there a way to keep the class attribute independent on its position?
It's sad to tell you that there is a vulnerability introduced in your package imagemin-svgo. The vulnerability CVE-2021-33587 is detected in package css-what<5.0.1 and [email protected] is transitively referenced by [email protected].
As you know, [email protected] is so popular that hundreds of active and popular downstream projects directly or transitively depends on it in their latest versions (274,352 downloads per week and about 718 downstream projects, e.g., common-ux 3.12.70, iguazio.dashboard-controls 0.36.1, @sum.cumo/imagemin-merlin 2.0.0, laravel-mix-svg-vue 0.3.3, @leapdev/gui-icons 2.0.19, self-grunt-cli 1.0.5, @nitro/gulp 5.10.8, , etc.).
In this case, the issue CVE-2021-33587 can be propagated into these downstream projects and expose security threats to them.
As far as I know, [email protected] is introduced into the above projects via the following package dependency paths:
(1)[email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected]
(2)@nitro/[email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected]
......
Although the vulnerability has been removed since [email protected], these projects cannot easily upgrade imagemin-svgo from version 7.1.0 to (>=9.0.0):
The projects such as grunt-contrib-imagemin and gulp-imagemin, which introduced [email protected], are not maintained anymore. These unmaintained packages can neither upgrade imagemin-svgo nor be easily migrated by the large amount of affected downstream projects.
Given the large number of downstream users, is it possible to release a new patched version with the updated dependency to remove the vulnerability from [email protected]?
Since these inactive projects set a version constaint 7.1.* for imagemin-svgo on the above vulnerable dependency paths, if imagemin-svgo removes the vulnerability from 7.1.0 and releases a new patched version [email protected], such a vulnerability patch can be automatically propagated into the 718 affected downstream projects.
In [email protected], you can simply try to perform the following upgrade:
svgo ^1.3.2 ➔ ^2.3.1;
Note:
[email protected](>=2.3.1) transitively depends on [email protected] which has fixed the vulnerability (CVE-2021-33587).
If you have any other ways to resolve the issue, welcome to share with me.
Thank you for your help.^_^
Best regards,
Paimon
SVG images has broken style tags, the contents of the tag are deleted, but not the tag itself.
<style/>
The use of options removeStyleElement works correctly and either deletes the tag, or not, but the contents of the tag are cleared against the will of the development. Please refer to this issue.
gulp-imagemin relies on imagemin-svgo and it was working fine till 5.2.2 but after 5.2.3 it has started breaking off.
Hi!
Trying to make this work:
gulp.task('images:svg', function(){
var svgmin = require('imagemin-svgo');
return gulp.src('assets/img/**/*.svg')
.pipe(svgmin({})())
.pipe(gulp.dest('dest/img/'));
});
SVG files in dest/img/ are being reloaded, but not minified. After some debugging I found out, that this check in imagemin-svgo is not passed:
if (!isSvg(file.contents)) {
cb(null, file);
return;
}
and more precisely, this regexp: /<svg[^>]*>.*<\/svg>\s*$/ in is-svg. In my case, the source files have newlines, and the test fails (for both Windows and Unix newline), since . does not match special characters.
Replacing the regexp with /<svg[^>]*>[\s\S]*<\/svg>\s*$/ does work
In a lot of cases is-svg returns incorrect results for valid svg.
I would be nice to have ability to pass svg: true or other flag to avoid the following check:
if (!isSvg(buf)) {
return Promise.resolve(buf);
}This imagemin plugin entitiy-escapes & characters with &
although & is also used for other entities like '.
This results in changed SVG input which results in
incorrect svgo output, e.g. ' becomes &apos;.
Offending line: https://github.com/imagemin/imagemin-svgo/blob/master/index.js#L25
What would be the purpose of this string replacement anyway?
Running svgo directly results in correct output.
Edit: PR: #22
I originally opened this issue on gulp-imagemin but was advised it should be opened here instead.
SVGO lets you set a prefix for id attributes with the prefixIds option. If this is option is set, the default prefix should be the SVG file name. However, when the option is set in gulp-imagemin, the prefix output in the SVG files is prefix. Here is the relevant part of the script I am using:
return gulp.src('./src/*.svg')
.pipe(imagemin([
imagemin.svgo({
plugins: [
{
prefixIds: {
prefix: true
}
}
]
})
]))
.pipe(gulp.dest('./dist'));My aim was to have the id attributes in each file have a unique prefix to avoid naming collisions when they are embedded in an HTML file. Is there any way to get the default, documented behaviour of SVGO to work here?
events.js:141
throw er; // Unhandled 'error' event
^
TypeError: this is not a typed array.
at Function.from (native)
at /redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/index.js:25:19
at optimizeOnceCallback (/redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/node_modules/svgo/lib/svgo.js:44:17)
at /redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/node_modules/svgo/lib/svgo.js:65:9
at Object.sax.onend (/redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/node_modules/svgo/lib/svgo/svg2js.js:156:13)
at emit (/redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:640:35)
at end (/redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:683:5)
at Object.write (/redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:991:14)
at Object.SAXParser.close (/redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/node_modules/svgo/node_modules/sax/lib/sax.js:157:38)
at module.exports (/redacted/node_modules/gulp-imagemin/node_modules/imagemin-svgo/node_modules/svgo/lib/svgo/svg2js.js:169:28)
Would it be possible to add the ability to pass js2svg options such as --pretty ?
var svgo = new SVGO({
multipass: opts.multipass || false,
plugins: opts.plugins || [],
js2svg: opts.js2svg || {}
});This valid SVG document is not being optimized by imagemin just because xmlns is missing from <svg>
<svg width="100" height="100" viewBox="0 0 30 30" version="1.1">
<rect x="0" y="0" width="10" height="10"/>
</svg>
SVGO minifies it if run directly, so the problem should be somewhere in imagemin.
Test project zip: http://cl.ly/YqYZ
Can't find any information about it in the readme or release notes. Any breaking changes?
Some of the images optimised before are broken after running this plugin on them. Files before and after are attached.
Archive.zip
I'm using imagemin-svgo v 4.1.2 with this set of plugins:
{cleanupIDs:{minify:false}},
{removeRasterImages:false},
{removeTitle:false},
{removeXMLProcInst:false},
{cleanupNumericValues:{floatPrecision:0}},
and multipass: true .The original SVG (№1):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" height="113.27" width="64.468" version="1.1" y="0px" x="0px" viewBox="0 0 64.468004 113.27">
<g>
<polygon fill="#ff0000" points="421.95,36.272,399.62,41.947,389.78,124.81,411.44,124.81" transform="translate(-381.124,-11.541001)"/>
<polygon fill="#ff0000" points="381.12,28.182,445.55,11.811,445.59,11.541,383.46,11.541" transform="translate(-381.124,-11.541001)"/>
</g>
</svg>
is processed into (№2):
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" height="113" width="64" version="1" viewBox="0 0 64.468004 113.27"><path d="M40.826 24.73l-22.33 5.676-9.84 82.863h21.66zm-40.83-8.09L64.426.27l.04-.27H2.336z"/></svg>
The problem is that fill attribute for both polygons is lost. I thought it was an issue with SVGO, but then tried turning multipass off. The result was this (note the fill bubbling up to a group) (№2.1):
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" height="113" width="64" version="1" viewBox="0 0 64.468004 113.27"><g fill="#f00"><path d="M40.826 24.73l-22.33 5.676-9.84 82.863h21.66zM-.004 16.64L64.426.27l.04-.27H2.336z"/></g></svg>
And if it is processed with imagemin-svgo again, the result is the same compressed shape, but with the fill kept (№2.2)
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" height="113" width="64" version="1" viewBox="0 0 64.468004 113.27"><path d="M40.826 24.73l-22.33 5.676-9.84 82.863h21.66zm-40.83-8.09L64.426.27l.04-.27H2.336z" fill="#f00"/></svg>
in short: imgmin-svgo with multipass:true processes №1 into №2 instead of №2.2.
But the most interesting part is that if we run the module with multipass: true, even №2.1 is turned into №2, i.e. the group with a fill is totally lost.
so i have been making banners for adwords and kept getting this error where it doesn't support sfw files so kept looking and kept looking for this file its referring to then it hit me that the svg also has some code and i found the sfw file within their (not to familiar with svg files) my question is would the svg still work if i just take out the code sfw ill past the code in down below if not what can i do the banners need to be scalable
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
please help ASAP
Regards steven
IT would be much better if this imagemin plugin could use svgo as a peerDependency.
Currently it uses svgo as a dependency, which prevents overriding it with a package of different version.
This will also fix #41.
Until svgo is used as a peerDependency, some other mechanism has to be used to force a specific svgo version:
https://stackoverflow.com/questions/15806152/how-do-i-override-nested-npm-dependency-versions
There were some fixes to one of the latest included plugins in svgo as of 1.0.2
Can you bump your dep ref to this version please?
(node:63922) [DEP0151] DeprecationWarning: No "main" or "exports" field defined in the package.json for /Users/phil/dev/frontend-boilerplate/node_modules/imagemin-svgo/ resolving the main entry point "index.js", imported from /Users/phil/dev/frontend-boilerplate/gulpfile.js.
Default "index" lookups for the main are deprecated for ES modules.
(Use `node --trace-deprecation ...` to show where the warning was created)
SVGO provides a multipass config property to optimise SVGs multiple times until they are fully optimised.
See https://github.com/svg/svgo/blob/0d5ce7d4e01fa5910bcf0e7159a3fd6239da388d/lib/svgo/config.js#L28
Could you make it possible to pass this property to imagemin-svgo?
There is an issue with the newest release: "imagemin-svgo" hands over a buffer object to "isSvg", which fails because it only works with strings.
Hi,
Github is reporting a ReDoS vulnerability with is-svg v4.2.1. Looks like it needs to be bumped up to v4.2.2 or later.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.