I am working on an infographic with sliding carousel <li>s, but the SVG is showing up pixelated in Firefox, even though the bug with SVGs in FF has been resolved, I thought. Can anyone see a fix for this?
URL: http://weaver-wp.weavertest.com/radiation-infographic/
You are zooming your SVG file to a very large size:
background-size: 9730px 30000px;
background-position: -7310px -29250px;
Most browsers will not antialias very large SVG shapes, as it requires too much graphics memory. (This is what we see in Safari and Chrome.) It looks like Firefox is actually rendering the SVG to the size of the canvas and then blowing it up with image interpolation to your cropped region.
The fix for both is the same:
Crop your SVG first and use just the cropped portion as a background.
Use the viewbox property of the element when panning/zoooming. It is much higher performance and simpler to use.
Related
I have converted a badge/image from PNG to SVG in order to be able to re-use the asset in various sizes etc.
The problem is that depending on the specific webpage i'm embedding the SVG on, it either looks super crisp (as intended) or looks bad with some sort of anti-aliasing gone horribly wrong.
Even on the pages where the SVG looks crisp after load, I only have to scroll the page a bit until it looks horrible as well.
Please look at the screenshots below to see the exact difference on the BADGE (SVG):
It seems the browser only messes with the SVG right where the SVG meets the image behind it. The SVG is only slightly transparent in the gray center, so that should not be the cause of it.
I have tested in Chrome, Edge, Safari which all do the same thing.
Does anybody know what might be the cause of this?
I found a fix to what clearly seems to be a somehow undiscovered big bug in all modern browsers in regards to handling SVG through CSS as a background on an element overlapping another element with background/image.
The fix for my case was simply adding a background-color to the element. Since the element is completely round I can simply make a border-radius as well, so the background will never appear.
If the element however was not a complete round circle, this would not be a workable fix.
Is there any way to stop Chrome and Firefox from applying anti-aliasing to an .svg image? It doesn't matter if the image is scaled up or down, or kept at its original size, it always occurs. This is fine for large images but for small icons, the anti-aliasing is really obvious and makes the image look blurry.
I have tried various different values of the image-rendering css property. I believe image-rendering: crisp-edges is the one I need but this is not properly supported yet and has no effect.
The edges of the shape above should be straight black with no anti-aliasing.
Add shape-rendering="crispEdges" to the shapes. You can do this via CSS too e.g.
* {
shape-rendering: crispEdges;
}
It looks perfect in chrome and firefox, but the scaling in IE and Edge is terrible. The size is good but the image looks sharper, the actual image is 2 times bigger than the background size. Is there a way to fix it, I've tried several things I found on stackoverflow but nothing seems to work.
The problem is your relying on the browser to resize your images. Browsers have notoriously poor rendering when scaling images. You should use a specific size and pre-format them in a graphic package beforehand.
I would also consider using an SVG for what you are trying to achieve (I assume the scaled down image is so that on different resolutions, things still look good?) I would seriously consider the flexibility it would give you.
I am trying to mask dynamically sized images on a webpage. The SVG mask I use for Chrome and Safari with their webkit-mask-box-image work great by resizing the mask to fit the element I'm using which in this case is an image. Is there any thing that is similar to webkit-mask-box-image for Gecko-baised browsers?
Have you seen this html5rocks article? http://www.html5rocks.com/en/tutorials/masking/adobe/
Regardless, I think the best cross-browser solution for masks is canvas.
This is very strange. I am using SVG images, because of the low file size, sharp rendering, and scalability ( the objects animate quite a bit ). Its working perfect in FF, ie9, Safari and iPad, but in chrome certain SVG images are rendering very poorly.
Any ideas why this might be happening? The svg files themselves are very small.
Here is some a sample svg
So anyway, this is a legit chrome bug. And there is a fix, make the svg 'larger', svg files that internally report as too small cause this bug.
After many researches, I finally found a working fix:
export the svg twice the needed dimensions (I therefore named it filename#2x.svg)
then in css, add transform: scale(0.5)
The result in Chrome will look the same as in Firefox.
I've run into this bug too with an element wit an SVG background. The workaround was to reduce the opacity by .01, i.e.:
.thing {
background: url('my-image.svg');
opacity: 0.99;
}
None of the workarounds (opacity: 0.99, transform: scale(0.5), …) worked for me, so I went with this instead:
PNG#2x (twice the size PNG)
This seems to work well in all browsers.
The problem is as the graphic becomes smaller there are less pixels to work with. When rendering the SVG the browser is using equations to determine pixels but the equations result in numbers that fall in between pixels.
It seems the solution is to set the desired size of your SVG in your editing program and then make certain all of your pixels align to the grid. This will still allow your SVG to scale up but will also allow it to render at the smaller size.
Credits to: https://salferrarello.com/svg-looks-pixelated-when-small/#:~:text=Solution,render%20at%20the%20smaller%20size.