Within my website, I have incorporated various blocks featuring SVG images and text descriptions. To enhance the visual appeal, I aim to make these blocks flexboxes for easy vertical alignment of text, similar to this example:
<div class="decorated-feature">
<div class="feature-decorator feature-image">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 356.8 357.2" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: black;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
</style>
<path class="st0" d="M178.3,2C80.9,2,2,80,2,177.4s79,177.8,176.4,177.8s176.4-76.9,176.4-174.9" />
<polyline class="st0" points="261.2,76 178.4,176.5 132.7,132.7" />
</svg>
</div>
<div class="feature-description right-text">
<h3>Dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.s.</p>
</div>
</div>
</div>
My objective is to ensure that the image occupies 30% of the width within its containing div and maintains its aspect ratio. While this functions correctly across most browsers, I encountered compatibility issues with IE11. Is this a known bug? How can I resolve it?
UPDATE: Subsequent research revealed that scaling inline SVG images presents a common challenge. I applied a wrapper container with padding to facilitate proper scaling, following the detailed instructions outlined in this article https://css-tricks.com/scale-svg/.