Tengo una imagen estilo pixelart que pretende escalar a 4x tamaño con SVG. Sin embargo, el siguiente código borra los píxeles de la imagen:¿Cómo puedo escalar un SVG <image> mientras mantengo píxeles completos?
<image x="0" y="0" width="1024" height="1024"
image-rendering="optimizeSpeed"
xlink:href="pixelart.bmp" />
¿Hay algún atributo que resolver esto?
Creo que image-rendering="optimizeSpeed" es lo más cercano que puede obtener. Como el estado the specs for that property, "debe usar un algoritmo de remuestreo que logre el objetivo de una representación rápida, con el requisito de que el algoritmo de remuestreo sea al menos tan bueno como el remuestreo del vecino más cercano". Como esta es la única sección de la especificación que menciona "vecino más cercano", no creo que tenga otra opción.
La única otra cosa relacionada que puedo encontrar es el IE9 property -ms-interpolation-mode:nearest-neighbor. Esto es (por supuesto) específico de IE, y aparece como una propiedad de CSS (por lo que posiblemente solo sea aplicable a HTML).
¿Qué sistema operativo/navegador/versión le proporciona píxeles interpolados como resultado de la ampliación con ese atributo?
Además, tenga en cuenta que puede utilizar una combinación de HTML5 Canvas y SVG para recrear a la perfección la imagen con una SVG <rect> por píxel:
http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml
que estoy experimentando en Google Chrome, con y sin ese atributo. En la actualidad, lo estoy pirateando al ampliar mi imagen en pintura de antemano – Eric
Ooh, se ve como 'image-rendering: -moz-crisp-edges;' también haría el truco. Ahora, ¿dónde está la propiedad de Chrome? – Eric
Aquí está la [respuesta stackoverflow] (http://stackoverflow.com/questions/3900436/image-scaling-by-css-is-there-a-webkit-alternative-for-moz-crisp-edges) sobre un equivalente para WebKit (en el momento de la respuesta, no había un equivalente). – Phrogz