Add option to adjust the viewbox to match the width of the svg

index.html

@@ -46,9 +46,10 @@ <h1>Skiafy</h1>
         <br/>
         <span class="limitation">Works only with fill attributes & expects colors in form #FFF or #FFFFFF.</span>
       </label>
+      <label><input id="fix-viewbox" type="checkbox"> Translate and scale the viewbox to match the width of the svg</label><br/>
     </p>
     <p>
-      Translate (applies after flip):<br/>
+      Translate (applies after flip and scale):<br/>
       <input id="transform-x" placeholder="x"><br/>
       <input id="transform-y" placeholder="y">
     </p>

main.js

@@ -23,16 +23,18 @@ function ConvertInput() {
   var scaleX = $('flip-x').checked ? -1 : 1;
   var scaleY = $('flip-y').checked ? -1 : 1;
   var preserveFill = $('preserve-fill').checked;
+  var fixViewbox = $('fix-viewbox').checked;
 
   var input = $('user-input').value;
   $('svg-anchor').innerHTML = input;
   var output = '';
   var svgNode = $('svg-anchor').querySelector('svg');
 
   try {
-    output = ProcessSvg(svgNode, scaleX, scaleY, translateX, translateY, preserveFill);
+    output = ProcessSvg(svgNode, scaleX, scaleY, translateX, translateY, preserveFill, fixViewbox);
   } catch (e) {
     $('output-span').textContent = e.name + ": " + e.message;
+    console.log(e);
     return;
   }
 

run_tests.js

@@ -18,6 +18,7 @@ testCases = [
   { name: 'color_home', preserveFill: false, expected: 'home' },
   { name: 'implicit_lineto' },
   { name: 'implicit_r_lineto' },
+  { name: 'fix_viewbox', fixViewbox: true },
 ]
 
 function runTests() {
@@ -29,8 +30,10 @@ function runTests() {
       svgAnchor.innerHTML = testData[name].svg;
 
       var preserveFill = testCases[i].preserveFill || false;
+
+      var fixViewbox = testCases[i].fixViewbox || false;
 
-      var output = ProcessSvg(svgAnchor.querySelector('svg'), 1, 1, 0, 0, preserveFill);
+      var output = ProcessSvg(svgAnchor.querySelector('svg'), 1, 1, 0, 0, preserveFill, fixViewbox);
 
       var expected = testCases[i].expected || name;
       var expectedOutput = testData[expected]['expected'];

skiafy.js

@@ -323,14 +323,28 @@ function HandleNode(svgNode, scaleX, scaleY, translateX, translateY, preserveFil
   return output;
 }
 
-function ProcessSvg(svgNode, scaleX, scaleY, translateX, translateY, preserveFill) {
+function ProcessSvg(svgNode, scaleX, scaleY, translateX, translateY, preserveFill, fixViewbox) {
   var output = '';
   var canvasSize = svgNode.viewBox.baseVal.width;
   if (canvasSize == 0)
     canvasSize = svgNode.width.baseVal.value;
+
+  if (fixViewbox) {
+    var scaleFactor = svgNode.width.baseVal.value / svgNode.viewBox.baseVal.width;
+    canvasSize *= scaleFactor;
+    scaleX *= scaleFactor;
+    scaleY *= scaleFactor;
+    if (svgNode.viewBox.baseVal.y < 0) {
+      translateY -= svgNode.viewBox.baseVal.y * scaleFactor;
+    }   
+    if (svgNode.viewBox.baseVal.x < 0) {
+      translateX -= svgNode.viewBox.baseVal.x * scaleFactor;
+    }
+  }
+
   if (canvasSize != 48)
     output += 'CANVAS_DIMENSIONS, ' + canvasSize + ',\n';
-
+    
   output += HandleNode(svgNode, scaleX, scaleY, translateX, translateY, preserveFill);
   // Truncate final comma and newline.
   return output.slice(0, -2);

test_data.js

@@ -74,4 +74,19 @@ R_MOVE_TO, 1, 2,
 R_LINE_TO, 4, 3,
 R_LINE_TO, 1, 1,
 CLOSE`},
+
+'fix_viewbox': {
+svg:
+`
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z"/></svg>`,
+expected:
+`MOVE_TO, 18.9f, 35.7f,
+LINE_TO, 7.7f, 24.5f,
+R_LINE_TO, 2.15f, -2.15f,
+R_LINE_TO, 9.05f, 9.05f,
+R_LINE_TO, 19.2f, -19.2f,
+R_LINE_TO, 2.15f, 2.15f,
+R_LINE_TO, -21.35f, 21.35f,
+CLOSE`},
+
 };