I'm trying to get an image inside of a SVG Generated Hexagon but can't quite get the image to fit nicely within the SVG.
Small images appear blurred and large ones are too large and don't scale down.
If someone knows a way to get the image within the SVG to scale nicely, or a better approach on how to get an image pulled through dynamically into a hexagon shape - it'd be greatly appreciated.
HTML
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="loginHex" patternUnits="userSpaceOnUse" width="200" height="200">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://i.imgur.com/efrgBNf.jpg" x="-25"></image>
</pattern>
</defs>
<polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#loginHex)"></polygon>
</svg>
CSS
svg{
width:50%;
margin:0 auto;
display: block;
margin-bottom: 20px;
}
#hex{
stroke-width:2;
stroke: #000000;
}
