Когда-то я это просто решал фоном и его масштабированием в CSS. Но сейчас когда в моде адаптив и SVG всё гораздо усложнилось, но и чёткость повысилась. Если фон сплошной то верх SVG margin-top с "-" внизу наоборот.
Может криво, но адаптивно + SVG это никаких заморочек с Renita =) Но могу и ошибаться. Хотя, как мне кажется эксперименты с position явно больше требуют костылей.
UPD. Можете в живую показать? Bootstrap?
UP/ UP/ Если Bootstrap тогда можете глянуть решение в этом шаблоне:
www.gt3themes.com/website-templates/timber
Before и after + svg там правда вроде просто картинка. Svg будет глаже при масштабе.