haikon-js v1.0.0-beta
Haikon
This is my library for parsing HVIF vector icon files.
Here is an example/ test page.
There is quite a nice article about the format here: 500 Byte Images.
There is also a Wikipedia page.
API
The top level module contains two objects, hvif and svg, both of which are used as a namespace only. The hvif object exposes constants and a parse function. The svg object contains a number of functions for generating css declarations, svg attribute-values and svg -dom trees.
- hvif
- parseIcon (buffer , filename), a.k.a. parse
- constants
- colorTags, a.k.a. colourTags
- styleTags
- gradientTypes
- lineCaps
- lineJoins
- constants
- parseIcon (buffer , filename), a.k.a. parse
- svg
- colorCss (color)
- styleCss (style)
- gradientCss (gradient)
- printTransform (transform)
- printPath (path)
- renderIcon (icon)
- renderShape (shape)
- renderGradient (gradient)
Object model
The parseIcon function parses raw icon data into a structure of plain javascript objects and arrays that are used to model the Colors, Gradients, Styles, Paths and Shapes that are used.
Icon
A HVIF icon consists of three sections sections: styles, paths and shapes. The shapes section refers back to the styles and paths sections.
Styles, Colors and Gradients
Colors are stored as single byte that determines the format, followed by RGBA (4bytes), RGB (3 bytes), K (greyscale, 1 byte) or as KA (greyscale with alpha, 2 bytes). A Style is either a color, or a gradient.
- Style := Color | Gradient
- Color := RGBA = 0x1, r g b a | RGB = 0x2, r g b | KA = 0x4, k a | K = 0x5, k
- Gradient := GRADIENT = 0x2, type, flags, stopCount, ?matrix, Stop*
- Stop := …
Paths, Lines, Curves and Commands
- Path := …
Shapes and Transformers
- Shape := { styleIndex:int, pathIndices:int, ?transformers:Transformer
- Transformer := …
Limitations
Some glitches remain to be fixed and a few things are not (yet) supported, such as a.o. conic– and diamond gradients (they have to be emulated as svg does not support them natively).
Acknowledgements
The directory demo/haiku-icons/ contains icons from the haiku OS that are used in the demo page. The icons were taken from this repository. I have combined them into the single haiku-icons.tar file, and make use of tinytar by Levko Kravets to extract them from the .tar file before they are parsed and rendered.
License
MIT
3 years ago