SVG Bevel effect for all edges

Question

#logo {
  position:relative;
  left:20px;
  top:20px
}
#logo .container {
  height:200px;
  width:200px;
  top:50px;
  left:50px
 }
#logo .container, #logo .slice {
   position:absolute;
}
#logo .slice {
  height:100%;
  width:100%;
}

<div id="logo">
  <div class="container">
    <div class="slice" id="one">
      <svg height="200" width="200">
        <polygon points="0,200 100,100 200,200" style="fill:green" />
      </svg>
    </div>
    <div class="slice" id="two">
      <svg height="200" width="200">
        <polygon points="0,0 100,100 0,200" style="fill:blue" />
      </svg>
    </div>
    <div class="slice" id="three">
      <svg height="200" width="200">
        <polygon points="0,0 100,100 200,0" style="fill:red" />
      </svg>
    </div>
    <div class="slice" id="four">
      <svg height="200" width="200">
        <polygon points="200,0 100,100 200,200" style="fill:yellow" />
      </svg>
    </div>
  </div>
</div>

I couldn't figure out how to make a bevel filter as in this logo. All three edges of each slice must be equally darker like the light source is projected right above each slice. Briefly, I am expecting an end result exactly the same with the logo in the link.

EDIT:

<svg>
  <filter id="inset-shadow">
    <feComponentTransfer in=SourceAlpha>
      <feFuncA type="table" tableValues="1 0" />
    </feComponentTransfer>
    <feGaussianBlur stdDeviation="5" />
        <feOffset in="offsetblur2" dy="10" result="offsetblur" />
        <feOffset dy="-10" result="offsetblur2" />
    <feFlood flood-color="rgb(20, 0, 0)" result="color" />
    <feComposite in2="offsetblur" operator="in" />
    <feComposite in2="SourceAlpha" operator="in" />
    <feMerge>
      <feMergeNode in="SourceGraphic" />
      <feMergeNode />
    </feMerge>
  </filter>
  <polygon points="0,0 100,100 200,0" style="fill:red" filter="url(#inset-shadow)" />
</svg>

Something like this maybe but not enough dark?

Answer 1

Here's a bevel effect using a specular lighting filter:

<svg width="800px" height="600px" viewBox="0 0 200 150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>
    <filter id="MyFilter" height="220%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                          specularExponent="30" lighting-color="white"  
                          result="specOut">
        <fePointLight x="100" y="75" z="200"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="1" k2="1" k3="0" k4="0"/>

    </filter>
  </defs>
  
  <rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" />
  <g filter="url(#MyFilter)" >
      <path fill="#D90000" 
            d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
    </g>
  </g>
</svg>

But you can do the same thing more elegantly just using composites and a blur.

<svg width="800px" height="600px" viewBox="0 0 200 150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>
    <filter id="MyFilter" height="220%">
      <feFlood flood-color="black"/>
      <feComposite operator="out" in2="SourceGraphic"/>
      <feGaussianBlur stdDeviation="5"/>
      <feComposite operator="atop" in2="SourceGraphic"/>
    </filter>
  </defs>
  
  <rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" />
  <g filter="url(#MyFilter)" >
      <path fill="#D90000" 
            d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
    </g>
  </g>
</svg>