HTML SVG Positioning? - html

Question

so i have a little problem with a svg, this svg is align on left side, but i want make it to the right side, I've tried using x and y but its not working, please help me
<svg width="498" height="99" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 36C0 2.863 26.8629-24 60-24
h438V99H60C26.8629 99 0 72.1371 0 39v-3Z" fill="#2D2D2D"/>
</svg>

Answer 1

You can use an outer div like this:
<div class='outer-div' >
<!-- SVG Element -->
<svg></svg>
</div>
And in the CSS file:
.outer-div{
display:flex;
flex-direction: row-reverse;
}

Answer 2

There could be a number of options depending on the context. Here I present:
CSS float
CSS text-align
CSS position
CSS flexbox
and SVG viewBox
CSS float
A bit old-school I guess. It works, but the downside is that the SVG takes up 0 px height.
svg {
float: right;
}
<svg width="498" height="99" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 36C0 2.863 26.8629-24 60-24
h438V99H60C26.8629 99 0 72.1371 0 39v-3Z" fill="#2D2D2D"/>
</svg>
CSS text-align
The SVG is displayed as an inline element, so it behaves like a text.
.parent {
text-align: right;
}
<div class="parent">
<svg width="498" height="99" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 36C0 2.863 26.8629-24 60-24
h438V99H60C26.8629 99 0 72.1371 0 39v-3Z" fill="#2D2D2D"/>
</svg>
</div>
CSS position
If the parent is positioned relative (or absolute) and the SVG is positioned absolute the property right can be used for aligning the SVG.
.parent {
position: relative;
}
svg {
position: absolute;
right: 0;
}
<div class="parent">
<svg width="498" height="99" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 36C0 2.863 26.8629-24 60-24
h438V99H60C26.8629 99 0 72.1371 0 39v-3Z" fill="#2D2D2D"/>
</svg>
</div>
CSS flexbox
The more modern version of the above examples.
.parent {
display: flex;
justify-content: flex-end;
}
<div class="parent">
<svg width="498" height="99" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 36C0 2.863 26.8629-24 60-24
h438V99H60C26.8629 99 0 72.1371 0 39v-3Z" fill="#2D2D2D"/>
</svg>
</div>
SVG vieBox
And lastly, by using the viewBox attribute instead of the width and the height attributes, the <path> can be positioned in the right side of the SVG itself (the transform attribute). The SVG will take up 100 % of the width at all times and the <path> will therefore also "float" to the right. This will make the SVG scale up and down depending on the width available.
<svg viewBox="0 0 700 99" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path transform="translate(262 0)" d="M0 36C0 2.863 26.8629-24 60-24
h438V99H60C26.8629 99 0 72.1371 0 39v-3Z" fill="#2D2D2D"/>
</svg>

Answer 3

Like this?
<svg width="498" height="99" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 36C0 2.863 26.8629-24 60-24h438V99H60C26.8629 99 0 72.1371 0 39v-3Z" fill="#2D2D2D" transform="scale (-1, 1)" transform-origin="center" />
</svg>