svg-path-simplify 0.4.3 → 0.4.5

package/src/detect_input.js

@@ -1,48 +1,57 @@
+import { dummySVG, svgNs } from "./constants";
+import { validateSVG } from "./svgii/svg_validate";
+
 export function detectInputType(input) {
     let type = 'string';
-    /*
-    if (input instanceof HTMLImageElement) return "img";
-    if (input instanceof SVGElement) return "svg";
-    if (input instanceof HTMLCanvasElement) return "canvas";
-    if (input instanceof File) return "file";
-    if (input instanceof ArrayBuffer) return "buffer";
-    if (input instanceof Blob) return "blob";
-    */
+    let log = '';
+    let isValid = true;
+
+    let result = {
+        inputType:'',
+        isValid:true,
+        fileReport:{},
+    }
+
+
     if (Array.isArray(input)) {
 
+        result.inputType = "array";
+
+
         // nested array
         if (Array.isArray(input[0])) {
             //console.log('is array', input[0], input[0][0])
 
             if (input[0].length === 2) {
                 //console.log('is single poly value array')
-                return 'polyArray'
+                result.inputType = 'polyArray'
             }
 
             else if (Array.isArray(input[0][0]) && input[0][0].length === 2) {
                 //console.log('is complex poly point value array', input[0][0])
-                return 'polyComplexArray'
+                result.inputType = 'polyComplexArray'
             }
             else if (input[0][0].x !== undefined && input[0][0].y !== undefined) {
                 //console.log('is nested point object array')
-                return 'polyComplexObjectArray'
+                result.inputType = 'polyComplexObjectArray'
             }
+            //return result
         }
 
         // is point array
         else if (input[0].x !== undefined && input[0].y !== undefined) {
             //console.log('is nested point object array')
-            return 'polyObjectArray'
+            result.inputType = 'polyObjectArray'
         }
 
         // path data array
         else if (input[0]?.type && input[0]?.values
         ) {
-            return "pathData"
-
+            result.inputType = "pathData"
         }
-        //console.log(input[0], typeof input[0]);
-        return "array";
+
+
+        return result;
     }
 
     if (typeof input === "string") {
@@ -55,39 +64,48 @@ export function detectInputType(input) {
         //console.log('isNumberJson', isJson);
 
         if (isSVG) {
-            type = 'svgMarkup'
+            let validate = validateSVG(input);
+            ({isValid, log} = validate) ;
+            if(!isValid){
+                //input = dummySVG
+                result.inputType = 'invalid'
+                result.isValid=false,
+                //result.log = JSON.stringify(log, null, ' ')
+                result.log = log
+            }else{
+                result.inputType = 'svgMarkup'
+            }
+
+            result.fileReport = validate.fileReport
+
         }
 
         else if (isJson) {
-            type = 'json'
+            result.inputType = 'json'
         }
 
         else if (isSymbol) {
-            type = 'symbol'
+            result.inputType = 'symbol'
         }
         else if (isPathData) {
-            type = 'pathDataString'
+            result.inputType = 'pathDataString'
         }
         else if (isPolyString) {
-            type = 'polyString'
+            result.inputType = 'polyString'
         }
 
         else {
             let url = /^(file:|https?:\/\/|\/|\.\/|\.\.\/)/.test(input);
             let dataUrl = input.startsWith('data:image');
-            type = url || dataUrl ? "url" : "string";
+            result.inputType = url || dataUrl ? "url" : "string";
         }
 
-
-        return type
+        return result
     }
 
-    type = typeof input
-    let constructor = input.constructor.name
-
-
+    result.inputType = (input.constructor.name || typeof input ).toLowerCase()
 
-    return (constructor || type).toLowerCase();
+    return result;
 }
 
 

package/src/index.js

@@ -44,11 +44,19 @@ export{getElementTransform as getElementTransform};
 import {getViewBox} from './svg_getViewbox.js';
 export{getViewBox as getViewBox};
 
+import { validateSVG } from './svgii/svg_validate.js';
+export { validateSVG as validateSVG};
+import { detectInputType } from './detect_input.js';
+export { detectInputType as detectInputType};
+
+
 
 // IIFE 
 if (typeof window !== 'undefined') {
     window.svgPathSimplify = svgPathSimplify;
     window.getElementTransform = getElementTransform;
+    window.validateSVG = validateSVG;
+    window.detectInputType = detectInputType;
     //window.simplifyPolySchneider = simplifyPolySchneider;
     //window.getPathDataFromEl = getPathDataFromEl;
     //window.parsePathDataString = parsePathDataString;

package/src/pathData_simplify_cubic.js

@@ -56,7 +56,7 @@ export function simplifyPathDataCubic(pathData, {
                     error += com.error;
 
                     // find next candidates
-                    for (let n = i + 1; error < tolerance && n < l; n++) {
+                    for (let n = i + offset; error < tolerance && n < l; n++) {
                         let comN = pathData[n]
 
                         if (comN.type !== 'C' ||
@@ -66,6 +66,7 @@ export function simplifyPathDataCubic(pathData, {
                                 (keepExtremes && com.extreme)
                             )
                         ) {
+
                             break
                         }
 
@@ -73,6 +74,7 @@ export function simplifyPathDataCubic(pathData, {
 
                         // failure - could not be combined - exit loop
                         if (combined.length > 1) {
+                            //renderPoint(markers, com.p, 'orange', '1%', '0.5')
                             break
                         }
 
@@ -86,6 +88,7 @@ export function simplifyPathDataCubic(pathData, {
 
                         // return combined
                         com = combined[0]
+
                     }
 
                     //console.log('tests', log, offset);
@@ -143,10 +146,10 @@ export function combineCubicPairs(com1, com2, {
     let comS = getExtrapolatedCommand(com1, com2, t)
 
     // test new point-at-t against original mid segment starting point
-    let pt = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t)
+    let ptI = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t)
 
 
-    let dist0 = getDistManhattan(com1.p, pt)
+    let dist0 = getDistManhattan(com1.p, ptI)
     let dist1 = 0, dist2 = 0;
     let close = dist0 < maxDist;
     let success = false;
@@ -162,32 +165,42 @@ export function combineCubicPairs(com1, com2, {
          * to prevent distortions
          */
 
-        // 2nd segment mid
-        let pt_2 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], 0.5)
+        // 1st segment mid
+        let ptM_seg1 = pointAtT([com1.p0, com1.cp1, com1.cp2, com1.p], 0.5)
+
+        let t2 = t * 0.5;
+        // combined interpolated mid point
+        let ptI_seg1 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t2)
+        dist1 = getDistManhattan(ptM_seg1, ptI_seg1)
 
-        // simplified path
-        let t3 = (1 + t) * 0.5;
-        let ptS_2 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t3)
-        dist1 = getDistManhattan(pt_2, ptS_2)
 
         error += dist1;
 
         if (dist1 < maxDist) {
 
-            //renderPoint(markers, pt_2, 'magenta')
-            //renderPoint(markers, ptS_2, 'green', '0.5%')
+            // 2nd segment mid
+            let ptM_seg2 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], 0.5)
 
-            // 1st segment mid
-            let pt_1 = pointAtT([com1.p0, com1.cp1, com1.cp2, com1.p], 0.5)
-
-            let t2 = t * 0.5;
-            let ptS_1 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t2)
-            dist2 = getDistManhattan(pt_1, ptS_1)
+            // simplified path
+            let t3 = (1 + t) * 0.5;
+            let ptI_seg2 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t3)
+            dist2 = getDistManhattan(ptM_seg2, ptI_seg2)
 
             error += dist2;
 
             if (error < maxDist) success = true;
 
+
+            /*
+            renderPoint(markers, ptM_seg1, 'cyan')
+            renderPoint(markers, pt, 'orange', '1.5%', '1')
+            renderPoint(markers, ptM_seg2, 'orange')
+
+            renderPoint(markers, com1.p, 'green')
+            //renderPoint(markers, com2.p, 'green')
+            renderPoint(markers, ptI_seg1, 'purple')
+            */
+
         }
 
     } // end 1st try
@@ -203,11 +216,26 @@ export function combineCubicPairs(com1, com2, {
 
         comS.dimA = getDistManhattan(comS.p0, comS.p);
         comS.type = 'C';
+
         comS.extreme = com2.extreme;
         comS.directionChange = com2.directionChange;
-        //comS.directionChange = com1.directionChange ? true : (com2.directionChange);
         comS.corner = com2.corner;
 
+
+        if (comS.extreme || comS.corner) {
+            //renderPoint(markers, comS.p)
+        }
+
+        /*
+        comS.extreme = com1.extreme;
+        comS.directionChange = com1.directionChange;
+        comS.corner = com1.corner;
+        */
+
+
+
+        //comS.directionChange = com1.directionChange ? true : (com2.directionChange);
+
         comS.values = [comS.cp1.x, comS.cp1.y, comS.cp2.x, comS.cp2.y, comS.p.x, comS.p.y]
 
         // relative error

package/src/pathData_simplify_revertToquadratics.js

@@ -6,7 +6,6 @@ export function pathDataRevertCubicToQuadratic(pathData, tolerance=1) {
         let com = pathData[c]
         let { type, values, p0, cp1 = null, cp2 = null, p = null } = com;
         if (type === 'C') {
-            //console.log(com);
             let comQ = revertCubicQuadratic(p0, cp1, cp2, p, tolerance)
             if (comQ.type === 'Q') {
                 comQ.extreme = com.extreme

package/src/pathSimplify-main.js

@@ -1,6 +1,6 @@
 import { detectInputType } from './detect_input';
 import { simplifyPathDataCubic } from './pathData_simplify_cubic';
-import { getDistManhattan, getDistance, getPathDataVertices, interpolate, pointAtT, reducePoints, svgArcToCenterParam, toParametricAngle } from './svgii/geometry';
+import { getDistManhattan, getDistance, getPathDataVertices, getSquareDistance, interpolate, pointAtT, reducePoints, svgArcToCenterParam, toParametricAngle } from './svgii/geometry';
 import { getPolyBBox } from './svgii/geometry_bbox';
 import { analyzePathData, getPathDataVerbose } from './svgii/pathData_analyze';
 import { normalizePathData, parsePathDataNormalized, convertPathData } from './svgii/pathData_convert';
@@ -16,7 +16,7 @@ import { detectAccuracy, roundPathData, roundTo } from './svgii/rounding';
 import { refineAdjacentExtremes } from './svgii/pathData_simplify_refineExtremes';
 import { cleanUpSVG, removeEmptySVGEls } from './svgii/svg_cleanup';
 import { refineRoundedCorners } from './svgii/pathData_simplify_refineCorners';
-import { refineRoundSegments } from './svgii/pathData_refine_round';
+import { refineRoundSegments, simplifyAdjacentRound } from './svgii/pathData_simplify_refine_round';
 import { refineClosingCommand } from './svgii/pathData_remove_short';
 import { scalePathData } from './svgii/pathData_transform_scale';
 import { getViewBox } from './svg_getViewbox';
@@ -32,7 +32,7 @@ import { normalizePoly, polyPtsToArray } from './svgii/poly_normalize';
 import { simplifyPolyRD } from './simplify_poly_radial_distance';
 import { simplifyPolyRDP, simplifyPolyRDP__, simplifyRDP_rel } from './simplify_poly_RDP';
 import { getEllipseLengthLG, getLegendreGaussValues, getLength, waArr_global } from './svgii/geometry_length';
-import { deg2rad } from './constants';
+import { deg2rad, dummySVG } from './constants';
 import { getPathDataLength } from './svgii/pathData_getLength';
 import { stringifySVG } from './string_helpers';
 import { presetSettings, settingsDefaults } from './pathSimplify-presets';
@@ -55,21 +55,54 @@ export function svgPathSimplify(input = '', settings = {}) {
     }
 
 
-    let { getObject = false, removeComments, removeOffCanvas, unGroup, mergePaths, removeElements, removeDimensions, removeIds, removeClassNames, omitNamespace, cleanUpStrokes, addViewBox, addDimensions, removePrologue, removeHidden, removeUnused, cleanupDefs, cleanupClip, cleanupSVGAtts, removeNameSpaced, removeNameSpacedAtts, attributesToGroup, minifyRgbColors, stylesToAttributes, fixHref, legacyHref, allowMeta, allowDataAtts, allowAriaAtts, convertPathLength, removeSVGAttributes, removeElAttributes, shapesToPaths, shapeConvert, convertShapes, simplifyBezier, optimizeOrder, autoClose, removeZeroLength, refineClosing, removeColinear, flatBezierToLinetos, revertToQuadratics, refineExtremes, simplifyCorners, fixDirections, keepExtremes, keepCorners, keepInflections, addExtremes, reversePath, toAbsolute, toRelative, toMixed, toShorthands, toLonghands, quadraticToCubic, arcToCubic, cubicToArc, lineToCubic, decimals, autoAccuracy, minifyD, tolerance, toPolygon, smoothPoly, polyFormat, precisionPoly, simplifyRD, simplifyRDP, harmonizeCpts, removeOrphanSubpaths, simplifyRound, scale, scaleTo, crop, alignToOrigin, convertTransforms, keepSmaller, splitCompound } = settings;
+    let { getObject = false, removeComments, removeOffCanvas, unGroup, mergePaths, removeElements, removeDimensions, removeIds, removeClassNames, omitNamespace, cleanUpStrokes, addViewBox, addDimensions, removePrologue, removeHidden, removeUnused, cleanupDefs, cleanupClip, cleanupSVGAtts, removeNameSpaced, removeNameSpacedAtts, attributesToGroup, minifyRgbColors, stylesToAttributes, fixHref, legacyHref, allowMeta, allowDataAtts, allowAriaAtts, removeSVGAttributes, removeElAttributes, shapesToPaths, shapeConvert, convertShapes, simplifyBezier, optimizeOrder, autoClose, removeZeroLength, refineClosing, removeColinear, flatBezierToLinetos, revertToQuadratics, refineExtremes, simplifyCorners, fixDirections, keepExtremes, keepCorners, keepInflections, addExtremes, reversePath, toAbsolute, toRelative, toMixed, toShorthands, toLonghands, quadraticToCubic, arcToCubic, cubicToArc, lineToCubic, decimals, autoAccuracy, minifyD, tolerance, toPolygon, smoothPoly, polyFormat, precisionPoly, simplifyRD, simplifyRDP, harmonizeCpts, removeOrphanSubpaths, simplifyRound, simplifyQuadraticCorners, scale, scaleTo, crop, alignToOrigin, convertTransforms, keepSmaller, splitCompound, convertPathLength, toAbsoluteUnits } = settings;
 
     //toAbsolute = !toRelative;
 
     // clamp tolerance and scale
     tolerance = Math.max(0.1, tolerance);
     scale = Math.max(0.001, scale)
-    if(fixDirections) keepSmaller = false;
+    if (fixDirections) keepSmaller = false;
     if (scale !== 1 || scaleTo || crop || alignToOrigin) {
         convertTransforms = true;
         settings.convertTransforms = true
     }
 
 
-    let inputType = detectInputType(input);
+    /**
+     * intercept 
+     * invalid inputs
+     */
+
+    let inputDetection = detectInputType(input);
+    let { inputType, log } = inputDetection
+
+    // invalid file
+    if (inputType === 'invalid' || input === dummySVG) {
+        // return dummy SVG to continue processing
+        //input = dummySVG;
+        //inputType = 'invalid';
+
+        //console.warn(`Input is not valid!\n  ${log}`);
+        //console.log(input);
+        //return false
+
+        let report = {
+            original: 0,
+            new: 0,
+            saved: 0,
+            svgSize: 0,
+            svgSizeOpt: 0,
+            compression: 0,
+            decimals: 0,
+            invalid: true
+        }
+
+        return { svg: dummySVG, d: '', polys: [], report, pathDataPlusArr: [], pathDataPlusArr_global: [], inputType: 'invalid', dOriginal: '' };
+
+    }
+
+
     let svg = '';
     let svgSize = 0;
     let svgSizeOpt = 0;
@@ -81,12 +114,12 @@ export function svgPathSimplify(input = '', settings = {}) {
 
     // pathdata superset array - containing additional data
     let pathDataPlusArr_global = []
-    let paths = []
+    let paths = [];
     let isPoly = false;
-    let polys = []
-    let poly = []
+    let polys = [];
+    let poly = [];
     let dStr = '';
-    let dOriginal = ''
+    let dOriginal = '';
 
     /**
      * normalize input
@@ -204,10 +237,7 @@ export function svgPathSimplify(input = '', settings = {}) {
         // convert all shapes to paths
         if (shapesToPaths) {
             shapeConvert = 'toPaths'
-            convert_rects = true
-            convert_ellipses = true
-            convert_poly = true
-            convert_lines = true
+            convertShapes = ['rect', 'polygon', 'polyline', 'line', 'circle', 'ellipse']
         }
 
         //console.log('shapesToPaths', shapesToPaths, 'shapeConvert', shapeConvert, convert_rects, convert_ellipses, convert_poly);
@@ -255,6 +285,9 @@ export function svgPathSimplify(input = '', settings = {}) {
     }
     //console.log('pathOptions', pathOptions);
 
+    let comCount = 0
+    let comCountS = 0
+
 
     for (let i = 0, l = paths.length; l && i < l; i++) {
 
@@ -264,6 +297,12 @@ export function svgPathSimplify(input = '', settings = {}) {
         let dN = ''
         let isPoly = false;
 
+        // disable reordering for elements with stroke dash-array
+        if (el && (el.hasAttribute('stroke-dasharray') || el.hasAttribute('stroke-dashoffset'))) {
+            optimizeOrder = false;
+            //optimizeClosePath=false;
+        }
+
         // if polygon we already heave absolute coordinates
         //let isPolyPath = !mode && isPoly && Array.isArray(d)
         //let pathData = !isPolyPath ? parsePathDataNormalized(d, { quadraticToCubic, arcToCubic }) : d;
@@ -306,7 +345,7 @@ export function svgPathSimplify(input = '', settings = {}) {
         }
 
         // count commands for evaluation
-        let comCount = pathData.length
+        comCount += pathData.length
 
         if (!isPoly && removeOrphanSubpaths) pathData = removeOrphanedM(pathData);
 
@@ -463,7 +502,6 @@ export function svgPathSimplify(input = '', settings = {}) {
 
 
 
-
             // simplify beziers
             let { pathData, bb, dimA } = pathDataPlus;
 
@@ -498,12 +536,14 @@ export function svgPathSimplify(input = '', settings = {}) {
                 //pathData = removeZeroLengthLinetos(pathData);
 
                 let threshold = (bb.width + bb.height) * 0.1
-                pathData = refineRoundedCorners(pathData, { threshold, tolerance })
+                pathData = refineRoundedCorners(pathData, { threshold, tolerance, simplifyQuadraticCorners })
             }
 
             // refine round segment sequences
-            if (simplifyRound) pathData = refineRoundSegments(pathData);
-
+            if (simplifyRound) {
+                pathData = refineRoundSegments(pathData);
+                pathData = simplifyAdjacentRound(pathData);
+            }
 
             // simplify to quadratics
             if (revertToQuadratics) pathData = pathDataRevertCubicToQuadratic(pathData, tolerance);
@@ -550,7 +590,25 @@ export function svgPathSimplify(input = '', settings = {}) {
 
         // prefer top to bottom priority for portrait aspect ratios 
         if (optimizeOrder) {
+            /*
             pathDataPlusArr = isPortrait ? pathDataPlusArr.sort((a, b) => a.bb.y - b.bb.y || a.bb.x - b.bb.x) : pathDataPlusArr.sort((a, b) => a.bb.x - b.bb.x || a.bb.y - b.bb.y)
+            */
+
+            // add  missin bbox
+            pathDataPlusArr.forEach(p => {
+                if (p.bb.x === undefined) {
+                    p.bb = getPolyBBox(getPathDataVertices(p.pathData))
+                }
+            })
+
+            try {
+                pathDataPlusArr = pathDataPlusArr.sort((a, b) => +a.bb.x.toFixed(2) - (+b.bb.x.toFixed(2)) || a.bb.y - b.bb.y);
+                //console.log(pathDataPlusArr);
+
+            } catch {
+            }
+
+
         }
 
 
@@ -623,7 +681,7 @@ export function svgPathSimplify(input = '', settings = {}) {
 
 
         // compare command count
-        let comCountS = pathData.length
+        comCountS += pathData.length
 
         let dOpt = pathDataToD(pathData, minifyD)
         //svgSizeOpt = new Blob([dOpt]).size;
@@ -706,6 +764,9 @@ export function svgPathSimplify(input = '', settings = {}) {
 
 
         report = {
+            original: comCount,
+            new: comCountS,
+            saved: comCount - comCountS,
             svgSize,
             svgSizeOpt,
             compression,

package/src/pathSimplify-only-pathdata.js

@@ -13,10 +13,11 @@ import { pathDataToD } from './svgii/pathData_stringify';
 import { detectAccuracy } from './svgii/rounding';
 import { refineAdjacentExtremes } from './svgii/pathData_simplify_refineExtremes';
 import { refineRoundedCorners } from './svgii/pathData_simplify_refineCorners';
-import { refineRoundSegments } from './svgii/pathData_refine_round';
+//import { refineRoundSegments } from './svgii/pathData_refine_round';
 import { refineClosingCommand } from './svgii/pathData_remove_short';
 import { pathDataRevertCubicToQuadratic } from './pathData_simplify_revertToquadratics';
 import { pathDataLineToCubic } from './svgii/pathData_line_to_cubic';
+import { refineRoundSegments } from './svgii/pathData_simplify_refine_round';
 
 //import { installDOMPolyfills } from './dom-polyfill';
 
@@ -97,7 +98,11 @@ export function simplifyPathData(input = '', {
     let yArr = []
 
     // mode:0 – single path
-    let inputType = detectInputType(input)
+    //let inputType = detectInputType(input)
+    let inputDetection = detectInputType(input);
+    let {inputType, log} = inputDetection
+
+
     if (inputType === 'pathDataString') {
         d = input
     } else if (inputType === 'polyString') {

package/src/pathSimplify-presets.js

@@ -30,6 +30,7 @@ export let settingsDefaults = {
     allowAriaAtts: true,
     //pathlength conversion
     convertPathLength: false,
+    toAbsoluteUnits: false,
 
     // custom removal
     removeElements: [],
@@ -61,6 +62,7 @@ export let settingsDefaults = {
     revertToQuadratics: true,
     refineExtremes: false,
     simplifyCorners: false,
+    simplifyQuadraticCorners: false,
     keepExtremes: true,
     keepCorners: true,
     keepInflections: false,
@@ -121,7 +123,7 @@ for (let prop in settingsDefaults) {
     let isArray = Array.isArray(val)
 
     if (isBoolean) val = false
-    else if (!isArray && isNum) val = val===1 ? 1 : (prop==='decimals'? -1 : 0);
+    else if (!isArray && isNum) val = val === 1 ? 1 : (prop === 'decimals' ? -1 : 0);
     else if (isArray) val = []
     settingsNull[prop] = val;
 }
@@ -153,10 +155,14 @@ export const presetSettings = {
         ...settingsDefaults,
         ...{
             keepSmaller: false,
+            convertPathLength:true,
             toRelative: true,
             toMixed: true,
             toShorthands: true,
             //fixHref: true,
+            allowMeta:true,
+            allowDataAtts:true,
+            allowAriaAtts:true,
             legacyHref: true,
             addViewBox: true,
             addDimensions: true,
@@ -224,19 +230,23 @@ export const presetSettings = {
     high: {
         ...settingsDefaults,
         ...{
-            tolerance: 1.2,
+            tolerance: 1.1,
             toMixed: true,
             refineExtremes: true,
             simplifyCorners: true,
+            simplifyQuadraticCorners: true,
+            removeOrphanSubpaths: true,
             simplifyRound: true,
             removeClassNames: true,
             cubicToArc: true,
+            minifyD: 0,
             removeComments: true,
             removeHidden: true,
-            removeOffCanvas: true,
             addViewBox: true,
             removeDimensions: true,
-            minifyD: 0
+            removeOffCanvas: true,
+            /*
+            */
         }
     }
 

package/src/svg-getAttributes.js

@@ -1,12 +1,14 @@
 import { normalizeUnits } from "./svgii/convert_units";
 
 export function getElementAtts(el, {x=0, y=0, width=0, height=0}={}){
-    let attributes = [...el.attributes];
+    //let attributes = [...el.attributes];
+    let attributes = [...el.attributes].map(att=>att.name);
 
     let atts={};
     attributes.forEach(att=>{
-        let value = normalizeUnits(att.nodeValue, {x, y, width, height});   
-        atts[att.name] = value
+        //let value = normalizeUnits(att.nodeValue, {x, y, width, height});   
+        let value = normalizeUnits(el.getAttribute(att), {x, y, width, height});   
+        atts[att] = value
     })
 
     return atts

package/src/svgii/convert_units.js

@@ -94,7 +94,7 @@ export function normalizeUnits(value = null, {
                 scale = height / 100;
             }
             else {
-                scale = normalizedDiagonal ? scaleRoot / 100 : 1;
+                scale = normalizedDiagonal ? scaleRoot / 100 :  width / 100;
             }
             break;