Skip to content

Commit

Permalink
new plugin converting some basic shapes to path
Browse files Browse the repository at this point in the history
  • Loading branch information
Lev Solntsev committed Nov 29, 2013
1 parent c7968c0 commit 389368c
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 0 deletions.
1 change: 1 addition & 0 deletions .svgo.yml
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ plugins:
- cleanupEnableBackground
- removeHiddenElems
- removeEmptyText
- convertShapeToPath
- moveElemsAttrsToGroup
- moveGroupAttrsToElems
- collapseGroups
Expand Down
102 changes: 102 additions & 0 deletions plugins/convertShapeToPath.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
'use strict';

exports.type = 'perItem';

exports.active = true;

var empty = { value: 0 },
regSeparator = /\s+,?\s*|,\s*/;

/**
* Converts basic shape to more compact path.
* It also allows further optimizations like
* combining paths with similar attributes.
*
* @see http://www.w3.org/TR/SVG/shapes.html
*
* @param {Object} item current iteration item
* @param {Object} params plugin params
* @return {Boolean} if false, item will be filtered out
*
* @author Lev Solntsev
*/
exports.fn = function(item, params) {

if (
item.isElem('rect') &&
item.hasAttr('width') &&
item.hasAttr('height') &&
!item.hasAttr('rx') &&
!item.hasAttr('ry')
) {

var x = +(item.attr('x') || empty).value,
y = +(item.attr('y') || empty).value,
width = +item.attr('width').value,
height = +item.attr('height').value;

// Values like '100%' compute to NaN, thus running after
// cleanupNumericValues when 'px' units has already been removed.
// TODO: Calculate sizes from % and non-px units if possible.
if (isNaN(x - y + width - height)) return;

var pathData =
'M' + x + ' ' + y +
'H' + (x + width) +
'V' + (y + height) +
'H' + x +
'z';

item.addAttr({
name: 'd',
value: pathData,
prefix: '',
local: 'd'
});

['x', 'y', 'width', 'height'].forEach(function(attr){ item.removeAttr(attr) });
item.elem = item.local = 'path';

} else if (item.isElem('line')) {

var x1 = +(item.attr('x1') || empty).value,
y1 = +(item.attr('y1') || empty).value,
x2 = +(item.attr('x2') || empty).value,
y2 = +(item.attr('y2') || empty).value;
if (isNaN(x1 - y1 + x2 - y2)) return;

item.addAttr({
name: 'd',
value: 'M' + x1 + ' ' + y1 + 'L' + x2 + ' ' + y2,
prefix: '',
local: 'd'
});

['x1', 'y1', 'x2', 'y2'].forEach(function(attr){ item.removeAttr(attr) });
item.elem = item.local = 'path';

} else if ((
item.isElem('polyline') ||
item.isElem('polygon')
) &&
item.hasAttr('points')
) {

var coords = item.attr('points').value.split(regSeparator);
if (coords.length < 4) return false;

item.addAttr({
name: 'd',
value: 'M' + coords.slice(0,2).join(' ') +
'L' + coords.slice(2).join(' ') +
(item.isElem('polygon') ? 'z' : ''),
prefix: '',
local: 'd'
});

item.removeAttr('points');
item.elem = item.local = 'path';

}

};
25 changes: 25 additions & 0 deletions test/plugins/convertShapeToPath.01.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions test/plugins/convertShapeToPath.02.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions test/plugins/convertShapeToPath.03.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 389368c

Please sign in to comment.