i'm new to svg and am trying to create inner shadow kind of similiar to the attached pic. I've tried the other stack-overflow answers but the shadow doesn't seems to be as strong as the png attached. Can the experts suggest any possible way of achieving the same?
We can use box-shadow with inset option.
<svg style="background: rgb(51,54,148); width: 439px; height: 419px; box-shadow: 0 0 15px 6px inset rgba(255,0,96,0.8)"></svg>That doesn't look like a normal inset shadow - the opacity is too high near the border. So you'll have to do some fancy filtering to duplicate it. Here's something that will work for any shape:
<svg width="600px" height="600px">
<defs>
<filter id="strong-inner">
<feFlood flood-color="red"/>
<!-- This next operation subtracts the original shape from the red color
field filling the filter region - which will give you a big color border
surrounding the original shape -->
<feComposite operator="out" in2="SourceGraphic" />
<!-- Next we want to expand the red border so it overlaps the space of the
original shape - the radius 4 below will expand it by 4 pixels -->
<feMorphology operator="dilate" radius="4"/>
<feGaussianBlur stdDeviation="5" />
<!-- After blurring it, we want to select just the parts of the blurred,
expanded border that overlap the original shape - which we can do by using
the 'atop' operator -->
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<rect x="10" y="10" width="500" height="500" fill="rgb(50, 0 , 200)" filter="url(#strong-inner)"/>
</svg>