I have an SVG file which I display white normally, or red when the user hovers over it. This is made by having transparent areas of the image and using the following CSS & HTML:
a>img{background:#fff;width:32px;height:32px}
a:hover>img{background:#900}
<img src="blah.svg">
The problem is that I sporadically get very thin borders of white (or red) around the image. Different browsers/zoom levels/devices show different borders - sometimes none, sometimes some, sometimes all of them.
This would appear to suggest that the SVG file isn't quite "filling" the img tag.
I might assume that the problem is that the SVG isn't quite square, so it's not stretching perfectly to 32x32 pixels, but sometimes I get borders on all four sides, so it can't be that simple. (And indeed the SVG file has a viewbox of "0 0 195 195" and doesn't appear to have any points outside of that range.
It's worth noting that changing the dimensions to 39x39 pixels (a perfect divisor of 195) doesn't fix the issue, not that I expected it to, due to the vector nature of SVG.
Fiddle: http://jsfiddle.net/3wtazst8/1/
Any suggestions?
Thanks
I know this is over a year old, but I was having the same issue and considered Paul LeBeau's advice regarding extending outside the viewBox. Below is an example showing the issue and the fix.
Icons with background colors showing issue and showing fix
The badge icon does not show the bleed, while the medal icon does.
Side-by-side image of icons within viewBox and extended beyond viewBox
Viewing the left SVG in Illustrator, the background of the image goes to the very edge of the viewBox.
Viewing the right SVG in Illustrator, the background of the image extends beyond the edge of the viewBox.
Fixing your SVG so the background extends beyond viewBox will fix your issue.
Related
I am the absolute beginner in this subject.
When I have some object in GIMP and his background is transparent, may I automatically crop the object to minimal size/resolution?
I do this manually, that means I select the object, but this is not exact.
It is still a little different, but this unsatisfying me, because when I have this image with object on my website (example dog with transparent background, 150x150) and I have other image on my website (example cat with transparent background, 155x155) and I set some attributes him, but in one .class, because do setting #id each image is impossible.
See Layer>Autocrop layer and Image>Autocrop image.
Note that in both cases, Gimp removes lines of strictly identical pixels, and this includes their opacity. So if you have even one single pixel which is faintly opaque, the auto-cropping will stop on it. In particular, non-rectangular shapes with a smooth contour have edges made of partially opaque pixels, so you may mistakenly think that the autocrop has missed out some space. This won't be the case.
In GIMP 2.10.30 you do
Image -> Crop to content.
have some live computed graph images from a source we don't own, and they have a white background that doesn't fit well with where we are displaying them. Is there any html/css way of getting rid of the white background? (javascript isn't an option in this case)
I was looking at css masking - tried setting the mask-image to be the same image, and the mask mode to be luminance -
html:
<img src="https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048" >
css:
img {
mask-image: url(https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048);
mask-mode: luminance;
}
that seemed to me that it should work - but it actually had no effect at all :(
First of all you should know this: https://caniuse.com/#search=mask
And then look at this fiddle: https://jsfiddle.net/9y27jaLh/1/
As explained in caniuse, there's partial support for webkit i.e. prefixed properties will work such as -webkit-mask-**
mask-mode is not supported in 90% of the browsers, including webkit based.
Also "luminance" means the areas with the brighter colors will show while the darker ones won't, and a whole gradient of in-betweens. So it's pretty much the exact opposite of what you need.
If it's just to change the background color, you might slightly tint it, perhaps with a semi-transparent overlay. If the images have a known shape, you could try clipping / masking with SVG patterns..
or maybe try to hack it setting the images as background and searching for a background-blend-mode that does the trick... sort of.
But no way to apply the same image as a mask to get rid of the white
edit:
seems to be mac/chrome related problem, works fine on win/chrome, mac/safari, mac/firefox
http://jsbin.com/bezibu/1/edit?html,css,output
You can see a white border inside the cut out in browser.
closeup:
same thing in photoshop, no white border
closeup:
Any idea why is this happening and how to prevent it?
Whether it's as a background image or <img> doesn't seem to matter..
So the problem happens on retine-esque displays only. Solution is to double the size of the PNG and use background-size.
https://code.google.com/p/chromium/issues/detail?id=475227
my site consists of one div which consists of a background-image with background-size:100%. The container itself has a width of 100% and bottom padding of 10%. What I dont understand is why my svg gets converted to a non-vektor image. When scaled up it really looks horrible. I tried using non percentage values but that doesnt work either. preserveAspectRatio is irrelevant too.
Using the image inline as an img works perfectly but I want to animate the svg sprite background position.
I honestly need some advice. Is there a workaround`?
Go in illustrator and add a drop shadow made in photoshop. This way everything but the shadow will be an svg resulting in a hybrid svg file. Works perfectly ; )
What is the optimal way to slice up this background image for optimal CSS implementation? The designer knows no CSS and since we're not CSS experts, we're not sure of the best way to slice up the background image. The background, of course, should be fluid and scale to different monitor sizes and page lengths. At the same time, it seems sub-optimal to have one large image or multiple small images.
We don't need to support IE6.
Any advice?
By slicing, I'm not 100% sure what you want exactly. I assume you are looking for a way to stretch the Facebook part as much as needed, while still keeping the background image decent.
For most non-phone (ie desktop or tablet) screens, you could cut below the last cloud and have a repeat vertically of the blue sky background. With the CSS property background-repeat: http://www.w3schools.com/cssref/pr_background-repeat.asp
You'd have 3 divs with margin: 0:
the hmm panabee (actual content) div, background image is the balloons, centered. You expect its height to be greater than your image's height. If you want to enforce it, there's min-height. Bottom of this image should be blue sky.
the facebook div, can be as big as you want if you use the background-repeat with the blue sky image.
and the footer div, with a background image of your choice, but the top of the image should be blue sky.
I think all this (except min-height, maybe?) should work on most browsers, even IE6.
CSS3 supports multiple overlapping background images (you'd want them to be transparent PNGs or similar), as well as the background-size property allowing you to adapt to different window sizes. It seems to me this would solve your problem exactly.
Check here to see if a feature is widely-supported enough for your target audience.