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

Table Of Contents

• Table Of Contents
• API
• Window(options: WindowOptions): string
  • WindowOptions
• Shadow(options: ShadowOptions): { translate: string, shadow: string }
  • ShadowOptions
• Toolbar(options: ToolbarOptions): string
  • ToolbarOptions
• Lib
  • Elements
• TODO
• Copyright

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.
  
  

TODO

• Add a note about VS Code hints to the @svag/lib package.

Copyright

(c) SVaG 2018