ZeonTools
The Cartesian Plane of SVGs
Unlike raster images (JPEGs, PNGs) which are rigid grids of colored pixels, Scalable Vector Graphics (SVGs) are pure mathematics rendered onto a Cartesian coordinate system. When an SVG is drawn, the browser essentially places an invisible piece of graphing paper onto the screen and executes algebraic functions to draw geometry (lines, cubic bezier curves, and arcs) across that graph.
The viewBox attribute (e.g., viewBox="0 0 1024 1024") defines the exact mathematical dimensions of this internal graphing paper. It explicitly tells the browser where the origin (0,0) is located and how many internal units span across the X and Y axes. Changing the CSS width or height of an SVG does NOT change this internal graphing paper—it only squishes the canvas. To truly resize a graphic for responsive iconography (like mapping an old 1024px icon to a modern 24px grid), you must physically run matrix transformations against every internal coordinate node.
Affine Transformations Explained
Our Mathematical Vector Resizing Engine doesn't just do simple division. It builds a full Affine Transformation Matrix representing the Scale, Rotation, Skew, and Translation of your desired output.
An SVG affine matrix is represented as an array of 6 values: [a, b, c, d, e, f]. Under the hood, this corresponds to a 3x3 mathematical matrix. When we want to rotate an SVG path by 45 degrees, we don't just add 45 to the numbers. We calculate the Cosine and Sine of the angle, compute the rotational shifts across both the X and Y axes, and then multiply every single MoveTo, LineTo, and CurveTo coordinate by that matrix. Because we do this on the raw source code, the resulting SVG acts as if it was natively drawn at that rotation in Adobe Illustrator, requiring no CSS transforms in the browser.
Absolute vs Relative Paths
In an SVG `path`, commands can be uppercase (e.g. M 10 20) or lowercase (e.g. m 10 20). Uppercase commands dictate Absolute coordinates on the Cartesian plane. Lowercase commands are Relative, instructing the pen to move a certain distance from its current location.
When multiplying path data by an affine matrix, absolute coordinates must be scaled and offset by the translation matrix (`e` and `f`). However, relative coordinates only dictate distance. Thus, relative commands (`m`, `l`, `c`) must ONLY be multiplied by the scale/rotation matrix (`a, b, c, d`) and must completely ignore the translation offset. Our math engine strictly respects case-sensitivity to prevent geometry shattering.
The "non-scaling-stroke" Trick
If you've ever scaled an SVG icon in CSS and noticed that the lines became comically thick or invisibly thin, you've encountered stroke scaling. When you scale an SVG's viewBox mathematically, the stroke-width attribute must also be mathematically multiplied so the graphic looks visually identical.
Our engine offers an automated "Scale Stroke Widths" toggle to handle this algebra for you. However, as an advanced technique, you can bypass stroke scaling entirely by adding vector-effect="non-scaling-stroke" to your SVG elements. This tells the browser's rendering engine to always paint the stroke at exactly `1px` (or whatever you set), completely ignoring any viewBox matrices or CSS transforms.
Decimal Bloat & Minification
Matrix multiplication often yields floating-point atrocities (e.g. 12.3333333334). This is known as "Decimal Bloat". To combat this, our Decimal Precision Optimizer safely rounds your coordinates. We then run the output through a rigorous path minifier that strips spaces between commands and squashes negative numbers (turning M 10 -20 into M10-20). This drastically reduces the byte size of the SVG, optimizing it for production environments.