badges/_badge_in_development.svg

<svg width="110px" height="30px" fill="none" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>
			.text-bg-warning {
				color: #000!important;
				background-color: RGBA(255,193,7,var(--bs-bg-opacity,1))!important;
			}
			
			.badge {
				--bs-badge-padding-x: 0.65em;
				--bs-badge-padding-y: 0.35em;
				--bs-badge-font-size: 0.75em;
				--bs-badge-font-weight: 700;
				--bs-badge-color: #fff;
				--bs-badge-border-radius: 0.375rem;

				display: inline-block;
				padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
				font-size: var(--bs-badge-font-size);
				font-weight: var(--bs-badge-font-weight);
				line-height: 1;
				text-align: center;
				white-space: nowrap;
				vertical-align: baseline;
				border-radius: var(--bs-badge-border-radius);

				<!-- adjusting the badge position -->
				margin-top: 8px; 
				font-family: Arial, Helvetica, sans-serif;
			}
			</style>
			<span class="badge text-bg-warning" xmlns="http://www.w3.org/1999/xhtml">
				In Development
			</span>
		</div>
	</foreignObject>
</svg>