Render beveled border on SVG rect - svg

Question

Is it possible to render a border of a SVG rect to emulate an outset?
with CSS?
with filters?
NB: It has to be a single scalable simple rect object, so I don't want to build it with paths / composite objects.

Answer 1

It's possible to do this with a filter. You do it by drawing a masking shape in the SVG and doing the stroking in the filter.
<svg width="600px" height="800px" color-interpolation-filters="sRGB">
<filter id="rect-and-stroke" x="0%" y="0%" width="100%" height="100%">
<feFlood flood-color="red" result="red-stroke"/>
<feFlood flood-color="orange" result="orange-stroke"/>
<feFlood x="10" y="10" width="180" height="80" flood-color="yellow" result="yellow-field"/>
<feComposite operator="in" in2="SourceGraphic" in="red-stroke" result="red-partial"/>
<feComposite operator="out" in2="SourceGraphic" in="orange-stroke" result="orange-partial"/>
<feMerge>
<feMergeNode in="red-partial" />
<feMergeNode in="orange-partial" />
<feMergeNode in="yellow-field" />
</feMerge>
</filter>
<path filter="url(#rect-and-stroke)" fill="black" d="M 0 0 L 10 10 180 80 200 100 0 100Z"/>
</svg>