How can I see the icons inside the SVG file? - html

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

Related

<svg> is larger than <use>

I need to import svg from sprite by <use> tag so svg and use were the same size (use was as large as parent svg tag).
<svg>
<use xlink:href="#facebook-hover"></use>
</svg>
I have no idea what exactly causes that size difference, and how could I fix it.
Here is my demo, for those who would like to help me:
svg {
width: 200px;
height: 200px;
position: relative;
}
use {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<svg width="0" height="0" class="hidden">
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 44 44" id="facebook-hover">
<title>ThirdParty/Facebook/2xpng1. Liquorice</title>
<defs>
<polygon id="path-1" points="0.001 0 40 0 40 40 0.001 40"></polygon>
</defs>
<g id="ThirdParty/Facebook/1.-Liquorice" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3" transform="translate(2.000000, 2.000000)">
<g id="Clip-2"></g>
<path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88" mask="url(#mask-2)"></path>
</g>
</g>
</symbol>
</svg>
<svg>
<use xlink:href="#facebook-hover"></use>
</svg>

As I've commented: use a viewBox for the second svg. Try <svg viewBox="0 0 40 40"><use ...
Also: in css you are forcing both evg elements to a 200px / 200px size. You can add width="200" instead.
Also: the css roules for use are pointless.
Also: you are putting a useless polygon inside a useless <defs> inside the symbol. You can delete the defs.
More: The path is wrapped inside lots of groups. There is an empty group too. The path is masked by an inexistent mask-2.
I've removed the useless groups and the mask attribute. Please take a look:
<svg width="0" height="0" class="hidden">
<symbol id="facebook-hover">
<title>ThirdParty/Facebook/2xpng1. Liquorice</title>
<path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88"></path>
</symbol>
</svg>
<svg viewBox="0 0 40 40" width="200">
<use xlink:href="#facebook-hover"></use>
</svg>

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

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

Hyperlink SVG <use> tags

I am unable to hyperlink an icon using a <use> tag. I created an SVG icon system and saved it on an external source (https://css-tricks.com/lodge/svg/16-svg-icon-system-external-source/). I have attempted a couple of options and had no success.
HTML Code:
<svg class="icon-LinkedIn">
<use xlink:href="symbol-defs.svg#icon-LinkedIn">
<a href='https://www.linkedin.com/'></a>
</use>
</svg>
Attempts:
1.
<a href='https://www.linkedin.com/'>
<use xlink:href="symbol-defs.svg#icon-LinkedIn">
</use>
</a>
</svg>
2.
<use xlink:href="symbol-defs.svg#icon-LinkedIn"
xlink:href='https://www.linkedin.com/'>
</use>
</svg>
3.
<svg class="icon-LinkedIn">
<use xlink:href="symbol-defs.svg#icon-LinkedIn"
xlink:href='https://www.linkedin.com/'>
</use>
</svg>
SVG:
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-LinkedIn" viewBox="0 0 32 32">
<title>LinkedIn</title>
<path class="path1" d="M16 32c-8.837 0-16-7.163-16-16s7.163-16 16- 16c8.837 0 16 7.163 16 16s-7.163 16-16 16zM16 30.080c7.776 0 14.080-6.304 14.080-14.080s-6.304-14.080-14.080-14.080c-7.776 0-14.080 6.304-14.080 14.080s6.304 14.080 14.080 14.080zM8.96 12.876v9.306h3.014v-9.306h-3.014zM10.665 8.32c-1.031 0-1.705 0.695-1.705 1.607 0 0.894 0.654 1.608 1.666 1.608h0.019c1.051 0 1.706-0.715 1.706-1.608-0.020-0.912-0.655-1.607-1.686-1.607zM19.569 12.876c-1.6 0-2.317 0.903-2.717 1.537v-1.318h-3.015c0.040 0.873 0 9.306 0 9.306h3.015v-5.197c0-0.278 0.020-0.556 0.099-0.755 0.218-0.556 0.714-1.131 1.547-1.131 1.091 0 1.527 0.853 1.527 2.104v4.979h3.014l0-5.336c0-2.858-1.487-4.189-3.471-4.189z"></path>
</symbol>
</defs>
</svg>

Try this:
<a href='https://www.linkedin.com/'>
<svg class="icon-LinkedIn">
<use xlink:href="symbol-defs.svg#icon-LinkedIn">
</use>
</svg>
</a>
wrap anchor tag on svg
jsFiddle

svg: change fill color using css

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 ?