I need an SVG image to be fixed to a corner of a Div of varying size

Question

wanted to know how to make an image (svg) get "stuck" to a corner of a div... ex:

I have DIV (purple) and SVG (red) where the DIV has a standard width and it n grows more than that, already at the time it can vary, and from there when it grows the SVG gets more or less like this where it was before:

And what I wanted was for the SVG to stay that way:

The SVG stuck in the lower left corner of the DIV... Sorry if I n explained right, I am new in this "area" of Css, html etc.

Answer 1

I think position relative in the purple div and position Absolute in the red div, setting with top and left you set her position. Here’s the code:

div.pai {
position: relative;
}
svg {
position: absolute; //isso vai deixar o svg com posição absoluta relativa ao 
próximo elemento pai com position definida que não seja static
top: distância do topo aqui;
left: distância da esquerda aqui; //Valores negativos pra sair da box vermelha
;

Answer 2

One solution would be to put an Absolute position on svg and adjust with bottom and left.

Something like that: https://codepen.io/peedroo/pen/QWvJjop