I have a project where I want to put simple graphic backgrounds into table cells. background-image and a small svg file works great!
But I would really like to keep the source all in one file. That is, I would like to be able to define the image in the HEAD, and refer to it in the inline STYLE css.
I have tried various combinations of ID attributes in the svg and hash references in a css url() function, but no success. This would seem to be a desirable thing to do, but looking around, I haven't seen a hint of an idea. Which tells me either it cannot be done, or it is done some other way...
Suggestions?
You can save your svg file elsewhere and put that up in an iframe.
<iframe src="index.svg" width="100%" height="100%" />
There might be other methods too..
Best tuts for svg is found MDN.
Actually after asking the question and thinking about it, I realized I had read the answer already. You need to use a a data url to create an in-line svg graphic. This you can give to the background-image property of a css class, as thus:
{background-image:url(
"data:image/svg+xml;utf8,\
...\
");}
The encoding utf8 will allow you to type in the code directly, escaping the new lines with backslashes and avoiding double quotes (as far as I know;-). Now you just set the CLASS of the TD and it works great!
Now all I have to do is figure out how to align the background on the bottom rather than the top...
This code might also work:
<svg>
<use xlink:href="..." />
</svg>
Related
I have some images with svg extension. I need to get those images in grayscale mode. Is it possible to do it only using css or whatever I can do with files or the <svg> tag itself? I don't want to use online tools for this convert, I need the pure styling "tools", like html css js. I have read that adding classes to <img> tag might be helpful. By the way, I need it in its original quality, so just making it gray-colored is the only objective.
Try this
<img src="img.svg" style="filter: grayscale(1);"/>
I have a text file from another system that I cannot change. I'd like to improve its appearance (e.g change the font family and font size) in an iFrame or Object but cannot find a way to apply CSS to the text.
<object id="warningsObject" type="text/plain" data="http://192.168.0.123/local/warnings.txt" style="width:400px; height:250px;">
Not supported
</object>
I've tried all the approaches I can imagine might work (put style statement in the object, in a div around the object, applied a class, set up CSS for the body & html etc). I can't get any of those to work.
Would prefer a solution without JQuery if possible ;)
Thank you.
I have seen a few websites that use the content attribute of a before/after pseudo element to set a picture as the content. The rule looks something like this:
:before {
content: "\e91b";
}
But then it is rendered as an image. I believe it is this setting because I can replace that escaped character with fooBar for instance and the image changes to that. And replacing the content will change it back. Changing the colour attribute changes the colour of the image so I'm guessing it is defined with some SVG data somewhere. These are obviously custom set characters because it will be set to the company's logo or other random things.
I'm honestly stumped on how this can be done and Google searching revealed nothing, though I'm not entirely sure what to search for. Everything I found referred to standard ISO characters that can be used in the escaped manner for easier typing/dev work.
Any help on this would be greatly appreciated.
It's called CSS pseudo elements, take a look at: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements.
I've been through hell and back trying to get an SVG colored directly through CSS without changing the properties in the actual file.
I am trying to fill an SVG in CSS with a new color but I don't get it to work.
Targeting the SVG element inside the object element seems to work with the CSS fill: red property in the Inspector of Google Chrome, but doing the same in code doesn't do anything.
The original SVG file doesn't have any fill properties.
If someone could tell me what I can do about this, it'd be awesome
Assuming you are using the contents of the SVG and not just as an image/object:
I've been through the same process you have, wasting many days trying to figure this out. Months later, I found out there's a simple attribute you can place on the file to achieve this. I know you said you didn't want to change the file, so if you don't - you can use the dirty trick I did which is using javascript to take out the contents of the SVG, create a new div and place the contents inside of it.
If you can modify the file slightly, though, you can add:
fill="currentColor"
And then it will take the color of its ancestor.
<svg ...>
<path fill="currentColor" ... />
</svg>
can anyone explain to me what does (content: "\f01a"; ) on css means? and how to use it?
I'm having a problem locating this icons on my css file, I don't know were to find it, I've tried searching some solutions on google but it only makes my self confuse.
if only someone could explain it to me. Thanks.
It's mean: fa-arrow-circle-o-down. It's used with Font Awsome plugin for displaing "font-icons". For use it you must read the documentation.
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.
<< FOR MORE INFO >>
With the content command, css will write the text which is given into the html element.
The \f01a is a Unicode Symbol in Hexadecimal. I think you have to embed a given font, so the icons will be displayed.
content property sets text to the element. It works with pseudo selectors only.
You can set any text.
It can be used to set icons.(icons but not images, using different fonts).
More info here.
These are content values for showing respective icons in your website.
You can use it like this,
.element:before {
content: "\f01a";
}