I have made an svg image that I am using as a background image. I does not work in IE8 and below (as expected), and I thought I could use something use like: http://twostepmedia.co.uk/svgeezy/ or http://code.google.com/p/svgweb/. However, none of these support SVG as a background-image/background, only IMG and Object etc.
Code:
background:url('img/bck_hero.svg');
How can I get an SVG as the background in IE8/7 or have a fallback image? Is there a javascript library that could do this?
Thanks a lot,
Harley
One way is to detect support for svg with javascript and then style differently depending on that.
If you use modernizr you could do it like this in your stylesheet:
#myElm.svg { background:url('img/bck_hero.svg'); }
#myElm.no-svg { background:url('img/bck_hero.png'); }
Related
I want to use svg as file and use it in css and I have to change it's color when I hover it.
I can create this very simple with mask-image css property
.icon {
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
}
But this method is not working in ie (any versions)
https://developer.mozilla.org/tr/docs/Web/CSS/mask-image
I don't want to use svg as code, It's not looking good.
Is there any way to use svg like this?
Ps: I know I can add it as img element in html and a bit js can handle this img to edit svg color but I want to use it as background-image.
You could convert the svg into a font and then use the font on the .icon element.
Then you could just change the color attribute.
First time posting here, so treat me gently. :)
I have an SVG image on my site which has a transparent background -
<img class="img-responsive center-block" src="images/pritchservices.svg" alt="Pritch Services Logo" />
Works beautifully on my site. However, due to the transparency, when that image loads in google image search results, due to the transparency, looks terrible.
I have an alternative image (using for fb Open Graph crawler) which is here -
Pritch Services Full Logo
In my crazy mind, this is what I had as a plan:
Redo the SVG in Illustrator to include the background color (as per the fb OPen Graph image) - this would then mean the image result in Google would be as expected
Have some CSS within my site to set the background color of the SVG to transparent, so it displays nicely (as it currently does on the site)
I am assuming I can't just put the SVG markup inline, as although this would give me what I wanted on the page, it wouldn't load the image AT ALL on google image search results?
Is this the way to go, if so, any suggestions on how to implement please; or is there an alternative solution I haven't thought of? Or am I just being too picky?!
Thanks in advance everyone...
You can't include an SVG via <img> and style it with CSS in your parent document.
You can't style the contents of an <img>, even if it is an SVG
CSS doesn't apply across document boundaries
You have a few options.
Include the version with a background in your page. And then hide it and replace it with the transparent-background version via CSS.
<div class="logo">
<img src="logo-with-background.svg" ... />
</div>
.logo img {
display: none;
}
.logo {
background-image: url(logo-without-background.svg);
}
Include the background version using <object> then use the DOM to find the background element and hide it.
var object = document.getElementById("myObject");
var svgDoc = myObject.contentDocument;
svgDoc.getElementById("bg").setAttribute("display", "none");
Apply a clipping path to the backgrounded version as #Obink suggests. It would work, but it is not the easiest solution though. And it won't work on older browsers that don't support clip paths.
I was working on a blur effect That is used in icloud.com website. i have found the blur effect but there was something that i didn't see before.
those were some background properties:
This Background Property Was Used For Blurring:
background-image: -webkit-canvas(blurredDerivativeForButtonsc2094_at_28px);
What Is This "-webkit-canvas" ? how it Works?
And This is For making A gradient Background:
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAQACAIAAAAP+8yGAAACoklEQVR4Xu3dwQ0CMQxEUTtKvbRCC3RqjtwR3g3WSwP/MDOObaIlH89XdJ4VzQcAACBiZzcgMvs1AAAAAFCu3WiR3YCYcKMBACh2AKopgFJBA7Xoo4Fip1TQAEAtkmQASXZlalsAJLk/aC59AICdSQNJ7ge4DwRN0ORAbypociAHgsamliHWmlwkB7oKnZ0caH7lQA40v3LApmqRHPiBAsBCSvsOYCHFpuZkfZEcsCmbsqn2/XSbchGAHLApm3q9D6Cz07YAaB19oZWLaCAHbHoiwBf52BRADtiUTb1KAJAD384B8Gkbzx4APOyWAwAjlKCx6eQky4GgyYGgCZocAAiapSCAoLkPJBnA03QASZZkGgAoFVpHczKAWmQIVIsAAOxNARQ7AAB9kUEcQLn+/gCopgAAbjQ3Gg1cOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANV8aAAAAADwi7Pr/5+DVt2tAQAAgGK3I6oZUANEBgDQtigVACFoYQBhUwBBEzQAORA0NmVTOWBTADYlMptyEQCbEhnAOzsALjpPA88e6rJ3FUTmIi7Sm3IRF3ERkS1miaxUEFmpILJSURN6UyIT2QhlALHxIjKRiUxk+yKTPpGJbNInMpEN4sMARAawDBG06SIL2goi21UIGpFpcJlNjbFENuEQmQY0MGUaQEyZRBY0QRM0U6YpkwZEFjTrHFMmDTS/RCayKdOUacoUNH+4I2hENmX2AIhMZGMskWlgjCUyke2LNF5EJjINiExkGy8bL8uQCSIbxIlspcZFJn0iE1mpsEogsjGWi7iIi4jMRVzERfamAJaC52sAwEUANl5sCsCmXGRG89e6bEoDOWBTADmQAwBBk4MRAABJFjQAAIBqPvdrAPAGv7GBbaSCtb0AAAAASUVORK5CYII=");
And What is This Loooooooong Code For Background?
That looooooooong code for the background is a base64 encoded image, it's a way of embedding image data directly in the webpage.
The webkit-canvas is a webkit only tag, so it only supports chrome and safari. There isn't that much point in learning browser specific CSS as a beginner.
Usually the browser renders the svg images properly but in chrome the browser doesn't detects the css3 scale and return a poor image. This must be because css scale is a new technology... Is there any way to select the render quality?
Sorry for my english, I'm studying it!
There are a couple of workarounds for this, none as easy as setting a render quality directive, I'm afraid. The most straightforward workaround would be inserting the actual SVG instead of using it inside an img tag.
Your html would look like...
<svg>
...
</svg>
And your css would look like...
svg {
-webkit-transform: scale(2);
}
Here is a demo: http://jsfiddle.net/EgsGe/
I have it set up in css to have the background an image slightly bigger than the content section so as to have a shadow behind it that repeats in the y direction but in IE it doesn't show the transparency. I have used google to try to solve this problem with no luck having done the image in css.
CSS:
#shadow{
width:854;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image:url(shadow.png);
background-repeat:repeat-y;
}
HTML:
<div id="shadow">
</div>
Any help is greatly appreciated as I at a total loss on this.
If it's possible, you make the png a gif, and everyone is happy.
If that isn't possible, the approach I use is the IE only css behavior.
With a behavior you can link to an htc file, like the one found here: http://www.twinhelix.com/css/iepngfix/
You would then have to add CSS like:
behavior: url(iepngfix.htc)
IE7 supports png transparency.
You could use something like a browser gate (which is an ugly hack) if you'd like to support IE6.
Use selectors in your CSS which IE<7 doesn't support:
html>body #transparent_png {
background: url(gfx/transparent_png.png);
background-repeat: no-repeat;
}
#transparent_png {
/* additional properties here */
}
the html>body #transparent_png style is ignored by IE6. Then, we use the ugly DXImageTransform-filter in a seperate .css file to display the png in IE6 transparently.
But this css should only be loaded if the ie version is less than 7:
html header:
<!--[if lt IE 7]>
<style type="text/css" media="screen, projection">
#import "iefixes.css";
</style>
<![endif]-->
The iefixes.css contains something like this :
#transparent_png {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png');
}
Unfortunately, this filter does not support repeat-x or repeat-y. But with this gate hack, you could display an ugly dithered gif shadow for IE 6 instead of the nicer png shadow :).
But, there is also a sizingMethod property for the DXImageTransform-filter (see http://msdn.microsoft.com/en-us/library/ms532920%28VS.85%29.aspx), so you could scale the image to the size of its container element:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png',sizingMethod='scale');
A very nice png fix for IE6 can be found here
I used it and can assure u it works.
It is JS though, but most people have it turned on lately
All the above may work, especially the alpha image loader which is good, vut if you plan on using it and want to rely on it in the future then you are better using another technique.
The best I have found is:DD_belatedPNG.js
it works likke a treeat and is very easy to use.
The problem I have with the others is that there are bugs when you want to use links appearing over the top of the bg. They dont work, without further hacks.