Как сделать частичное уменьшение svg картинки?

Question

[narem]

Есть свг картинка которую я на данный момент вставляю на страницу через псевдо элемент.
Нужно что бы она была по всей ширине блока родителя, но при уменьшении блока - должны уменьшаться только черточки которые уходят в стороны от галочки. Т.е галочка остается той же ширины, а все что по бокам уменьшается.
На данный момент проблема в том, что у черточек по бокам размыто и на большом разрешении все отображается нормально, но при уменьшении блока по бокам пропадает размытие. Как быть?

content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: url(../images/vector_5.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

Comments

[Ankhena]

Как SVG вставляйте только галочку.
Палочки можно нарисовать градиентами или бордером или чем вам удобнее

Answer 1

[Евгений]

Очевидно, разбить на три элемента.
При уменьшении ширины родительского блока, уменьшать ширину боковых, а центральную не трогать.