-1

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.)

Adam Smith
  • 449
  • 9
  • 23
  • Okay, can someone please explain why this question is getting downvoted into negative territory? I'm really sick of asking honest questions on this site, investing the time to include source code and to be as clear as possible, and then getting shamed for it. – Adam Smith May 21 '18 at 22:51

2 Answers2

1

Works for me in Chrome:

<svg width="100" height="100">
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=" width="100px" height="100px"/>
</svg>


<svg width="100" height="100">
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=" width="100px" height="100px" style="image-rendering: pixelated"/>
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
0

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.

Adam Smith
  • 449
  • 9
  • 23
  • Addendum: no, it only mostly works. If I look at the SVGZ directly, it looks fine regardless of browser. But when the SVGZ is inside of an tag in the HTML document, it's still doing it wrong in Chrome. – Adam Smith May 06 '18 at 00:07