@svag/shadow

2.0.1 • Public • Published

@svag/shadow

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

API

The package is available by importing its default function:

import Shadow from '@svag/shadow'

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({
  width,
  height,
})

// 2. CREATE a window element to place above the shadow.
const window = rect({
  transform: translate,
  width,
  height,
  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)">
    <defs>
      <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"/>
      </filter>
    </defs>
    <rect height="250" width="250" rx="6" ry="6" fill="white"/>
  </g>
  <rect transform="translate(55, 25)" width="250" height="250" rx="6" ry="6" stroke="grey"
        fill="#FFFFFF"/>
</svg>

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

TODO

  • [ ] Add an offsetX property to the shadow.

Copyright

(c) SVaG 2018

Dependencies (1)

Dev Dependencies (6)

Package Sidebar

Install

npm i @svag/shadow

Weekly Downloads

2

Version

2.0.1

License

MIT

Unpacked Size

20.6 kB

Total Files

13

Last publish

Collaborators

  • zvr