<h1>With CSS filters</h1>

<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
  <polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
  <rect width="100" height="100" fill="pink" stroke="red" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
  <circle cx="50" cy="50" r="50" fill="pink" stroke="red" />
</svg>
body { background-color: antiquewhite; font-family: 'Roboto', 'Helvetica', sans-serif; }
svg { margin: 1rem }

.css-filter {
  filter: drop-shadow(2px 0 0 antiquewhite) drop-shadow(-2px 0 0 antiquewhite) drop-shadow(0 2px 0 antiquewhite) drop-shadow(0 -2px 0 antiquewhite) drop-shadow(1px 0 0 red) drop-shadow(-1px 0 0 red) drop-shadow(0 -1px 0 red) drop-shadow(0 1px 0 red);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.