CODEWITHSUNDEEP
htmlcssimagesvgresponsive-design
deshg
deshg

Reputation: 1253

Why don't fluid background SVG files display correctly at all sizes?

I am currently trying to use svg files instead of images for modern browsers on a new fluid site. The idea is to use an SVG as a background image on a fluid div which can then be changed on hover and we can use modernizer (or similar) to fallback to the use of img backgrounds for unsupported browsers.

In theory this is all fine however on certain browsers (particularly Firefox) the right and bottom edges of the svgs have some strange pixelation at certain sizes which doesn't happen for imgs.

So if you view http://jsfiddle.net/deshg/xuq6812g/ you can see a grid of 4 x 25% columns each with a div or img (that is 100% width). Each one has either a div with svg or img background or an img element with the svg/img as the src. If you view this in FF and make it bigger/smaller you'll see at certain sizes the degradation i'm talking about. You can also see this in the image below (the areas circled in blue are the degraded bits which you can see occurs on the svg but not the img).

Can anyone shed some light on why this is happening and how to prevent it as it makes SVGs largely unusable in this way if it can't be fixed

SVG vs IMG Screenshot

CSS

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
.container {
    float: left;
    width: 25%;
    height: 100%;
}

.container img {
    width: 100%;
}

.container div {
    background-size: cover;
    width: 100%;
    padding-top: 100%;
}

HTML

<div class="container">
    BACKGROUND SVG:<br>
    <div style="background-image: url('https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg');">
    </div>
</div>

<div class="container">
    BACKGROUND IMG:<br>
    <div style="background-image: url('https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png');">
    </div>
</div>

<div class="container">
    SVG IN IMG TAG:<br>
    <img src="https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg" alt="">
</div>

<div class="container">
    IMG IN IMG TAG:<br>
    <img src="https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png" alt="">
</div>

Upvotes: 0

Views: 214

Answers (1)

Christina
Christina

Reputation: 34652

From working with vector images for years and years, when you crop them accurately, yet they need aliasing, then the crop looks odd -- flattened at the curves. So circles, text, logos, and so forth need some extra edge in the view box. Here I've add a lot more, but you get the idea.

DEMO with before and after: http://jsbin.com/buquw/1/edit

ORIGINAL -- cropped accurately, but too close, because this image needs aliasing. enter image description here

NEW VERSION -- you don't need this much, used to exaggerate the situation: enter image description here

Upvotes: 2

Related Questions