Add css to svg with inkscape - css

I use Inkscape for creating svg images and want to know how to use not embedded css rules.
For example
draw rectangle
in XML-editor add class attribute as
class="rect1"
to svg:rect object
How to add css like
.rect1 {
fill:#ffef00;
}


Here's an example of an SVG in an HTML page that you can style with CSS:
HTML page
<div id="mySvg">
<svg>
<use xlink:href="images/logo.svg#shape" />
</svg>
</div>
The SVG (located at images/logo.svg)
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
</svg>
The CSS
svg {
fill: currentColor;
}
#mySvg {
color: green;
}
See working example: plunker
Notes
If you use Inkscape to create your SVG, you'll probably have to do some hand-editing of the SVG to make it styleable with CSS.
Make sure the SVG code doesn't have any fill attributes in it (fill should be in the CSS). When making an SVG with Inkscape, it often has a fill:none or something. You'll have to manually remove those.
When using Inkscape, save files as "Optimized SVG" as described here.

Related

Clear an already set "fill" property in CSS to get defaults back for an SVG

I'm using a platform that within it's own CSS it sets the fill property as so:
.tatsu-svg-icon-custom svg * {
fill: currentColor;
}
This ends up with an SVG I am adding being black in this instance - which is not helpful. This particular SVG is a multi-colored SVG and handles all the fill properties itself within the code of the SVG.
Obviously if I change this property to aother color, it colors the whole SVG that color - so that is not helpful either.
So my question is, how do I get the defaults back so it doesn't apply any color to it? Setting it to initial makes the SVG transparent.

The keyword that would help in this situation is revert-layer. Unfortunately, it is currently only implemented in Firefox (>= 97).
(This example will seem to work even for other browsers. But that is because for them, it is an invalid keyword.)
.tatsu-svg-icon-custom svg * {
fill: revert-layer;
}
<div class="tatsu-svg-icon-custom">
<svg width="100" viewBox="0 0 20 20">
<circle r="5" cx="5" cy="5" fill="yellow" />
<circle r="5" cx="5" cy="15" fill="blue" />
<circle r="5" cx="15" cy="5" fill="red" />
<circle r="5" cx="15" cy="15" fill="green" />
</svg>
</div>

Embedding SVG in HTML [duplicate]

This question already has an answer here:
How do you style a external svg with css
(1 answer)
Closed 4 years ago.
I'm trying to understand something very basic about using SVGs in HTML:
I know all about the different methods: as <img>, as inline, and as <object>. But regarding the latter, I just can't figure how SVG properties are then controlled.
I'd like to change the fill colour, for instance. I can do it by editing the .svg file itself. But can I also do it from my CSS stylesheet? I'm assuming that adding <style> tags in the .svg file is probably not the recommended solution.

Use fill instead background-color to style background color
and stroke instead border
Learn here:https://www.w3schools.com/html/html5_svg.asp
For example
svg circle{
fill:red;
stroke:pink;
}
svg path{
fill:red;
}
<p>Shape</p>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"/>
</svg>
<p>with Path:</p>
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>

Fill external imported svg file

I'm using Angular 5 and i would fill my white svg image.
I have a svg file like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>ic_calendar</title><g id="Level_2" data-name="Level 2"><g id="screen"><path d="M18.5,5.11a2.55,2.55,0,0,0-.58-1.68,2.27,2.27,0,0,0-1.7-.71H14.85v-1a.68.68,0,1,0-1.35,0v1H6.39v-1A.67.67,0,0,0,5.72,1,.68.68,0,0,0,5,1.68v1H3.75A2.15,2.15,0,0,0,1.5,5.09V16.4a2.71,2.71,0,0,0,.69,2A2.08,2.08,0,0,0,3.7,19H16.34a2.14,2.14,0,0,0,2.15-2.26C18.51,15.07,18.5,5.57,18.5,5.11Zm-15.65,0h0c0-.71.27-1,.9-1H5v1a.69.69,0,0,0,.68.68.68.68,0,0,0,.67-.68v-1H13.5v1a.68.68,0,1,0,1.35,0v-1H16.2a1,1,0,0,1,.71.26,1.17,1.17,0,0,1,.24.72V6.84H2.85Zm14.3,11.64c0,.78-.52.9-.81.91H3.7a.73.73,0,0,1-.56-.2,1.49,1.49,0,0,1-.29-1V8.2h14.3Z" style="fill:#fff"/><rect width="20" height="20" style="fill:none"/></g></g></svg>
So, i'm importing it through this code:
<svg class="myClass">
<use xlink:href="assetFolder/ic_calendar.svg#Level_2"></use>
</svg>
However, i can't change the svg image style and i can't fill it.
I tried, via sass, to add the following:
svg { fill: blue; }
or
path { fill: blue; }
But nothing...
Can anyone help me?
Thanks

Presentation attributes svg have the highest priority and can not
be changed with thecss. Therefore, they need to be removed if you
want to change the color of the svg objects from the external table
CSS
When using the <use> command, svg objects fall into the shadow DOM
In order to stylize these objects, you must use forced inheritance
path {
fill:inherit;
stroke:inherit;
}
Below is an example where objects are called from the <defs> section with the use command and stylized from the external table css
path {
fill:inherit;
stroke:inherit;
}
#screen {
fill:dodgerblue;
}
rect {fill:#D5D5D5;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>ic_calendar</title>
<defs>
<g id="screen">
<rect id="rect1" width="20" height="20" />
<path d="M18.5,5.11a2.55,2.55,0,0,0-.58-1.68,2.27,2.27,0,0,0-1.7-.71H14.85v-1a.68.68,0,1,0-1.35,0v1H6.39v-1A.67.67,0,0,0,5.72,1,.68.68,0,0,0,5,1.68v1H3.75A2.15,2.15,0,0,0,1.5,5.09V16.4a2.71,2.71,0,0,0,.69,2A2.08,2.08,0,0,0,3.7,19H16.34a2.14,2.14,0,0,0,2.15-2.26C18.51,15.07,18.5,5.57,18.5,5.11Zm-15.65,0h0c0-.71.27-1,.9-1H5v1a.69.69,0,0,0,.68.68.68.68,0,0,0,.67-.68v-1H13.5v1a.68.68,0,1,0,1.35,0v-1H16.2a1,1,0,0,1,.71.26,1.17,1.17,0,0,1,.24.72V6.84H2.85Zm14.3,11.64c0,.78-.52.9-.81.91H3.7a.73.73,0,0,1-.56-.2,1.49,1.49,0,0,1-.29-1V8.2h14.3Z" />
</g>
</defs>
<use xlink:href="#screen" />
</svg>

You have an inline style on your svg path - style="fill:#fff". Inline styles take precedence over styles in a CSS stylesheet. But thats what !important is for!
either update your style to this:
path { fill: blue !important; }
OR simply remove the inline styling.

A CSS animation of a SVG Images 'fill' property not working in Safari

I'm trying to create a CSS animation for the fill color of a specific part of a SVG image. For that I'm using keyframes and an 'id' to link the animation and the SVG rectangle. You can see a working example here:
http://jsbin.com/deyaqo/3/
This works for most of the browsers except Safari (and maybe IE, I don't know). I'm not sure if this is because of my implementation or due to the lack of support from this vendor.
Thanks for your time !

You could use the animate element instead.
<svg id="logo" x="0" y="0" width="150" viewBox="12.304 3.974 74.952 22.051" enable-background="new 12.304 3.974 74.952 22.051">
<rect id="laukia"
x="56.74"
y="23.094"
width="17.895"
height="2.932"
fill="black" />
<animate xlink:href="#laukia"
attributeType="XML"
attributeName="fill"
from="red" to="rosybrown"
values="red; blue; green; teal; saddlebrown; peru; plum; rosybrown"
repeatCount="indefinite"
dur="5s" />
</svg>

Change in CSS the background-color for the first rect in my #ID

I generate a SVG in a GWT application and I want to modify the first rect background-color inside my SVG in CSS.
Here the code:
<svg id="chart8" width="720" height="350" style="overflow: hidden;">
<defs id="defs">...</defs>
<rect x="0" y="0" width="720" height="350" stroke="none" stroke-width="0" fill="#ffffff">
<g>...</g>
<g><rect .../></g>
<g>...</g>
</svg>
So i want to modify in CSS the fill value only for the first rect element for #chart8.
I tested this but it's not working:
#chart8 rect:first-of-type {
fill: #F1F1F1;*/
}
Have you an idea?
Thanks!

Resources