Как растянуть SVG картинку только по высоте при фиксированной ширине

Тема справедлива так же для растягивания ширины при неизменной высоте. На самом деле задача немного специфичная, ведь зачем сознательно искажать картинку/иконку, тем не менее случаи бывают разные. В моем случае нужно было сделать блок, который при наличии контента растягивался бы по высоте и его “уголок” был адаптивным. Саму рабочую конструкцию вставлять не буду, т.к. запись не об этом, а о самом вопросе растягивания svg по одной из сторон, поэтому в качестве предполагаемого результат добавлю только изображение:

Кратко общими словами: конструкция состоит из прямоугольного div’a и svg – уголка справа. Так вот при первичном решении svg никак не удавалось растянуть исключительно по высоте, оставив фиксированную ширину. Решение нашлось в атрибуте:

указав который к тегу svg, изображением стало возможным управлять, устанавливая различную ширину и высоту картинки.

See the Pen OvZJrP by Sergey (@norzserge) on CodePen.

Надеюсь, что моя запись натолкнет кого-нибудь на решение своей не тривиальной задачи. Всем удачи!

P.S. К слову сказать, до решения с растягиванием SVG были предприняты попытки:
– добавить блок с background картинкой-уголком, но при растягивании бэкграунда, картинка заметно искажалась – fail
– нарисовать в background этот треугольник градиентом, но при растягивании сторона треугольника превращалась в лесенку – fail
– вариант с псевдо элементами подходит только при фиксированной высоте блока, в котором находится контент, так что тоже не прокатило
– еще пара извращений, о которых даже писать не хочу

В общем самым действенным оказалось использование svg с атрибутом preserveAspectRatio=”none”