我有一个 16x16 的位图，并且想要创建一个 SVG，其中包含 16x16 的正方形以及图像像素的颜色。有没有简单的方法来实现这一点？
我目前的想法是使用 Python 和 PIL 读取位图图像并动态创建具有相应对象的 SVG 图像文件。但这感觉有点笨拙，就像重新发明轮子一样。
有没有更好的方法来做到这一点？
【问题讨论】：
如果您不需要输出为 SVG，我建议您使用 HTML5 Canvas，您可以在其中对图像客户端的像素进行采样（在上下文中使用 getImageData()），然后绘制自己的 -缩放图像。或者，如果您需要 SVG，您仍然可以使用 Canvas 进行图像采样，然后在 SVG 中为每个像素使用程序创建的 <rect/> 元素。
我已经写了an example using just HTML Canvas，以便您了解如何执行此操作。简而言之：
function drawPixelated(img,context,zoom,x,y){
if (!zoom) zoom=4; if (!x) x=0; if (!y) y=0;
if (!img.id) img.id = "__img"+(drawPixelated.lastImageId++);
var idata = drawPixelated.idataById[img.id];
if (!idata){
var ctx = document.createElement('canvas').getContext('2d');
ctx.width = img.width;
ctx.height = img.height;
ctx.drawImage(img,0,0);
idata = drawPixelated.idataById[img.id] = ctx.getImageData(0,0,img.width,img.height).data;
}
for (var x2=0;x2<img.width;++x2){
for (var y2=0;y2<img.height;++y2){
var i=(y2*img.width+x2)*4;
var r=idata[i ];
var g=idata[i+1];
var b=idata[i+2];
var a=idata[i+3];
context.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
context.fillRect(x+x2*zoom, y+y2*zoom, zoom, zoom);
}
}
};
drawPixelated.idataById={};
drawPixelated.lastImageId=0;
如果您真的需要 SVG，我很乐意编写一个动态生成的示例。
编辑：好的，我创建an SVG version 只是为了好玩和练习。 :)
顺便说一句（从最初对您的问题的误读）this demo file from ASVG3 他们的旧SVG Examples Page 展示了如何使用许多不同效果的一些复杂合成来在任意矢量数据上创建像素化。不幸的是，该演示无法在 Chrome 中加载，因为硬连线需要（现已停产）Adobe SVG Viewer。
【讨论】：