SVG inline in CSS 

background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.
org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90%" hei
ght="90%" viewBox="-0.5 -0.7 11 12" preserveAspectRatio="xMidYMid meet">
<path d="M5,5 C5,7 4,8 6.5,11" stroke="green" fill="none" stroke-width="
1"/><ellipse id="petal" cx="5" cy="2" ry="2.5" rx="1.5" fill="white" str
oke="slateblue" stroke-width="0.5" /><use xlink:href="%23petal" transfor
m="rotate(72 5 5)"/><use xlink:href="%23petal" transform="rotate(144 5 5
)"/><use xlink:href="%23petal" transform="rotate(216 5 5)"/><use xlink:h
ref="%23petal" transform="rotate(-72 5 5)"/><circle r="1" cx="5" cy="5"
fill="goldenrod" stroke="yellow"/></svg>');