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>
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);"/>
Following example given:
http://jsfiddle.net/fKy2r/
How can I remove the whitespace between the div's border and the checkbox?
Also, as seen in the example, color changes with css are possible if using svg directly in html. When following code is used:
<object class="svg" type="image/svg+xml" data="checkbox.svg"></object>
Color changes are no longer possible with the external css file. IS there a chance to make it work?
You have to change the viewBox attribute of the svg element, try with 80 80 350 350, it's not perfect because the path doesn't use integer coordinates, you'd better redraw the path using non-fractional coordinates.
If you include the image via the object element, it's loaded in a way that the CSS can't affect its content.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Changing SVG image color with javascript
I'd like to change the fill of an SVG image when I hover over it.
Right now I have a black question mark exported from Illustrator to SVG.
I can put on my page with the img tag and it displays fine, however I have no idea how to change the color in code.
If you need to do hover effects in svg you shouldn't use <img> tags. Instead reference the svg with an <iframe>, <object> or <embed> tag. If you want to save a http GET request you can put the svg markup inline in the html document.
Here's an example showing a simple fill hover effect inside an svg, and another one (slightly more complex that creates an outline on hover using a filter). Anyway, it's basically about applying a :hover CSS rule to set the fill color.
An example with all of the above ways of using svg can be seen here.
SVG Files can be modified directly from javascript, i.e. properties of the "image" are accessible from within the DOM.
Look at this post from stack overflow: modify stroke and fill of svg image with javascript
It's important to remember that to do so, you cannot enclose the svg file in the common HTML <img/> tag, use instead the <svg>...</svg> as shown in the post.
EDIT: svg on w3schools
I added a link to w3schools so you can see more properties of the svg object
Have Fun
If you can post your code, maybe we can troubleshoot it for you.
Try following this: http://tutorials.jenkov.com/svg/svg-and-css.html
Alternatively (not exclusive to SVG), use this type of code with different images:
<img src="image1.svg"
onmouseover="this.src='image2.svg'"
onmouseout="this.src='image1.svg'">
Live demo: http://jsfiddle.net/JNChw/
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>
I have the following requirement:
A large image contains several 'hotspots' that need to link to other pages. Sounds simple. I have created a simple html page, a div with the background image and absolute positioned links using CSS with image sprite rollovers.
However, I have now been presented with another image and the hotspots are not square, but irregular shapes. In one example they are similar to surfboards. Any ideas how I can get the links to respond to only the actual bounding box of the image. There are also instances where the 'hotspots' are parallelogram shaped and butted up next to each other.
Creating rectangular images in this instance just doesn't achieve the results required.
I think imagemaps might be a solution, but I want explore all alternatives first.
Hope this makes sense.
HTML image maps are the way to go - they support arbitrary polygons, and are well understood by screen readers and suchlike.
You might be able to do something clever with SVG in modern browsers, but it's not going to work for the IE6 crowd.
The alternative to HTML image maps are Css sprites as described in this a list apart article. Read the section under "irregular shapes".
It takes some work but the final HTML will be semantically more appealing (ie. to search engines) than with the standard image maps.
As suggested by Richie's answer, you can use links in SVG too. The trick is to properly mix SVG with xlink. A quick solution would look like this:
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<a xlink:href="https://stackoverflow.com/">
<polygon points="200,10 250,190 160,210" style="fill:blue;stroke:black;stroke-width:2" />
</a>
</svg>
If you click anywhere on the polygon, you will be directed to the stackoverflow main page. Clicking anywhere else will do nothing.