Hyperlink SVG <use> tags - html
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
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
Classnamed path inside Symbol of SVG doesn't react on Hover statement of SVG USE
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.
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
Cleaner way to use HTML SVG elements?
I have several SVG elements that are under various HTML elements. As you can see in the example below they take up a lot of space and clutter the html. I'm wondering if anyone has any suggestions on the best way to clean this up. I could use partial HTML views for each SVG element, but that's a bit overboard and all I can think of. <div id="canvasControl" class="cnvsControl" hidden="hidden" style="height:36px; background-color:black; position:relative;margin-top:-36px;z-index:9999;opacity: 0.2;"> <div class="imageUpload canvasControlButton alignLeft" style="height:36px; position:relative;" title="Open File" id="btnOpenFile" name="btnOpenFile" onclick="snes_readfile(this)"> <label for="btnFileImport" style="position:absolute;top:5px;"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> <g id="icomoon-ignore"></g> <defs> <path id="openFolder1" d="M416 480l96-256h-416l-96 256zM64 192l-64 288v-416h144l64 64h208v64z"></path> </defs> <use fill="#fff" xlink:href="#openFolder1"></use> </svg> </label> <input id="btnFileImport" type="file" onchange="snes_readfile(this)" /> </div> <button class="canvasControlButton alignRight" title="Full screen" id="btnFullScreen" name="btnFullScreen"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> <g id="icomoon-ignore"></g> <defs> <path id="outFullArrow1" d="M512 0h-208l80 80-96 96 48 48 96-96 80 80z"></path> <path id="outFullArrow2" d="M512 512v-208l-80 80-96-96-48 48 96 96-80 80z"></path> <path id="outFullArrow3" d="M0 512h208l-80-80 96-96-48-48-96 96-80-80z"></path> <path id="outFullArrow4" d="M0 0v208l80-80 96 96 48-48-96-96 80-80z"></path> </defs> <use fill="#fff" xlink:href="#outFullArrow1"></use> <use fill="#fff" xlink:href="#outFullArrow2"></use> <use fill="#fff" xlink:href="#outFullArrow3"></use> <use fill="#fff" xlink:href="#outFullArrow4"></use> </svg> </button> <button class="canvasControlButton alignRight" title="Bigger Screen" id="btnChangeScreenSize" name="btnChangeScreenSize"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> <g id="icomoon-ignore"></g> <defs> <path id="outArrow1" d="M512 0v208l-80-80-96 96-48-48 96-96-80-80zM224 336l-96 96 80 80h-208v-208l80 80 96-96z"></path> </defs> <use fill="#fff" xlink:href="#outArrow1"></use> </svg> </button>
You can create a separate the SVG file and then link it to your HTML document like this: Create SVG files named one.svg : <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> <g id="icomoon-ignore"></g> <defs> <path id="openFolder1" d="M416 480l96-256h-416l-96 256zM64 192l-64 288v-416h144l64 64h208v64z"></path> </defs> <use fill="#fff" xlink:href="#openFolder1"></use> </svg> two.svg <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> <g id="icomoon-ignore"></g> <defs> <path id="outFullArrow1" d="M512 0h-208l80 80-96 96 48 48 96-96 80 80z"></path> <path id="outFullArrow2" d="M512 512v-208l-80 80-96-96-48 48 96 96-80 80z"></path> <path id="outFullArrow3" d="M0 512h208l-80-80 96-96-48-48-96 96-80-80z"></path> <path id="outFullArrow4" d="M0 0v208l80-80 96 96 48-48-96-96 80-80z"></path> </defs> <use fill="#fff" xlink:href="#outFullArrow1"></use> <use fill="#fff" xlink:href="#outFullArrow2"></use> <use fill="#fff" xlink:href="#outFullArrow3"></use> <use fill="#fff" xlink:href="#outFullArrow4"></use> </svg> three.svg <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> <g id="icomoon-ignore"></g> <defs> <path id="outArrow1" d="M512 0v208l-80-80-96 96-48-48 96-96-80-80zM224 336l-96 96 80 80h-208v-208l80 80 96-96z"></path> </defs> <use fill="#fff" xlink:href="#outArrow1"></use> </svg> Then edit your HTML to : <div id="canvasControl" class="cnvsControl" hidden="hidden" style="height:36px; background-color:black; position:relative;margin-top:-36px;z-index:9999;opacity: 0.2;"> <div class="imageUpload canvasControlButton alignLeft" style="height:36px; position:relative;" title="Open File" id="btnOpenFile" name="btnOpenFile" onclick="snes_readfile(this)"> <label for="btnFileImport" style="position:absolute;top:5px;"> <object> <embed scr="one.svg"> </object> </label> <input id="btnFileImport" type="file" onchange="snes_readfile(this)" /> </div> <button class="canvasControlButton alignRight" title="Full screen" id="btnFullScreen" name="btnFullScreen"> <object> <embed scr="two.svg"> </object> </button> <button class="canvasControlButton alignRight" title="Bigger Screen" id="btnChangeScreenSize" name="btnChangeScreenSize"> <object> <embed scr="three.svg"> </object> </button> Hope it helped and don't forget to validate the answer if it's resolve your issue.
How use multiple SVG with different size
I try to integrate SVG icon on my web site, don't they are a thing i don't understand.. I have download 2 SVG icons : Heart <svg width="0" height="0" viewBox="0 0 32 32" style="position:absolute;margin-left: -100%;"> <path id ="home-icon" d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962 c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59 c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507 h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/> </svg> Project <svg width="0" height="0" viewBox="0 0 64 64" style="position:absolute;margin-left: -100%;"> <g id="projects-icon"> <polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/> <polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/> <polygon points="18,12 10,20 14,20 22,12 "/> </g> </svg> But the Heart icon is drawed for 32x32 and Project for 64x64, so when I try to use both on my menu, i must specify the image size in the viewBox item: <nav id="top-menu"> <svg class="menu-icon" viewBox="0 0 32 32"> <use xlink:href="#heart-icon"> </svg> <svg class="menu-icon" viewBox="0 0 64 64"> <use xlink:href="#project-icon"> </svg> </nav> Exemple on jsfiddle : http://jsfiddle.net/Nh57e/ In this case, i can't loop on my HTML and i must set size on HTML each time I want use an image.. (And if I want change the SVG, i need update all the html source for the new size :/ ) How can i do for use image without set the icon size ?? Thank all !
One solution would be to reference the whole SVGs rather than just parts of them. In this version, we hide them in a hidden <div> rather than setting their sizes to zero: <div style="display:none"> <svg id="project-icon" viewBox="0 0 32 32"> <g> <polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/> <polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/> <polygon points="18,12 10,20 14,20 22,12 "/> </g> </svg> </div> I have taken out the width and height attributes here so that they default to 100%. Then reference them from mini-SVGs that have the exact width and height you want: <svg class="menu-icon" width="32px" height="32px"> <use xlink:href="#home-icon" /> </svg> Demo here Note. In your demo you had the viewBox sizes for the two SVGs back to front.
Another alternative is to use the symbol element. You can set a viewPort for each icon. And then reference them the same way you are currently.
<svg style="display: none;">
<symbol id="home-icon" viewBox="0 0 64 64">
<path d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</symbol>
<symbol id="project-icon" viewBox="0 0 32 32">
<g>
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</symbol>
</svg>
.menu-icon {
width: 32px;
height: 32px;
fill: #aaa;
}
<svg style="display: none;">
<symbol id="home-icon" viewBox="0 0 64 64">
<path d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</symbol>
<symbol id="project-icon" viewBox="0 0 32 32">
<g>
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</symbol>
</svg>
<nav id="top-menu">
home icon
<br/>
<svg class="menu-icon">
<use xlink:href="#home-icon" />
</svg>
<br/>
project icon
<br/>
<svg class="menu-icon">
<use xlink:href="#project-icon" />
</svg>
</nav>
Reference: css-tricks
Original demo on codepen (before I realized you can insert code snippets directly).
One way will be to edit the icons that will be listed together so you will wrap it inside another group with consistent size