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
Related
I have a bunch of svg paths (for icons) which work fine if they are placed directly in the html. But with so many, I want to put them into an external file instead. I cant use object or img as I am using css to style them. any ideas?
<!-- svg paths -->
<symbol viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="icon1">
<path d="..."></path>
</symbol>
<symbol viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="icon2">
<path d="..."></path>
</symbol>
<symbol viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="icon3">
<path d="..."></path>
</symbol>
<!-- html -->
<svg>
<use xlink:href="#icon1"></use>
</svg>
<svg>
<use xlink:href="#icon2"></use>
</svg>
<svg>
<use xlink:href="#icon3"></use>
</svg>
You can use the filename in front of the id reference. Like here I'm referring to the symbol s2 in the file symbols.svg:
<!DOCTYPE html>
<html>
<head>
<title>SVG symbol</title>
</head>
<body>
<h1>Test</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<use href="symbols.svg#s2" />
</svg>
</body>
</html>
Cann't find the way to make it works:
I marked up pathes of SVG inside symbols with classnames
In outer CSS I made styling rules for those pathes
SVG inserted in HTML using mark up
On hover event I want to change styling of path with current classname
<style>
body>svg{display:none}
.st2,.st2_1{fill:#b0b2b4}
svg:hover .st2_1{fill:#f47456}
</style>
<a href="#">
<svg clacc="ico_vk">
<use xlink:href="#ico_vk" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="ico_vk" viewBox="0 0 24 24">
<path class="st2" d="M20.9 10.51c0 .31-.24.57-.55.57s-.55-.25-.55-.57c0-.31.24-.57.55-.57s.55.26.55.57zm0 0"/>
<path class="st2" d="M20.38 8.29c.25 0 .45-.21.45-.47V5.96c0-.79-.62-1.43-1.38-1.43H4.36c-.41 0-.78.19-1.05.51a.8.8 0 00-.13.13c-.15.24-.23.51-.23.8V18.4c0 .79.62 1.43 1.38 1.43h15.09c.76 0 1.38-.64 1.38-1.43v-5.28c0-.26-.2-.47-.45-.47a.46.46 0 00-.45.47v5.28c0 .28-.22.5-.48.5H4.33c-.27 0-.48-.23-.48-.5V5.88c0-.04.02-.08.04-.12.01-.01.02-.01.03-.02.12-.15.37-.27.55-.27h14.98c.27 0 .48.22.48.5v1.86c0 .25.2.46.45.46z"/>
<path class="st2_1" d="M9.47 14.43c-.24-.48-.48-1.04-.72-1.68s-.47-1.34-.69-2.1h1.09c.05.19.1.39.16.61s.13.44.19.66.13.44.2.65c.07.21.13.4.2.57.06-.17.13-.36.19-.57s.14-.43.2-.65.13-.44.19-.66c.06-.22.12-.42.16-.61h1.06c-.22.76-.45 1.46-.69 2.1-.24.64-.48 1.2-.72 1.68h-.82zM13.3 12.01c.1-.11.21-.23.31-.36.11-.12.21-.25.31-.37l.29-.35c.09-.11.17-.2.23-.29h1.22c-.24.29-.48.57-.71.83-.23.27-.49.54-.76.82.14.13.28.28.43.46s.29.37.43.56c.14.19.26.38.38.57.11.19.21.37.29.53h-1.18c-.07-.13-.16-.26-.25-.41-.09-.15-.19-.3-.3-.45-.11-.15-.22-.3-.33-.44s-.23-.26-.35-.35v1.66h-1.03v-5.4l1.03-.17v3.16z"/>
</symbol>
</svg>
Example here https://codepen.io/sPoul/pen/oNLPrMg
Is it passable to make it works with CSS only?
So I find the answer by myself
body>svg{display:none}
.st2{fill:#b0b2b4}
use{color:#b0b2b4}
a:hover use{color:#f47456}
.st2_1{fill:currentColor}
<a href="#">
<svg clacc="ico_vk">
<use xlink:href="#ico_vk" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="ico_vk" viewBox="0 0 24 24">
<path class="st2" d="M20.9 10.51c0 .31-.24.57-.55.57s-.55-.25-.55-.57c0-.31.24-.57.55-.57s.55.26.55.57zm0 0"/>
<path class="st2" d="M20.38 8.29c.25 0 .45-.21.45-.47V5.96c0-.79-.62-1.43-1.38-1.43H4.36c-.41 0-.78.19-1.05.51a.8.8 0 00-.13.13c-.15.24-.23.51-.23.8V18.4c0 .79.62 1.43 1.38 1.43h15.09c.76 0 1.38-.64 1.38-1.43v-5.28c0-.26-.2-.47-.45-.47a.46.46 0 00-.45.47v5.28c0 .28-.22.5-.48.5H4.33c-.27 0-.48-.23-.48-.5V5.88c0-.04.02-.08.04-.12.01-.01.02-.01.03-.02.12-.15.37-.27.55-.27h14.98c.27 0 .48.22.48.5v1.86c0 .25.2.46.45.46z"/>
<path class="st2_1" d="M9.47 14.43c-.24-.48-.48-1.04-.72-1.68s-.47-1.34-.69-2.1h1.09c.05.19.1.39.16.61s.13.44.19.66.13.44.2.65c.07.21.13.4.2.57.06-.17.13-.36.19-.57s.14-.43.2-.65.13-.44.19-.66c.06-.22.12-.42.16-.61h1.06c-.22.76-.45 1.46-.69 2.1-.24.64-.48 1.2-.72 1.68h-.82zM13.3 12.01c.1-.11.21-.23.31-.36.11-.12.21-.25.31-.37l.29-.35c.09-.11.17-.2.23-.29h1.22c-.24.29-.48.57-.71.83-.23.27-.49.54-.76.82.14.13.28.28.43.46s.29.37.43.56c.14.19.26.38.38.57.11.19.21.37.29.53h-1.18c-.07-.13-.16-.26-.25-.41-.09-.15-.19-.3-.3-.45-.11-.15-.22-.3-.33-.44s-.23-.26-.35-.35v1.66h-1.03v-5.4l1.03-.17v3.16z"/>
</symbol>
</svg>
The solution for me is to pass color information through the CurrentColor variable and use the color property of the USE tag.
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
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
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 ?