CODEWITHSUNDEEP
csssvg
Wolf War
Wolf War

Reputation: 1563

svg icon + css zoom = bluriness

I have svg icons, divs with svg background image.
When using css zoom (on document) icons get blurry.
This is how it looks (enlarged in image editing app)

enter image description here

I tried making it img element with different image-rendering properties, nothing helps

Is there any way to improve quality when document is zoomed?

EDIT:
class for my icons is (set in css file): 

.fav {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
}

In JavaScript I'm setting background image (based on other data): 

favIco.style.backgroundImage = 'url(img/icon.svg)';

CSS zoom is applied to one of the parents in hierarchy: 

root.style.zoom = zoom + '%';

Upvotes: 1

Views: 868

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

If you scale something that is 2px high by 130%, you are going to get something that is 2.6px high. The browser will render that as two black pixels and one 60% grey pixel. That's called anti-aliasing.

The best you can do is to open the SVG file and add shape-rendering="crispEdges" to the element or elements that you want to disable antialiasing on.

See: How to render svg elements with crisp edges while still keeping anti-aliasing?

But rather than improving quality, you may find that you get other artifacts that are even more undesirable to you than the antialiasing.

Upvotes: 2

Gerard
Gerard

Reputation: 15786

Hard to tell what's wrong without seeing any actual code. But this demonstrates it's not impossible to have a few bars that stay crisp no matter how far you zoom in. Is there some code you can share in a snippet?

i {
  zoom: 5000%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-bars" aria-hidden="true"></i>

Upvotes: 1

Related Questions