convertTransform
Collapse multiple transforms into one, convert matrices to the short aliases, and much more.
Usage
- Basic
- Parameters
module.exports = {
plugins: [
"convertTransform"
]
}
module.exports = {
plugins: [
{
name: "convertTransform",
params: {
convertToShorts: true,
floatPrecision: 3,
transformPrecision: 5,
matrixToTransform: true,
shortTranslate: true,
shortScale: true,
shortRotate: true,
removeUseless: true,
collapseIntoOne: true
}
}
]
}
Parameters
convertToShorts
Convert transforms to their shorthand alternatives.
degPrecision
Number of decimal places to round degrees values to, using conventional rounding rules. Used for
rotate
andskew
.floatPrecision
Number of decimal places to round to, using conventional rounding rules.
transformPrecision
Number of decimal places to round to, using conventional rounding rules.
matrixToTransform
If decompose matrices into simple transforms. See Decomposition of 2D-transform matrices for more context.
shortTranslate
If to shorten references to
translate
with redundant parameters to omit them. i.e.translate(10 0)
→translate(10)
shortScale
If to shorten references to
scale
with redundant parameters to omit them. i.e.scale(2 2)
→scale(2)
shortRotate
If to shorten references to
rotate
with redundant parameters to omit them. i.e.translate(cx cy) rotate(a) translate(-cx -cy)
→rotate(a cx cy)
removeUseless
If to remove redundant transforms like
translate(0)
,skewX(0)
, orskewY(0)
.collapseIntoOne
If to multiply transforms into one.
Demo
const svg = ` <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0 150 100 " width="150"> <!-- Created with love! --> <defs> <ellipse cx="50" cy="50.0" rx="50.00" ry="auto" fill="black" id="circle"/> </defs> <g> <use href="#circle" transform="skewX(16)"/> <rect id="useless" width="0" height="0" fill="#ff0000"/> </g> </svg> `; const svgoConfig = { js2svg: { indent: 2, pretty: true }, plugins: [ "convertTransform" ] } render(<SvgoPreview svg={svg} svgoConfig={svgoConfig}/>);