Search code examples
htmlcsssvgsmoothinginkscape

Stop auto image smoothing inside an SVGZ

I'm using SVGZ images on HTML pages for their resizability. These SVGZ images contain PNGs that have been enlarged in specific ways that I want to preserve, pixelation and all. Firefox is displaying this correctly (the way I designed it in Inkscape):

enter image description here

while Chrome is "helpfully" autosmoothing everything:

enter image description here

I'm teaching a course, and I'm trying to show how image data is being created over successive passes. I want the pixelation, because that's what the data is. In fact, the PNGs inside the SVGZ contain the property style="image-rendering:optimizeSpeed". I was hoping that Chrome would recognize that and respect it.

(Please note that I've already tried the CSS image-rendering: pixelated; trick. I'm sure that would work perfectly well if I were showing PNGs directly, but that's not what I'm doing.)

Solution

  • I found an answer that builds on what Paul said above.

    It looks like the way to do this in Chrome is to make sure that the PNG inside the SVG/SVGZ has the property style="image-rendering: pixelated", which makes sense. However,

    1. This doesn't work with Firefox.
    2. This isn't an option within Inkscape, so if you want it you have to edit the SVG code manually.

    Both Firefox and Inkscape seem to prefer style="image-rendering: optimizeSpeed". So I ended up adding both to my SVGZ file: style="image-rendering:optimizeSpeed;image-rendering:pixelated". This seems to make both browsers happy, though again it means modifying the SVG code of the image file manually, since Inkscape doesn't let you do it directly.

    I'm going to add an Inkscape tag if I can, since this seems to involve that program as much as anything.