I am attempting to build an svg that can be scaled horizontally and fluidly, similar to the old table-sliced images used to scale a header fluidly across the top of a page. Typically this requires the end component(s) not to stretch while the center component does stretch (or repeat). I have included an example image below. I have experimented with nested svg tags combined with viewBox and preserveAspectRatio in a variety of configurations but can't quite get it to work.
Here is a working example of what I need to do, in pure html/css: http://plnkr.co/edit/cSHBV27fL6k2m67FgwlA?p=preview
Is it even possible to do this with a single self-contained svg, or am I wasting my time?