@svag/shadow

@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

• Table Of Contents
• API
  • shadow(options: ShadowOptions): { translate: string, shadow: string }
    • ShadowOptions
• Direct VS Standalone
• TODO
• Copyright

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.

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.

TODO

• [ ] Add an offsetX property to the shadow.

Copyright

(c) SVaG 2018