Остановить автоматическое сглаживание изображения внутри SVGZ

Question

Я использую изображения SVGZ на страницах HTML для их изменения размера. Эти изображения SVGZ содержат PNG, которые были увеличены определенными способами, которые я хочу сохранить, пикселизацию и все. Firefox отображает это правильно (так, как я его разработал в Inkscape):

пока Chrome «услужливо» автоматически сглаживает все:

Я преподаю курс и пытаюсь показать, как данные изображения создаются в течение последовательных проходов. Я хочу пикселизацию, потому что это данные. Фактически, PNG внутри SVGZ содержат свойство style="image-rendering:optimizeSpeed". Я надеялся, что Chrome признает это и уважает это.

(Обратите внимание, что я уже попробовал трюк с CSS image-rendering: pixelated;. Я уверен, что он бы отлично работал, если бы я показывал PNG напрямую, но это не то, что я делаю.)

Answer 1

Я нашел ответ, основанный на том, что сказал Павел выше.

Похоже, что способ сделать это в Chrome - убедиться, что PNG внутри SVG / SVGZ имеет свойство style="image-rendering: pixelated", что имеет смысл. Однако

1. Это не работает с Firefox.
2. Это не вариант в Inkscape, поэтому, если вы хотите, вы должны отредактировать SVG-код вручную.

И Firefox, и Inkscape предпочитают style="image-rendering: optimizeSpeed". В итоге я добавил обоих в мой SVGZ-файл: style="image-rendering:optimizeSpeed;image-rendering:pixelated". Похоже, что это радует оба браузера, хотя опять же это означает изменение кода SVG файла изображения вручную, поскольку Inkscape не позволяет вам сделать это напрямую.

Я собираюсь добавить тег Inkscape, если смогу, так как эта программа, похоже, включает в себя столько же, сколько и все.

Answer 2

У меня работает в 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>