Comments (4)
SVGs have width/height and viewbox. You can easily resize a SVG by changing the width and height while leaving the viewbox the same. (However if the preexisting viewbox is incorrect, that's something different)
from svgo.
I have to manually use external tools to resize
By this, I'm assuming your gripe is using GUI tools rather than just using other tools in general? Or do you actually want SVGO to be the all-in-one tool for your needs?
Imo, functionality being split into many tools is a good thing imo, not a bad thing! (Or at least, for CLI applications.)
In UNIX/UNIX-like land, we generally favor small tools that perform one function and do it well. This reduces project scope, and ensures every tool can specialize in what it does. If we extend the scope of SVGO, we have to continue maintaining that, which doesn't seem worthwhile.
I wouldn't want that because even while previewing those SVGs, they go beyond the viewport
You may be able to fix this issue by using the removeDimensions plugin. Perhaps give this a try when you optimize with SVGO?
So could this feature be implemented as plugins in SVGO or something?
Now focusing more on the idea of resizing specifically, if removeDimensions doesn't do what you need.
I'm reluctant to add something like this to SVGO. There have been other requests that effectively try to bring editing capabilities into SVGO too, but that's not really in the scope of the project. We're an optimizer, not a CLI graphic manipulation tool like ImageMagick.
If you want to edit an SVG from the command-line or script, I'd recommend writing yourself a script using other commands, a custom SVGO plugin, or utilize the more general plugins available to achieve what you want.
Here are some off the shelf tools you could use already, including SVGO, all commands can be demoed with svgo_hackerman.svg
, the commands will resize it to 512px wide. They are written in the order of recommendation:
rsvg-convert
rsvg-convert is part of librsvg, a project by GNOME. You can read an SVG and override the width or height very cleanly.
rsvg-convert -w 512 -o svgo_hackerman_resized.svg -f svg svgo_hackerman.svg
xmlstarlet
xmlstarlet is a command-line XML manipulation tool. You can use it to delete the width
and height
attributes and replace it with whatever you like. You can also use this for any other manipulation you may be interested in.
As SVGs are XML, you can use most XML manipulation tool as an SVG manipulation tool.
xmlstarlet ed -L -d '/_:svg/@width' -i '/_:svg' -t 'attr' -n 'width' -v '512' svgo_hackerman.svg
SVGO
In SVGO, you can combine the removeAttrs plugin and addAttributesToSVGElement to remove and add the width and height attribute with the desired values.
svgo.config.js
module.exports = {
plugins: [
{
name: "removeAttrs",
params: {
attrs: [
"svg:width"
],
preserveCurrentColor: false
}
},
{
name: "addAttributesToSVGElement",
params: {
attributes: [
{
width: 512
}
]
}
}
]
}
Then run the following command:
svgo svgo_hackerman.svg
This will now have a width of 512px, however it will probably break for SVGs with a nested <svg>
element in it, though.
ImageMagick
You can use an actual command-line image graphic manipulation tool like ImageMagick. It's pretty great for raster images, but its SVG capabilities aren't perfect.
magick svgo_hackerman.svg -resize 512x svgo_hackerman_resized.svg
Normally, this will work, but it seems to break for more complex SVGs. It's also worth noting that the output appears to be the equivalent of both settings the width, but also removing view box, which may not be desirable. (This would render differently than only updating the width without changing the view box.)
sed
You could even try using sed for something like this, though it's a last resort and probably a bad idea, but noting it anyway in case the solutions don't work for whatever reason.
This deletes the original width, then appends a new width.
sed -i -E "s/(<svg [^>]+?) width\s*=\s*([\"'])([0-9]+)\2\s*(.*?>)/\1\4/" svgo_hackerman.svg
sed -i -E "s/(<svg\s+.+)(>)/\1 width=\"512\"\2/" svgo_hackerman.svg
This will break in cases where the <svg>
node itself is distributed over multiple lines.
Custom SVGO Plugin
Finally, if none of the solutions above work, you can add a custom SVGO plugin to your pipeline. However, I can't provide advice on this without more information, as if every solution proposed above doesn't cut if for you, then the requirements must be more complex than just resizing.
You can read about how to write a custom plugin in our documentation.
I hope this helps, you're welcome to add more information or request guidance if you have trouble doing what you need with the advice given!
from svgo.
Thanks, @SethFalco ! That was very well-described response. I will try the above-mentioned approaches.
from svgo.
SVGs have width/height and viewbox. You can easily resize a SVG by changing the width and height while leaving the viewbox the same. (However if the preexisting viewbox is incorrect, that's something different)
Yeah exactly. Most of the SVGs downloaded online have incorrect viewport and thus are unscalable. When optimized with SVGO, the scaling works but by default, it takes the initial width and height and we need to manually resize the SVG with 3rd party tool. Would be great to have that resize feature built-in.
from svgo.
Related Issues (20)
- [cleanupIDs] symbol is incorrectly removed when its ID is *NOT* used by URL-encoded reference
- Missing a ';' after converting svg with png;base64 HOT 1
- SVGO 3.3.0 stopped working in the AWS environment with Node.js 20 HOT 2
- Version 3.3.0 break commonjs exports
- Package.exports types file specification missing HOT 2
- `package.json`/ `dist/svgo.browser.js` are no longer exported HOT 8
- Unable to install [email protected] HOT 3
- Remove consecutive points in linear path string if they have zero length or direction does not change HOT 1
- 'Cannot read properties of undefined' error in reflectPoint
- An idea to round/rewrite elements with gradient
- v4.0 rc - import plugin utils, e.g xast.js HOT 4
- Mask colors are changed when using convertColors and currentColor: true
- RFC: Defining a General Preset for SVG Sprites
- Paths won't merge HOT 1
- Feature Request: Add Option to Remove Invisible Items HOT 1
- Multiple issues with styles / css HOT 1
- --datauri 'unenc' add 'data:image/svg+xml,data:image/svg+xml,'
- Error: Unmatched selector: % HOT 3
- [FEATURE REQUEST]: Option to hide SVGs that were optimised by 0%
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from svgo.