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.
Related
I'm trying out the SVG stacking technique to enable multiple icons stacked in a single file, requiring only a single HTTP request from the browser. The technique is described pretty thoroughly here.
Basically the idea is that you put multiple SVG elements into a single SVG file, and use CSS styling to hide all icons, except for the icon you currently want to display. You select the icon you currently want to display using the CSS :target selector.
The technique works for me, except stacking multiple icons causes weird distortions in the displayed icon, even though all other icons are hidden.
In the example I'm working with, I simplified this to stacking only two icons: an US flag icon and an UK flag icon.
The (simplified) SVG file is:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg153" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<svg:style
xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
.i { display: none; }
.i:target { display: block; }
</svg:style>
<svg:svg id="uk" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1">
<!-- SVG elements to draw UK flag -->
</svg:svg>
<svg:svg id="us" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1">
<!-- SVG elements to draw US flag -->
</svg:svg>
</svg>
Note that the CSS is embedded within the SVG file, in a <svg::style> element. The CSS is simply:
.i { display: none; }
.i:target { display: block; }
This way, any svg::svg element with class="i" is automatically invisible, unless we specifically target it in the SVG url. So this way, to display a US flag icon, I would use the following HTML snippet:
<img
src="flags.svg#us"
width="80"
height="60"
alt="SVG Stacked Image"
/>
And of course, to display the UK flag I would change it to src="flags.svg#uk"
Anyway, all of this works wonderfully... except for a strange image distortion which occurs in both Firefox and Chrome when I stack the images.
Here's a screenshot of the US flag when I remove the (hidden) UK flag from the SVG file:
As you can see, it looks fine.
But when I stack it in front of the UK flag, it looks like:
As you can see, the image becomes strangely distorted - it almost looks like what happens to a low-quality JPEG when you get a lot of "artifacts" in the compressed image.
So why exactly is this happening? The other images stacked with the US flag icon are all invisible, so why should they effect the visible icon at all?
I Googled around a lot looking for answers, and although there are definitely many issues and "gotchas" with the SVG stacking technique, they all relate to cross-browser compatibility. However, the technique works fine on most newer browsers up to and including IE9. Also, the distortion happens in both Firefox and Chrome, so this isn't likely to be some cross-browser issue, but rather something I'm doing wrong.
So, what is causing this weird distortion when I apply the SVG stacking technique?
No idea about stacking and target. But I know two simple methods.. may be those can help you out in an easier way.
When you have chosen different svg icons from net or even from computer but each icon is separate.
There is a website 'icomoon.io', where we can choose different icons from online libraries or your custom svg icons from your computer.
Open 'https://icomoon.io/app/'
Choose 'import icons' to upload custom icons from your computer.
At bottom of the page it has 'Add Icons From Library…' to choose icons from online libraries.
From 'select' tool (At Top) select multiple icons as you like.
After selecting multiple icons choose 'Generate SVG,PNG,PDF' button at bottom.
Then to combine all of them in a single file, click on 'settings icon' located just next to the 'Download' option in first button at bottom left.
Choose 'Include Tiles (CSS Sprite) from it.
Put appropriate margins and number of icons in a row as you like and then download the combine sprite with its xml code in demo.html and css definitions in style.css.
When you have already created single SVG file of multiple icons using 'AI' or any other software.
Just upload(import) that file to icomoon.io and click on 'Generate SVG,PNG,PDF' button and download the sprite xml file.
I tried with my own simple svgs and it works fine, no weird distortion happening. So my guess is it's your svgs for uk and us.
http://pastebin.com/dxVtTQKF
I've picked out a color that I want to use throughout my website - it's the color of the logo and of the header, among other things. In my case, it's #7ed321. I've created the logo and exported it as a PNG with the color profile stripped.
Problem is, the page looks completely different in Firefox, Safari, and Chrome - each are rendering the colors their own way.
Chrome, Safari, and Firefox, from top to bottom. That's the logo and a piece of the header below. They might look the same on your screen, but they sure don't on mine.
Chrome - renders both header and logo as native #7ed321 (sRGB #94C9D6).
Safari - renders both header and logo as native #54df16 (sRGB #7ed321), a much brighter green.
Firefox - renders logo as native #54df16 (sRGB #7ED321) and header as native #7ed321 (sRGB #94C9D6). So the colors don't even match.
Basically, Chrome realizes if I asked for #7ed321 in my PNG and my CSS, that I always want to see #7ed321 on my screen, so it does the necessary conversion to sRGB to match my monitor's color profile.
Safari assumes I provided both values in sRGB, so it does no conversion to my target monitor.
Firefox does no conversion for my logo but does convert my CSS-provided #7ed321 to sRGB #94c9d6.
As a result, the same page is looking inconsistent among browsers. The difference isn't significant, but I'd like to get them looking closer if I can. Is there anything I can do to my CSS/PNG to make the page look the same?
There is a way to ensure the logo and any other occurrences of the brand color in the code are the same. That is to use CSS to color any instance of the green.
Export the logo as just the white leaf with a transparent background. Then you can form the logo using CSS to create the circle and fill in the background color. For example:
HTML
<div class="logo"></div>
CSS
.logo {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background: #7ed321 url(../img/logo.png) center no-repeat;
}
Now the code has applied the green color, so it will match any other green you apply with CSS such as the header.
As for making all browsers and screens look the same - that's a bit of a losing battle. Users all use different screens and the color will be rendered differently. It would quite honestly be pointless spending any time trying to do anything about that.
An alternative to using CSS to build the logo like this would be to show the logo as a font. You can do that will a tool like Fontastic which allows you to then do resizing and cool CSS transitions on the logo if you wanted: http://fontastic.me/
If you have a vector version of the image you could use the svg format. With svg you can access the color hex codes for stokes and fills directly from the markup. But the problem probably has something to do with that some browsers can make use of your operating systems colour profile and others can't.
It's an ancient and crappy solution, but sometimes the best way to make sure that at least the two elements match is to color the box created with css with a 1 pixel png that you export with all the same color settings as the logo.
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.
I've googled a lot and I've just given up, so I'll turn to the experts out there to see if someone can help me in my quest.
I've got a logo converted to .SVG through illustrator.
My objective is to use that logo to clip (or mask if you prefer) an entire div so that just a small part of it shows through and you can see the background.
I decided to go the .SVG way since I want to create this website as a full scalable experience, and thus a .png would not work accurately from full HD resolutions to 1024x768.
So firstly I would like to know how to clip a Div and at the same time how to "inverse clip" so that instead of just showing that part of the div it would show everything but it.
I'll be eagerly awaiting your answers as I really need them...
Thank you in advance.
If I understood you correctly (and I'm not sure about that), you want to show 'everything in the background that fits the shape of your logo', is that correct? If though, what about 'inverting' your logo, making itself transparent and give the background a neutral color like black or white or something. Then you could put two divs upon each other, with the top being your Logo.
I created a fiddle to show you what I mean:
http://jsfiddle.net/ds82/R4rBH/2/
Der circle is the logo and it's transparent inside and outside the blue line and it's a svg. Hope that is what you want.
I don't think you are going to be able to do that. I once saw a plugin and a generator like this, though I think that that is probably not your best bet.
I would incorporate whatever text you wanted to clip in the svg which I'm sure is easier to do than finding a way for your html to interact properly with the svg.
Well since I couldn't do it through .svg I ended up just using a .png where everything is black and my Logo is transparent. Kind of sad that I couldn't find the answer though...
Basically what you want to do works only in Firefox at the moment. The way is to define the correct <mask> element in SVG and then apply it via CSS:
#content {
mask: url(remote.svg#logo-mask);
}
(or, if you embedded the SVG:)
#content {
mask: url(#logo-mask);
}
On one of my HTML pages there are some large images that are shown when I mouse hover over some links and it takes time to load those images.
I don't want to use JavaScript to preload images. Are there any good solutions?
HTML5 has a new way to do this, by link prefetching.
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
Just add as many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.
Note
Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch
UPDATE
If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.
Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
From http://snipplr.com/view/2122/css-image-preloader
A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad.
The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.
a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }
That's all, image used you can see below:
(source: margonem.pl)
Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".
This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/
A technique I didn't see mentioned here yet, which works great if you don't need to worry about IE6 & 7, is to use the :after pseudo-selector to add your images as content to an element on the page. Code below lifted from this article:
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
The only downside I can see to this compared to using JavaScript to preload the images is that there is no easy way to release them from memory.
You could use a hidden div to put images in. Like so
<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>
This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.
<link rel="preload" as="image" href="..." />
This works best for me when we want to load image early for CSS
(while rel="prefetch" will cause duplicate loading from CSS)
Reference your images in invisible img tags. while page loading they will downloaded too.
As I'm not sure if hidden images are loaded, you'll probably want to use image sprites. Then the entire image is loaded before anything is displayed. You can even put all of your menu items in one image and therefore save a lot of HTTP requests.
If preloading images is what you seek, then performance is what you want. I doubt blocking up the page while the resources load is what you want. SO, just place some prefetching links at the end of the body and add the bogus media to them to make them appear unimportant (so that they get loaded after everything else). Then, add the onload tag to those links, and in that onload will be the code that sets the source of the actual resource in your page. For example, this could even be used in conjunction with dynamic iframes.
Before:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
After:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
onload="myFrame.src=this.href" media="bogus" />
Notice how the first one (before) freezes up the page and blinks in a quite ugly manner while the second one (after) with the content preloaded doesn't freeze up the page or blink, rather it appears and disappears seamlessly instantly.
Can't you add them as an <img /> tag to your page and hide them using css?