jsvg

Name Modified Size
README.md3 years ago2.64 KB
example.html3 years ago1.54 KB
example.jsvg3 years ago1.31 KB
example.svg3 years ago1.30 KB
jsvg.js3 years ago863
jsvg.min.js3 years ago395

JSVG JavaScript Vector Graphic

JSVG is a method of writing SVG sprite maps in a JSON-like format. It was created to work-around the inability to share cross-domain SVG sprite maps, as well as Internet Explorer 9-11’s inability to display external SVGs.

Usage

JSVG.parse(jsvgString); // where jsvgString is a stringified JSVG Object

Notation

JSVG Object {
    JSVG Sprite "sprite": JSVG Element [
        JSVG Attribute "attributeName",
        JSVG Attribute "attributeName attributeValue",
        JSVG Attribute "elementName", JSVG Element [
            JSVG Attribute "attributeName",
            JSVG Attribute "attributeName attributeValue",
            JSVG Attribute "elementName", JSVG Element [
                JSVG Attribute "attributeName",
                JSVG Attribute "attributeName attributeValue"
            ]
        ]
    ]
}

A JSVG Object is an object representing a sprite map. It may contain JSVG Sprites.

{ Sprite, ..., Sprite }

A JSVG Sprite is a unique identifier of a sprite proceeded by an JSVG Element.

"id": JSVGElement

A JSVG Element is an array representing a sprite or one of its descendants. It may contain JSVG Attributes and other JSVG Elements.

[Attribute1, ..., AttributeN]

A JSVG Attribute is a string representing an attribute name, an attribute name and its value, or an element name. An attribute name and its value are separated by its first empty space. An element name is proceeded by a JSVG Element.

"attributeName"

"attributeName attributeValue"

"elementName", JSVGElement

Example

The following JSON represents a JSVG Object with one JSVG Sprite identified as copa.

{
    "copa": ["viewBox 0 0 512 512", "preserveAspectRatio xMidYMid meet",
        "path", ["d M146.8 0l365.2 444.1-212.8 1.3", "opacity .5"],
        "ellipse", ["cx 404.4", "cy 450.7", "rx 107.6", "ry 61.3"],
        "path", ["d M415.3 0l-415.3 444.1 242 1.3", "opacity .5"],
        "path", ["d M0 450.7c0 34 54.8 61.3 122.4 61.3 67.6 0 122.4-27.4 122.4-61.3s-54.8-61.3-122.4-61.3c-67.6.1-122.4 27.5-122.4 61.3z"]
    ]
}

The following XML represents the rendered copa JSVG Sprite, expanded and indented for readability.

<svg viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
    <path d="M146.8 0l365.2 444.1-212.8 1.3" opacity=".5"></path>
    <ellipse cx="404.4" cy="450.7" rx="107.6" ry="61.3"></ellipse>
    <path d="M415.3 0l-415.3 444.1 242 1.3" opacity=".5"></path>
    <path d="M0 450.7c0 34 54.8 61.3 122.4 61.3 67.6 0 122.4-27.4 122.4-61.3s-54.8-61.3-122.4-61.3c-67.6.1-122.4 27.5-122.4 61.3z"></path>
</svg>

A working example can also be seen at example.html.


The standard script is 863B or 295B minified + gzipped.