通过组合相同颜色的矩形像素来最小化SVG

Question

我有一个类似这样的SVG：

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" width="68" height="68" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
<rect x="14" y="24" width="1" height="1" fill="red" />
<rect x="14" y="24" width="1" height="1" fill="red" />
<rect x="14" y="24" width="1" height="1" fill="red" />
<rect x="14" y="24" width="1" height="1" fill="red" />
</svg>

我想把这个改成这个：

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" width="68" height="68" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
<rect x="14" y="24" width="1" height="4" fill="red" />
</svg>

有没有一种自动的方法来组合相同颜色的Rect并替换它们的宽度和高度？

Answer 1

您可以使用Jarek Foksa的pathData polyfill将所有<rect>元素转换为<path>元素，并组合它们的路径命令：

1. 搜索不同的填充颜色
2. 查询所有填充颜色
3. 将矩形转换为路径
4. 连接d属性

const svg = document.querySelector("svg");
function mergeByColors(svg) {
let els = svg.querySelectorAll("path, rect, circle, polygon, ellipse ");
// find colors
let colors = [];
let fills = [];
els.forEach(function(el, i) {
let fill = el.getAttribute("fill");
fills[fill] = [];
if (colors.indexOf(fill) == -1) {
colors.push(fill);
}
});
// loop through colors
for (let i = 0; i < colors.length; i++) {
let fillEls = svg.querySelectorAll('[fill="' + colors[i] + '"]');
let pathsCombinedData = "";
//convert primitives to paths via pathData normalizing
fillEls.forEach(function(el, i) {
let pathData = el.getPathData({
normalize: true
});
//remove shape
el.remove();
//concatenate path data
pathData.forEach(function(command, c) {
pathsCombinedData +=
" " + command["type"] + "" + command["values"].join(" ");
});
});
// append fill group path
let pathTmp = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
);
pathTmp.setAttribute("fill", colors[i]);
pathTmp.setAttribute("d", pathsCombinedData);
svg.appendChild(pathTmp);
}
}

svg {
display: inline-block;
width: 10em
}
path{
opacity:0.7
}

<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.3/path-data-polyfill.min.js"></script>
<p>
<button type="button" onclick="mergeByColors(svg)">Merge rects </button>
</p>
<svg version="1.1" viewBox="0 0 68 68" xmlns="http://www.w3.org/2000/svg">
<rect x="14" y="24" width="10" height="10" fill="red" />
<rect x="14" y="34" width="10" height="10" fill="red" />
<rect x="14" y="44" width="10" height="10" fill="red" />
<rect x="14" y="54" width="10" height="10" fill="red" />
<rect x="24" y="54" width="10" height="10" fill="red" />
<rect x="34" y="24" width="10" height="10" fill="blue" />
<rect x="34" y="34" width="10" height="10" fill="blue" />
</svg>

现在，每个填充颜色都有一个<path>元素
最终输出：

<svg version="1.1" viewBox="0 0 68 68" xmlns="http://www.w3.org/2000/svg">
<path fill="red" d=" M14 24 L24 24 L24 34 L14 34 L14 24 Z M14 34 L24 34 L24 44 L14 44 L14 34 Z M14 44 L24 44 L24 54 L14 54 L14 44 Z M14 54 L24 54 L24 64 L14 64 L14 54 Z M24 54 L34 54 L34 64 L24 64 L24 54 Z" />
<path fill="blue" d=" M34 24 L44 24 L44 34 L34 34 L34 24 Z M34 34 L44 34 L44 44 L34 44 L34 34 Z" />
</svg>