SVG element rendering quality

Question

I have a SVG canvas which user can select and resize some <image> elements inside. And I use preserveAspectRatio="xMidYMid meet" attribute value to keep the original aspect ratio. The original image sources are mostly 256x256px size. On Firefox and IE-11, when I resize <image> elements to a smaller size than their original size, they look very pixelated. On Chrome they look pretty smooth. I wonder if there are any css or svg features which could help me to make them look smoother on Firefox and IE too.

Thank you.

EDIT: Adding sample..

https://jsfiddle.net/p8km6nhc/7/

<svg viewBox="-170 -87 1678 869" style="width: 100%; height: 100%; overflow: hidden; left: 0px; top: -0.800003px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="varlikItemShadow1">
            <feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
            <feOffset dy="1" dx="1"></feOffset>
            <feMerge>
                <feMergeNode></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g>
        <g transform="matrix(1,0,0,1,0,0)">
            <g transform="matrix(1,0,0,1,158,256)">
                <g title="" data-original-title="" data-rounded="yes">
                    <text style="font:0px arial;" x="0" y="1" stroke="none" transform="matrix(1,0,0,1,0,0)" fill="#ffffff" fill-opacity="0.111111">[[VarlikId=3999]]</text>
                    <rect filter="url(#varlikItemShadow1" stroke="#2b5987" stroke-width="2" fill-opacity="0.9" fill="#ffe8f6" ry="10" rx="10" y="0" x="0" height="140" width="1270"></rect>
                    <path d="M0 0 L 1268 0 1268 138 0 138Z" stroke="none" stroke-width="0" fill="none" fill-opacity="0" transform="matrix(1,0,0,1,0,0)"></path>
                    <image image-rendering="optimizeQuality" preserveAspectRatio="xMidYMid meet" x="14" y="14" width="1242px" height="66px" xlink:href="https://deviantshare.azurewebsites.net/img/test.png"></image>
                    <text style="font:32px arial;" x="0" y="30" stroke="none" transform="matrix(1,0,0,1,591,94)" fill="#2b5987">3. Kat</text>
                </g>
            </g>
        </g>
    </g>
</svg>

RESULT :

your sample refers to an image with a relative link - could you put the image somewhere it can be accessed? Or maybe inline it with something like http://duri.me/ — CupawnTae, Sep 10 '15 at 12:56
One correction i came across is; instead of stretching the image with `width` attribute to bring it to center, you can change `x` attribute like the following `x="600px" y="14" width="66px" height="66px"`. This is not an answer. — bprasanna, Sep 10 '15 at 13:58
It sounds like a bug, but a CSS one : on FF41&43, when `image-rendering` is set to `optimizequality`, it's actually the crisp-edges algo which is used, `` element doesn't seem to be affected by this css rule at all : [fiddle](https://jsfiddle.net/p8km6nhc/10/) — Kaiido, Sep 10 '15 at 14:24
@Kaiido I think the "image-rendering" attribute on a svg `` element and the "image-rendering" css property are two different things. There is a reference here on this [link](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/image-rendering) for svg, it says it can be applied to only `` elements. And on this [link](https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering) for css reference, it says the values used to be the same with svg reference, but they are changed with new ones later on... — Noldor, Sep 11 '15 at 06:10
Can't check right now, but I think that CSS rules should also apply to `` element. Anyway, svg's `image-rendering` property doesn't have any effect, which is a bug. [fiddle](https://jsfiddle.net/p8km6nhc/11/) — Kaiido, Sep 11 '15 at 13:45
hum that's it, from [mdn](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/image-rendering) "As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css image-rendering for further information" — Kaiido, Sep 11 '15 at 14:14

score 1 · Answer 1 · answered Sep 10 '15 at 15:36

As it clearly looks like an issue with Firefox and IE rendering, thought of trying a workaround to come over this.

Instead of using <image> element of SVG, tried using <img> tag of HTML and embedded it using <foreignObject> element of SVG.

Instead of :

<image image-rendering="optimizeQuality" preserveAspectRatio="xMidYMid meet" 
x="14" y="14" width="1242px" height="66px" 
xlink:href="https://deviantshare.azurewebsites.net/img/test.png"></image>

Used:

  <foreignObject x="600" y="14" width="100" height="100">
    <body>
      <img src="https://deviantshare.azurewebsites.net/img/test.png" 
       type="image/svg+xml" width="66px" height="66px">
    </body>
  </foreignObject>

But one pending issue is IE doesn't support foreignObject yet!

Codepen.io working example

I can not use ``... Just as you mentioned, IE doesn't support it unfortunately. If it was supported in IE, I would be able to use foreignobject for whole the content of the box shapes, since text alignment things are also a very big torture in svg.. — Noldor, Sep 11 '15 at 05:58
@Noldor, if all your pngraphics are like the one in the example, why don't you make them svg already ? You won't have any support or rendering problem, and it may even end in lighter file sizes. — Kaiido, Sep 11 '15 at 14:11

SVG element rendering quality

1 Answers1