svg: change fill color using css - html

I have this svg file which I want to use with different colors
I have tried the following
<object type="image/svg+xml" width="100" height="100" data="todo.svg">
<span/>
</object>
(Not sure if OBJECT is the correct element for this)
Here is the content of todo.svg
<svg version="1.1" id="Layer_1" xmlns="..." x="0px" y="0px"
width="156px" height="141.6px" viewBox="0 0 156 141.6" enable-background="new 0 0 156 141.6" xml:space="preserve">
<g>
....
<g id="bar">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="..."/>
</g>
</g>
....
So in the css I tried to style this as follows
#bar path { fill: #444; }
Doesn't work :( Any suggestions how I can change this svg property using css ?

Related

How to display SVG with <use>

I am trying to use <use> tag to display an SVG. I am using Wordpress and have the file under the upload folder (as any other media). For some reason the <use> doesn't show, on the browser it show width and height as 0, even though I have inlined them in it.
My code:
<svg viewBox='0 0 153 91'>
<use href='https://example.com/wp-content/uploads/2021/04/arrow.svg' width='30' height='18'>
</svg>
In the Browser:
<svg viewBox="0 0 153 91">
<use href="https://example.com/wp-content/uploads/2021/04/arrow.svg" width="30" height="18">
</use>
</svg>
The svg file:
<svg fill="none" stroke="#fff" stroke-linecap="round" stroke-width="9.17" viewBox="0 0 153 91"><path d="m18.898 45.191h115.04"/><path d="m108.181 18.898 25.757 26.293-25.757 26.293"/></svg>
BONUS: Could the SVG be inlined somewhere in the <body> instead of the file uploaded?

This was missing on the SVG
xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
Final SVG should be:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
>
<symbol id="arrow" viewBox="0 0 153 91" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="9.17">
<path d="m18.898 45.191h115.04"/><path d="m108.181 18.898 25.757 26.293-25.757 26.293"/>
</symbol>
</svg>
src: SVG image tag not working

How can I see the icons inside the SVG file?

I want to see all the icons inside the SVG file. I have tried to insert it into the HTML file with an img tag but I see a blank page.
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-triangle-left" viewBox="0 0 20 20">
<title>triangle-left</title>
<path d="M14 5v10l-9-5 9-5z"></path>
</symbol>
<symbol id="icon-triangle-right" viewBox="0 0 20 20">
<title>triangle-right</title>
<path d="M15 10l-9 5v-10l9 5z"></path>
</symbol>
<symbol id="icon-check" viewBox="0 0 20 20">
<title>check</title>
<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
</symbol>
</defs>
</svg>

The code you provided contains only <symbols>. This is used to house SVG definitions that can be reused in different parts of the document. You would use them like this:
<svg>
<use xlink:href="#icon-triangle-left" />
</svg>
Live test: https://codepen.io/guilhermemuller/pen/NWqddGp

How change path and polyline in SVG?

I have two icons in svg.
Updated:
one
two
First of all, is it possible to make this icons using same markup?
For example:
<g>
<circle ... />
<path ... />
</g>?
Because i can operate only with classes. That mean that i want to change their styles in css and that why i want same markup for both icons.
Also i want remove cx="9" cy="9" from both icons, because this icon is part of the <rect /> and should be placed strictly on the verge of this <rect />. And this cx and cy move it sideways. If i just remove them, then icon become broken a bit. I need to change attributes of path and polyline also. How i can do it? Thank you

As for your re-use of SVG that part already has an answer here:
Inline SVG in CSS
You can do a lot with this using just CSS for example:
.firstxxx,
.secondxxx {
position: relative;
display: block;
top: -1.1em;
left: 6em;
}
.secondxxx circle{fill:blue;}
.containerthing {
height: 4em;
}
<div class="containerthing">1. One
<svg class="firstxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
</div>
<div class="containerthing">2. Two
<svg class="secondxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
</div>

I don't know why, but if you want to remove cx="9" cy="9", you can use transform: translate()
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" r="9" transform="translate(9, 9)"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>

You can position the shape where you want and reference the SVG through xlink:href in the shape's attributes definition along with a specific markup through the JointJS Devs plugin. E.g.:
joint.shapes.devs.Model.define('app.MyWindow', {
markup: `<image/><text/>`,
position: {
x: 100,
y: 100
},
size: {
width: 10,
height: 10
},
attrs: {
image: {
width: 8,
height: 8,
'xlink:href': 'assets/my_svg.svg'
},
}
});

SVG color hover - can't find any solution

For some days I've been trying to solve this, i just want to make a color change at hover on a SVG (with only CSS), I've found lots of tutorials (in and out of Stack) but none of them is working for me.
Can anyone tell me what can I do?
This is the SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
<path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
<path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>
I tried to associate the svg with an id="svgbutton", but I don't know if i should put it into "img src" in HTML or on the SVG code itself.
Anyway, i tried these two and it didn't work as #svgbutton {fill:red}
Can any pacient person explain this for me?
Thank you!
(and sorry for the bad english)

Using .st0:hover will allow you to change the fill when the white sections are hovered over directly:
body {
background: black;
}
.st0 {
fill: #FFFFFF;
}
.st0:hover {
fill: red;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
<path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
<path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>
However, you probably want it to change colour when the inner black section is hovered over as well. In this case, you're looking for svg:hover .st0:
body {
background: black;
}
.st0 {
fill: #FFFFFF;
}
svg:hover .st0 {
fill: red;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
<path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
<path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>
Hope this helps! :)

Accessing linked SVG element with CSS

I have this SVG included in my HTML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128.00456 127.33362" width="0" height="0" position="absolute">
<defs>
<pattern id="e" xlink:href="#b" patternTransform="matrix(1.006 0 0 1 288.184 313.89)"/>
<pattern id="b" xlink:href="#c" patternTransform="matrix(1.006 0 0 1 -.206 0)"/>
<pattern id="c" width="119.183" height="42.49" patternUnits="userSpaceOnUse" patternTransform="translate(288.338 309.89)">
<path fill="none" id="circle-top-fill" stroke="#000" stroke-width="3.971" stroke-miterlimit="1" d="M2.614 39.184A62.015 62.015 0 0 1 59.83 1.987a62.015 62.015 0 0 1 56.752 37.9" stroke-linecap="square" stroke-dasharray="0.99275, 0.99275"/>
</pattern>
<path fill="url(#e)" d="M288.39 313.89v40.173h119.693V313.89H288.39z" id="circle-top" transform="translate(-283.99 -313.89)" />
</defs>
</svg>
Then I use it in the page with
<svg class="circle">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#circle-top"/>
</svg>
Now I need to add different colors to it (eg. add class .circle--blue to .circle).
When I use
.circle--blue use #circle-top-fill {
stroke: blue;
}
it doesn't work. Apparently fill="url(#foo)" doesn't create shadow DOM.
Is there any way to access #circle-top-fill when needed?
TL;DR: I have inline SVG definitions in my HTML. Then I want to use it on several places on the page with different colors.
Edit: jsfiddle example