Svag NPM | npm.io

svag

svag is the ultimate collection of SVaG elements which can be used to create mockups of the UI by dynamically generating SVGs. It contains all packages from the @svag scope.

yarn add -E svag

API

The package is available by importing its named exports which are the components. The library methods can be imported from svag/lib alias.

import {
  Window,
  Shadow,
  Toolbar,
} from 'svag'
import {
  makeElement,
  roundedCorner,
  minify
  svg,
  rect,
} from 'svag/lib'

`Window(` `options: WindowOptions,): string`

Creates a @svag/window.

WindowOptions

Name	Type	Description	Default
content*	string	The content to display inside of the window.	-
width*	number	The width of the content.	-
height*	number	The height of the content.	-
backgroundColor	string	The color of the window.	`#000000`
foregroundColor	string	The foreground color of the container group which will hold the content.	`#FFFFFF`
noStretch	boolean	Do not stretch the SVG when embedded as an image. This is achieved by explicitly setting width and height attributes on the `svg` element.	`false`
title	string	An optional title for the window.	-
attributes	object	Any additional attributes to set on the holder of the content, e.g., `font-family`.	-
minWidth	number	The minimum width that the window should take. If the content's width is greater than this value, the height will adjust to the content.	-
minHeight	number	The minimum height that the window should take. If the content's height is greater than this value, the height will adjust to the content.	-
paddingY	number	The padding on the Y-axis (top and bottom).	`5`
paddingX	number	The padding on the X-axis (left and right).	`5`
noShadow	boolean	Disable the dropping shadow.	`false`
minify	boolean	Remove whitespace between tags (e.g., between `>` and `<`). If there are any problems with generated SVG, this could be disabled.	`true`

`Shadow(` `options: ShadowOptions,): { translate: string, shadow: string }`

Creates a @svag/shadow. It will be able to resize on mobile Safari without the window's contents loosing quality.

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`

`Toolbar(` `options: ToolbarOptions,): string`

Returns a new @svag/toolbar either with or without a title.

ToolbarOptions: Options to make a toolbar.

Name	Type	Description	Default
width*	number	The width of the toolbar.	-
title	string	An optional title to display in the toolbar.	-

Lib

The @svag/lib has a number of methods to create dynamically generated SVGs.

makeElement: create a new SVG element.
roundedCorner: write a C directive of the path to make a rounded corner, e.g., to create rectangles with only some rounded corners.
minify: remove whitespace between tags.

Elements: For easier access to elements, some of them were converted into methods, along with their documentation. The autocompletion hints can be accessed by hitting ctrlspace combination when writing a call to any API function.

svg: make a complete svg image.
react: draw a rectangle.