2.0.1 • Public • Published


npm version

@svag/shadow is a shadow from a window. It is created as a separate element to make sure that when the svg image embedded in the image tag is resized, the actual content of the window will not be pixelated.

yarn add -E @svag/shadow

Table Of Contents


The package is available by importing its default function:

import Shadow from '@svag/shadow'

  options: ShadowOptions,
): { translate: string, shadow: string }

Creates a shadow for a window with given width and height. The translate string is also returned to add as a transform property to the window which drops the shadow, to make sure the shadow is not cropped.

Generated Shadow

ShadowOptions: Options to generate macOS like shadow using a blur filter.

Name Type Description Default
width* number The width of the window. -
height* number The height of the window. -
rx number The x corner radius of a window which drops the shadow. 6
ry number The y corner radius of a window which drops the shadow. 6
offsetY number The offset from the top of the window. 25
stdDeviation number The standard deviation for the blur. It will spread twice this distance in each direction. 27.5
import { svg, rect } from '@svag/lib'
import Shadow from '@svag/shadow'

// 0. DEFINE width and height of the window and its shadow.
const width = 250
const height = 250

// 1. CREATE a shadow element.
const { translate, shadow } = Shadow({

// 2. CREATE a window element to place above the shadow.
const window = rect({
  transform: translate,
  rx: 6,
  ry: 6,
  stroke: 'grey',
  fill: '#FFFFFF',

// 3. CREATE an svg image.
const image = svg({
  content: [shadow, window],
  height: 375,
  width: 375,
  stretch: false,
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0, 0, 375, 375" width="375px" height="375px">
  <g transform="translate(55, 25)" filter="url(#shadow)">
      <filter x="-22%" y="-10%" width="144%" height="142%" id="shadow">
        <feOffset dy="25" in="SourceAlpha" result="o"/>
        <feGaussianBlur stdDeviation="27.5" in="o" result="b"/>
        <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" in="b"/>
    <rect height="250" width="250" rx="6" ry="6" fill="white"/>
  <rect transform="translate(55, 25)" width="250" height="250" rx="6" ry="6" stroke="grey"

Direct VS Standalone

The shadow has to be implemented as a separate element of the svg, and not part of the main window, because when embedded as in an img tag and resized, the quality will be lost on Mobile Safari. The image below shows what happens, and how this package is solving the problem.

Compare Images


  • [ ] Add an offsetX property to the shadow.


(c) SVaG 2018


npm i @svag/shadow

DownloadsWeekly Downloads






Unpacked Size

20.6 kB

Total Files


Last publish


  • zvr