Add option to adjust the viewbox to match the width of the svg #43
Conversation
| @@ -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/> | |||
There was a problem hiding this comment.
Should I enable this checkbox by default? We usually don't get the right result if the width/height of the svg doesn't match the viewbox. If it matches, this checkbox is a no-op
There was a problem hiding this comment.
Only thing I'm worried about is how this breaks in cases we haven't considered like a non-square size, or unspecified size, or non-square viewbox. Therefore it might be safer to not check it by default.
Also can we update the text to
"""
Normalize viewbox and path coordinates to match the specified width of the SVG (assuming square dimensions).
"""
| if (canvasSize != 48) | ||
| output += 'CANVAS_DIMENSIONS, ' + canvasSize + ',\n'; | ||
|
|
||
| var output = ''; | ||
| var canvasSize = svgNode.viewBox.baseVal.width; | ||
| if (canvasSize == 0) | ||
| canvasSize = svgNode.width.baseVal.value; | ||
|
|
||
| if (fixViewbox) { |
There was a problem hiding this comment.
nit: document what's happening/what this is for
|
|
||
| var output = ProcessSvg(svgAnchor.querySelector('svg'), 1, 1, 0, 0, preserveFill); | ||
| var output = ProcessSvg(svgAnchor.querySelector('svg'), 1, 1, 0, 0, preserveFill, fixViewbox); |
There was a problem hiding this comment.
nit: maybe rather than fixViewbox everywhere it should be normalizeCoordinates? You're changing all the coordinates in the paths, not just the viewbox.
| 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; |
There was a problem hiding this comment.
what if there is no width specified?
| @@ -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/> | |||
There was a problem hiding this comment.
Only thing I'm worried about is how this breaks in cases we haven't considered like a non-square size, or unspecified size, or non-square viewbox. Therefore it might be safer to not check it by default.
Also can we update the text to
"""
Normalize viewbox and path coordinates to match the specified width of the SVG (assuming square dimensions).
"""
I added an option to automatically shift and translate icons which have a viewbox that doesn't start at 0,0 and doesn't match the width of the svg.