Как я могу сделать сложные svg элементы с текстом, иконками и т.д?

Question

[maksiminakk]

Мне нужно сделать такой svg элемент. При этом сделать его адаптивными, отзывчивым, т.е при добавлении текста нижняя часть этого элемента должна расширяться под текст, ну и соответственно при изменении размеров родителя. Как бы вы поступили в данном случае?

<svg viewBox="0 0 374 154" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M0 12C0 5.37259 5.37258 0 12 0H53.1723C56.2701 0 59.2479 1.198 61.4827 3.34335L79.5173 20.6566C81.7521 22.802 84.7299 24 87.8277 24H362C368.627 24 374 29.3726 374 36V142C374 148.627 368.627 154 362 154H12C5.37257 154 0 148.627 0 142V12Z"
                                        fill="url(#paint0_linear_122_115)" fill-opacity="0.8" />
                                    <path
                                        d="M1 12C1 5.92487 5.92487 1 12 1H53.1723C56.012 1 58.7416 2.09817 60.7901 4.06474L78.8248 21.378C81.2458 23.7022 84.4717 25 87.8277 25H362C368.075 25 373 29.9249 373 36V142C373 148.075 368.075 153 362 153H12C5.92486 153 1 148.075 1 142V12Z"
                                        stroke="#11E5B3" stroke-width="2" />
                                    <defs>
                                        <linearGradient id="paint0_linear_122_115" x1="146.125" y1="146.395"
                                            x2="164.853" y2="-15.6949" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#008969" />
                                            <stop offset="1" stop-color="#0C1E30" stop-opacity="0" />
                                        </linearGradient>
                                    </defs>
                                </svg>

Comments

[maksiminakk]

Evgenii, пробовал, но проблема в том что здесь градиент + бордер

[Максим]

А обязательно текст должен растягивать svg ?

[maksiminakk]

Максим, конечно, понятное дело что можно просто bg-image добавить, но если будет больше 3 строчек, все поедет

[maksiminakk]

Evgenii, это все понятно, но бордер не сплошной в моем примере. если дробить на before или after не получится обрезать границу например на середине блока, тем более если там градиент

[maksiminakk]

Evgenii, выглядит будто вы решили мою проблему, можно ваш css?