Как вставить SVG в :after content из Shadow DOM?

Question

[uRoot]

Вот. SVG в Shadow DOM-е хранятся в таком виде:

<symbol id="part-up-wawe" viewBox="0 0 270 20" preserveAspectRatio="none"><path d="M0 1c4 1 8 2 11 3 84 21 173 20 256-3v19H0V1z"></path></symbol>

Comments

[tyzberd]

Это вам на js нужно? Или вручную?

[uRoot]

tyzberd, вручную, разово. Конструкция обычная:

picture {
  &::after {
    content: " ";
  }
}

Answer 1

[tyzberd]

так можно

.toster:after {
    content: "";
    display: block;
    width: 300px;
    height: 20px;
    background: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 270 20' fill='#565645'><path  d='M0 1c4 1 8 2 11 3 84 21 173 20 256-3v19H0V1z'/></svg>")  no-repeat;
  }

в codepen почему то с # не работает, поменял на %23 https://codepen.io/anon/pen/gVxLzb
Только прогнать через gulp-urlencode-inline-svgs

Comments

[uRoot]

Только прогнать через gulp-urlencode-inline-svgs

Не уверен, что правильно понял зачем

[tyzberd]

Не уверен, что правильно понял зачем

CryNet, что бы работало во всех браузерах.
https://codepen.io/tigt/post/optimizing-svgs-in-da...
У меня gulp-urlencode-inline-svgs игнорит svg в которых что то поменяно руками.

[uRoot]

tyzberd, понял. спасибо