I'm working with SVG sprites to create an icon system. I'm using gulp-svg-sprites to generate the sprites and am using the symbol option so when calling each SVG, I can use something as simple as:
<svg class="icon"><use xlink:href="sprite/svg/symbols.svg#icon-alert"></use></svg>
With fill: currentColor I'm able to also control the color of each icon, which again, is great.
The issue comes when I need to use these icons as a background element. I'm aware that you cannot use xlink:href to grab a specific icon from the sprite -- and am okay just grabbing the individual SVG when needed here, but the issue comes when I need to change the fill/color of that SVG that is referenced as a background image.
Things like -webkit-background-clip: text; work great for applying a different background and cutting off based on the text, but I need a solid color overlay that can be switched out on demand.
Is there a simple SVG filter I can attach onto this background (referenced as an SVG) that I can bolt-onto this? Would appreciate any help. Thanks!
Update
Here is a working example. BUT, I'm looking for something that could also work in IE9, which is why I was hoping for something else.
Wrote an article using a LESS function I wrote that edits the SVG object once its pulled in with LESS http://zslabs.com/articles/svg-background-fill
You can apply a filter to change the color of the entire element (including the background) - but in most cases you cannot selectively apply it to just the background as you want to. If you had an exact example online with the exact cases you're trying to cover - there may be some very specific solutions for your exact case (eg. if your foreground is all black-stroked, then a color matrix filter could possibly work.))
Related
I want to set background on my website like the one one tailwindcss.com. How can I accomplish this?
Tailwind Website
Still wondering how is this implemented.
Having inspected the Tailwind website for you, it appears they use a simple JPG image as the header background. Since it's not SVG, I can't know how it was made.
Another way to do this, a different approach to #Gugalcrom123's, is to use a css gradient.
Method 1. You can use a website such as this:
https://cssgradient.io/ to come up with the gradient and set that as a background. The website also generates you the code you can use to set it as the background, as well as a regular color fallback in case your browser does not support it. This is where Tailwind probably decided to use method 2.
Method 2. You can use GIMP, Photoshop or some similar drawing tool to draw a gradient, and put it as an image. You can also use Filter: blur() on the img in css to blur it with pixels or even use your drawing tool to blur it out! To make the grid, you can do a similar thing, except after drawing the grid, put it behind the gradient layer and set the gradient layer's opacity to something lower than 100%, so the grid shows behind it.
You can blur it using a filter: blur(10px); on CSS... But be careful, it might make your site slow.
Also, have a look at SVG FILTERS here: https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
1) I know I can use a font icon using , pseudo selectors (before, after) and "content", but it is not a scalable solution, because I need to make many changes to padding, left, top etc in different situations
2) Using Data URI an svg is ok, but I need to change the fill/color of the svg
based on different actions. I tried the fill property but it is not really working.
I can change/edit the color external but I have a lot of variations and again doesn't scale
The icon fonts(ex: FontAwesome) come with SVG files for the browsers. It is possible to use somehow that file in css (like image sprites) ?
If you want to modify properties of SVG's it will have to be placed inline. So using an SVG as a background and modifying properties won't work.
Libraries like FontAwesome give you a font, not svg's which you can't set as a background either.
I don't see the problem of using the psuedo-selectors :before and :after for this. They are very scalable in my opinion.
If you really want to do it differently you should share some of your code with us so we can get a better understanding of what you're trying to do.
I'm designing a website which uses a SVG-document as background. I want this image to tile on the X-axis. Which works great, but I wanted to know if it is possible to show one group in the SVG only once, such that in subsequent tiles the group is hidden.
The above image visualizes what I want to achieve. The image having one group (in the image the red circle) that is invisible in the following tiles.
Now I am aware such things can be achieved using additional CSS backgrounds but I am really interested if such thing could be achieved using a single SVG background.
Thanks in advance!
The answer is no. If you are relying on CSS to tile the background - ie. with repeat-x, then no. there isn't any way to do what you want. When an SVG is used as a background like that, it becomes immutable - effectively the same as a PNG or a JPEG.
You will need to use a different method.
Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.
But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).
What is the best solution for this case? Using png or drawing it by css?
Is there a tool/website to convert my png to css code?
Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.
Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE
I think it's much better to use converted images because browsers load them faster.
I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.
Rather than CSS, I would suggest SVG is the appropriate tools for this job.
SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.
The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.
The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.
So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.
Maybe u could use this: https://javier.xyz/img2css/, the principle is to use box-shadow,it's fine if the picture is small, so u should consider performance
I'm building an interactive website for a touchscreen, which runs the latest version of Google Chrome. The user has to tap on, in this case, a series of buildings to get more information about it. The idea is to absolute position hyperlinks and place them on top of the buildings, which are combined in a single background image. But as you can see below, the problem is that some hyperlinks overlap. The chance that the user taps on the wrong building without knowing, is quite large.
Because I already have the vector masks of each building, I thought it would be a good idea to not use hyperlinks, but use SVG files instead. SVG files support a tag called xlink, which you can use to make a vector object linkable. The clickable area which links to another file is not a square anymore, but has the same shape as the vector mask. So just like I did with the hyperlinks, I placed them on top of the buildings. This works fine in Firefox, but not in Chrome nor Safari! Apparently there's a bug in Webkit (bugs.webkit.org/show_bug.cgi?id=22986) which causes the browser to always show a white background and which neglects the shape of the vector object, so it's rendered as a square object.
Screenshot: Overlapping hyperlinks and Webkti SVG Bug
Normally the opacity of the SVG embed would be set to zero, but to show you what's going wrong I've set it to 1.
Using Firefox instead is not an option. And the area-tag in HTML takes too much time. So I'm stuck. Does anyone know another solution for this particular problem?
You need to transform masks to <path>s
Create <a><path/></a> after all svg code (strict condition for Safari!)
Set <path>s opacity and fill-opacity to 0
Don't forget <a> target attribute