I am trying to color a part of a svg-file by css and that doesn't seem to work.
This is the svgs' code:
<svg xmlns="http://www.w3.org/2000/svg" data-name="logo" viewBox="0 0 87.6 128.2"><title> sw17_rebrand_logo</title><path class="logo_top" d="M15.6 86.9C-1.8 71-6.4 37.2 16 14.9S72-2.5 87.6 14.7Z"/><path class="logo_bottom" d="M72.3 41.2c20.2 19.2 19.5 53.7-1.5 73.2-22.5 21-55.4 16-70.9-1.1Z"/></svg>
And that's the css
.logo_top{
fill:blue;
}
The html looks like that
<img class="logo_img" src="images/sw17_rebrand-logo.svg"/>
But that doesn't do nothing. I don't even see that particular css-code in Webdev Tools. If I put the code (style="fill:blue") directly into the svg, this works, but that's not the way I need it here.
What am I doing wrong?
As both comments already answered that question 100% - I'll just sum that up to get the question closed:
a) You can either put the svg directly into html instead of linking with <img> to it. That way coloring with svg as in my question works smooth.
b) You manipulate your svgs' sourcecode a bit by appending that code
// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
to the file(s). That way you can still use <img src="the.svg"...
Related
I'm currently using clip-path on the image below. I stupidly didn't look at the browser support and found that it does not work in Edge or IE 11.
I'm wondering how or if possible I could create the below effect with just an SVG that will be supported in IE 11 and Edge.
I currently have been playing around with the below code but strugglign to understand how I can put a image over it like the image above.
<svg>
<path d="M0,60 L50,0 L420,0 A56,56 0 20,1 470,60z" fill="red" />
<a xlink:href="#">
<text x="410" y="37" font-size="18" font-weight="500" fill="yellow">Test</text>
</a>
</svg>
Really looking forward to your ideas.
Here is a rough idea (sorry for rough code as made it in a hurry) using pseudo elements ::before & ::after along with css3 transform and transition properties to achieve somewhat the result you are looking for. You can check it out and work around it if it helps. I checked it in FF and IE edge and 11 and 10 and it works well overall.
https://codepen.io/Nasir_T/pen/EvEMMG
Hope this helps gives your the idea or a work around the issue.
I'm trying to use a symbol from my defs.svg as a background image in CSS, as opposed to a direct path to an individual SVG file.
So instead of:
background: url(spoon.svg);
I want to do something like this:
background: url(defs.svg#spoon);
With #spoon being a symbol in defs.svg with id="spoon". Unfortunately, this isn't working for me. Has anyone come across a solution that doesn't involve custom JS/etc?
You'd need to define view and use tags inside your defs.svg so CSS would know where to look and what to show.
So, for example, say you have inside your SVG a symbol defined as this:
<symbol id="poop" viewBox="0 0 100 100">
<!-- Your shapes here -->
</symbol>
And before closing the svg tag, you must add the view and use defining tags:
<view id="poop-view" viewBox="0 0 100 100" /><!-- This ID used here is what you'll use in your CSS! -->
<use xlink:href="poop" width="100" height="100" x="0" y="0"></use>
Note that at this point, you can open your raw SVG file in a browser and it will show your drawing - before it showed blank!
And now you can set your SVG symbol in your CSS:
div{background-image:url("defs.svg#poop-view")} /* Remember, it's the ID used on your <view> def! */
Also, be sure your SVG includes a xmlns:xlink namespace on the opening tag, or it won't be supposed to work.
Disclaimer: I'm trying to use this setup at work hosting the SVG file on a server on my university, but for some reason this doesn't work (even SVG files won't show if <?xml>and <!DOCTYPE> tags are missing on the SVG), so be sure to check the sanity of your SVG file.
Find more about this on Jennifer Hiller's codepen blog.
The Problem
I have an object for my SVG which is wrapped in an anchor. The problem I face is that I want my SVG to have hover styles but I also need it to be clickable, hence the need for the anchor.
My Object:
<a href="http://mylink.co.uk">
<object data="mysvg.svg" type="image/svg+xml">
<span>Your browser doesn't support SVG images</span>
</object>
</a>
The problem is that the object is an element that has interaction and upon hover it was not registering the anchor. To combat this I tried:
object{
pointer-events: none;
}
This solved that issue and let the be the clickable element. The downside is now my objects hover styles don't work because technically the object is not longer the element I'm hovering.
Before the object...
I originally adopted the method of using the xlink method:
<a href="#" class="my-button">
<svg viewBox="0 0 297 149" class="my-icon">
<use xlink:href="svgsprite.svg#my-icon"></use>
</svg>
</a>
But I faced real issues getting the SVG parts to style consistently across browsers. Chrome in particular didn't like it.
Is there a way I can get the indivdual parts of my SVG styled via CSS, i.e. the fill colours and still use it in the way I'm trying to do by wrapping it within an anchor? Is there a newer (better) approach?
You can find a working example to demonstrate my problem a little better. Please find that here.
It's not exactly clear from your question what exactly you are trying to do (a test case would be useful).
But have you tried the approach of using an SVG <a> element, rather than an HTML one? Perhaps that will help you avoid the issues you are having.
<svg viewBox="0 0 297 149" class="my-icon">
<a xlink:href="http://mylink.co.uk" class="my-button">
<use xlink:href="svgsprite.svg#my-icon"></use>
</a>
</svg>
SVG inherits some styling properties from external <a> elements in slightly unexpected ways. That may be the source of your styling woes.
I have created SVG code from coreldraw and want to place it inline in my HTML5 document and have a couple of queries.
How universal is SVG now-a-days? Any suggestions on backwards compatibility?
I have taken out the style data from the svg and put that into my css, I guess that's not a problem - or is it? I also added a hover rule...
.Borderline {stroke:#0099FF;stroke-width:7.45541;stroke-linejoin:round}
.BorderFill1 {fill:#71C6FF}
.BorderFill2 {fill:#CBEAFF}
.BorderFill1:hover {fill: green; }
Can I remove any of the following data that is not needed. (but I want it to work and look the same)
<svg xmlns="http://www.w3.org/2000/svg" class="myimgleft" xml:space="preserve" width="100px" height="105px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 92 97" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="BorderFill1 Borderline" d="M55 51c10,0 18,0 24,0 4,-5 9,-10 9,-15 0,-6 0,-22 0,-32l-16 14c-5,-4 -8,-6 -17,-14l0 47z"/>
<path class="BorderFill2 Borderline" d="M79 51c-5,-1 -41,0 -47,0l0 -14c-8,8 -25,25 -28,28l28 28 0 -13c7,0 11,1 17,-2 6,-2 23,-21 30,-27z"/>
</g>
</svg>
Any other hints / tips that might be useful are very welcome.
1 MDN keeps an accurate list of compatibility per-element. Here's the list for SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
2 Keep the style in your SVG - it'll make it easier to swap out for other SVG images later. You want to be able to quickly update your svg. This one is more a matter of preference.
3 I wouldn't get in the habit of tweaking vector-art exported from CorelDraw by hand. You may think to run it through a minifier, but hand-tuning is almost certainly more work than it's worth.
Here's the first minifier Google gives me:
http://petercollingridge.appspot.com/svg-optimiser
For cases where you're not inlining, you can give .svgz (compressed svg) a shot, which will make it significantly smaller: https://graphicdesign.stackexchange.com/questions/24797/when-should-i-use-svg-or-svgz-for-my-web-graphics
4 Hmm, other tips - well good on you for using vector art on your site. Too many web devs/designers take the shortcut of doing everything in raster. While that gets you a nice looking image for a demo, in the long run it's really hurting your site. With ubiquitous tablets + phones, pinch + zoom is everywhere and your images need to scale nicely.
Personally, I've never loved the idea of inlining svg - I've always preferred saving as .svg and src-ing it like an image. I see why you are inlining it, though, as you're using some hovers.
I am trying to resize an svg to the exact size which I want it (32x32).
Look at the example at http://jsfiddle.net/Uy94k/6/
This fiddle is a short outtake of a larger .svg file which I include in my html file and refeer to which image I want using:
<svg class="small" viewBox="0 0 512 512" preserveAspectRatio="none">
<g filter="">
<use xlink:href="#login"></use>
</g>
</svg>
(Any easier way to do this by the way?).
As you can see, I've tried using preserveAspectRatio, but without luck. I've also tried different styling techniques (ie. sizing in span tags outside the svn, styling in the svn tags, fiddling with height both in and where I call it by id.).
If you use a developer tool to look at the height/width of the images in the fiddle, you will see that it is 26x20.. But why is that?
Tweeking the viewBox values (guessing the value of viewBox="120 70 340 340" in this case) kinda did the trick. But it is error prone, not nice, and tedious to tweek the parameters.. Look at the example at http://jsfiddle.net/veZSX/1/ for a tweeked vs untweeked version.
There must be a better way?