<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/i-want-to-replace-this-svg-where-hvcentered-is-located-how-do-i-do-this/277007
asasass
-->
<style type="text/css">
.holder {
width:120px; /* Change this width and height. See that the triangle remains centered */
height:120px;
border:20px solid red; /* Change this border width. See that the triangle remains centered */
border-radius:50%; /* Comment out to change the circle to a square. See pos:abs left below */
position:relative;
}
svg {
position:absolute;
top:0;
right:0;
bottom:0;
left:24px; /* Use this if the outer box is a circle */
/* left:0; /* Use this if the outer box is a square */
margin:auto;
outline:1px dashed blue; /* TEST Outline. To Be DELETED */
}
</style>
</head>
<body>
<div class="holder">
<svg width="100" height="100" style="color:#E77D19;" viewbox="0 0 85 100">
<path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</div>
</body>
</html>
<style type="text/css">
.holder {
width: 266px;
/* Change this width and height. See that the triangle remains centered */
height: 266px;
box-shadow: inset 0 0 0 3px #e77d19;
/* Change this border width. See that the triangle remains centered */
/* Comment out to change the circle to a square. See pos:abs left below */
position: relative;
}
svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 24px;
/* Use this if the outer box is a circle */
/* left:0; /* Use this if the outer box is a square */
margin: auto;
outline: 1px dashed blue;
/* TEST Outline. To Be DELETED */
}
</style>
</head>
<body>
<div class="holder">
<svg style="background-color:black;" width="100" height="106" viewBox="0 0 95 100">
<path fill="currentColor" style="fill:#e77d19; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</div>
</body>
</html>
