Using an svg image as a button/link - html

Question

I've done some searching but have been unable to figure things out. I was hoping I would be able to place and <a> tag in between two svg tags to make a button but it has thus far not worked. What I was thinking was doing:
<svg class="triangle-animation" width="85" height="85">
<polygon points="0,25 25,50, 50,25" fill="rgba(255,255,255,.1)"/>
<polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(255,255,255,.5)"/>
<polygon points="0,0 25,25, 50,0" fill="rgba(255,255,255.8)"/>
</svg>
but no luck. I also tried putting some text inside of the a tag but it didn't even appear. The guides I have looked for have not thus far been very helpful. I'm brand new to web design and I'm just trying to get my personal webpage going.
The svg draws three triangles on top of one another pointing down. The behaviour I'm looking for is that they draw the eye down and when clicked the page jumps down to main content. Thanks for the help!

Answer 1

try wrapping your tags around the svg instead.
<a href="about.html">
<svg class="triangle-animation" width="85" height="85">
<polygon points="0,25 25,50, 50,25" fill="rgba(255,255,255,.1)"/>
<polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(255,255,255,.5)"/>
<polygon points="0,0 25,25, 50,0" fill="rgba(255,255,255.8)"/>
</svg>
</a>

Answer 2

Use the to wrap the svg and style it
.SvgButton{
padding: 5px;
border: 1px solid red;
display: flex;
width: 50px;
}
<a class="SvgButton" href="#"><svg class="triangle-animation" width="85" height="85">
<polygon points="0,25 25,50, 50,25" fill="rgba(255,0,0,.3)"/>
<polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(0,255,255,.5)"/>
<polygon points="0,0 25,25, 50,0" fill="rgba(255,0,255,.8)"/>
<path d="M27 64c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3zm9-.449s-4.252 8.449-11.985 8.449c-7.18 0-12.015-8.449-12.015-8.449s4.446-7.551 12.015-7.551c7.694 0 11.985 7.551 11.985 7.551zm-7 .449c0-2.757-2.243-5-5-5s-5 2.243-5 5 2.243 5 5 5 5-2.243 5-5z"/>
</svg></a>

Answer 3

A better solution would be to use svg symbol definition -> look
You can manage icons more easily.
.icon {
width: 50px;
height: 50px;
}
.animation {
display: flex;
}
.mail {
background-color: #dc4e41;
fill: #fff;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="triangle-animation" viewBox="0 0 50 50">
<path fill="rgba(255,0,0,.3)" d="M0 25l25 25 25-25z" />
<path fill="rgba(0,255,255,.5)" d="M0 12.5l25 25 25-25z" />
<path fill="rgba(255,0,255,.8)" d="M0 0l25 25L50 0z" />
</symbol>
<symbol id="share-icon-mail" viewBox="-7 -6 42 42">
<path
d="M26 23.5v-12a8.408 8.408 0 0 1-1.078 1.031c-2.234 1.719-4.484 3.469-6.656 5.281-1.172.984-2.625 2.188-4.25 2.188h-.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281A8.411 8.411 0 0 1 2.001 11.5v12c0 .266.234.5.5.5h23c.266 0 .5-.234.5-.5zm0-16.422C26 6.687 26.094 6 25.5 6h-23c-.266 0-.5.234-.5.5 0 1.781.891 3.328 2.297 4.438a980.43 980.43 0 0 1 6.266 4.953c.828.672 2.328 2.109 3.422 2.109h.031c1.094 0 2.594-1.437 3.422-2.109a946.207 946.207 0 0 1 6.266-4.953c1.016-.797 2.297-2.531 2.297-3.859zm2-.578v17c0 1.375-1.125 2.5-2.5 2.5h-23A2.507 2.507 0 0 1 0 23.5v-17C0 5.125 1.125 4 2.5 4h23C26.875 4 28 5.125 28 6.5z">
</path>
</symbol>
</svg>
<a href="about.html">
<svg class="icon animation">
<use xlink:href="#triangle-animation"></use>
</svg>
</a>
<svg class="icon mail">
<use xlink:href="#share-icon-mail"></use>
</svg>