SVG Creator

Sample#

Sample UI.js that uses the Section SVGCreator Package

var creator = SVGCreator;
creator.initialize({
    total_height: 100,
    total_width: 150,
    align: 'left'
});

creator.addText({
    text_value: 'TEST SVG CREATOR'
});

creator.addRect({
    x: 0,
    y: 20,
    width: 50,
    height: 40,
    fill_color: 'green'
});

creator.endSVG();

var html = creator.getSVGHtml();
ui_div.outerHTML = html;

Available Methods#

Method	Description
`addMarker(marker_obj)`	Adds a marker to the SVG for arrows on dimension lines.
`addRect(rect_obj)`	Creates a rectangle element in the SVG.
`addPath(path_obj)`	Creates a path element in the SVG defined by a series of coordinates.
`addCircle(circle_obj)`	Adds a circle element to the SVG.
`addLine(line_obj)`	Creates a line element in the SVG with options for stroke color, width, dasharray, and marker definitions.
`addText(text_obj)`	Adds a text element to the SVG with options for position, font family, size, and color.
`addBreakLine(breakline_obj)`	Adds a break line to help simplfy the process of engineering drawings.
`dimLineDrawer(dimline_obj)`	Easily add a dimension line to the creator.
`endSVG()`	Ends the SVG structure by closing the SVG and div tags.
`getSVGHtml()`	Returns the SVG HTML string generated by the SVGCreator object.

marker_obj

A JavaScript Object that can contain the following properties.

Property	Description
`marker_id`	Specifies the unique identifier for the marker.
`marker_width`	Sets the width of the marker.
`marker_height`	Sets the height of the marker.
`refX`	Defines the x-coordinate for the reference point of the marker.
`refY`	Defines the y-coordinate for the reference point of the marker.
`marker_dims`	Contains an array of coordinate pairs defining the polygonal shape of the marker..
`fill_color`	Defines the fill color of the marker.
`transform`	Transform string. See SVG docs

rect_obj

A JavaScript Object that can contain the following properties.

Property	Description
`x`	Specifies the x-coordinate of the upper-left corner of the rectangle.
`y`	Specifies the y-coordinate of the upper-left corner of the rectangle.
`rx`	Rounding of rectangle corner on x side.
`ry`	Rounding of rectangle corner on y side.
`width`	Sets the width of the rectangle.
`height`	Sets the height of the rectangle.
`fill_color`	Defines the fill color of the rectangle.
`fill_opacity`	Defines the fill opacity of the rectangle.
`stroke`	Defines the stroke color of the rectangle.
`stroke_linejoin`	Defines the stroke line join of the rectangle.
`stroke_width`	Defines the stroke width of the rectangle.
`stroke_dasharray`	Sets the dash pattern for the line's stroke, if provided s in csv format.
`stroke_opacity`	Sets the stroke opacity of the rectangles line.
`transform`	Transform string. See SVG docs

path_obj

A JavaScript Object that can contain the following properties.

Property	Description
`starting_x`	Represents the x-coordinate of the starting point of the path.
`starting_y`	Represents the y-coordinate of the starting point of the path.
`dims_arr`	An array containing pairs of x and y coordinates, defining the subsequent line segments of the path.
`d`	Is the `d` parameter of the svg path. Overrides the `dims_arr`.
`stroke`	Sets the color of the path's stroke.
`stroke_width`	Sets the width of the path's stroke.
`stroke_linejoin`	Defines the stroke line join of the path.
`stroke_dasharray`	Sets the dash pattern for the path's stroke, if provided as a csv format.
`stroke_opacity`	Fill opacity of the stroke.
`fill_color`	Defines the fill color of the path.
`fill_opacity`	Fill opacity of the path.
`marker_end_def`	Specifies the marker definition for the end of the path, if provided.
`marker_start_def`	Specifies the marker definition for the start of the path, if provided.
`transform`	Transform string. See SVG docs

circle_obj

A JavaScript Object that can contain the following properties.

Property	Description
`center_x`	Represents the x-coordinate of the circle's center.
`center_y`	Represents the y-coordinate of the circle's center.
`radius`	Sets the radius of the circle.
`stroke`	Sets the color of the circle's stroke.
`stroke_width`	Sets the stroke width of the circle's stroke.
`stroke_opacity`	Sets the stroke opacity of the circle's line.
`stroke_dasharray`	Sets the dash pattern for the circle's stroke, if provided as a csv format.
`fill_color`	Sets the fill color of the circle.
`fill_opacity`	Sets the fill opacity of the circle.
`transform`	Transform string. See SVG docs

line_obj

A JavaScript Object that can contain the following properties.

Property	Description
`start_x`	Specifies the x-coordinate of the starting point of the line.
`start_y`	Specifies the y-coordinate of the starting point of the line.
`end_x`	Specifies the x-coordinate of the ending point of the line.
`end_y`	Specifies the y-coordinate of the ending point of the line.
`stroke`	Sets the color of the line's stroke.
`stroke_width`	Sets the width of the line's stroke, if provided.
`stroke_dasharray`	Sets the dash pattern for the line's stroke, if provided as an csv format.
`stroke_linejoin`	Sets the stroke linejoin for the line's stroke.
`marker_end_def`	Specifies the marker definition for the end of the line, if provided.
`marker_start_def`	Specifies the marker definition for the start of the line, if provided.
`opacity`	Sets the text opacity.
`transform`	Transform string. See SVG docs

text_obj

A JavaScript Object that can contain the following properties.

Property	Description
`x`	Specifies the x-coordinate of the starting point of the text.
`y`	Specifies the y-coordinate of the starting point of the text.
`font_family`	Defines the font family of the text, defaulting to "Helvetica, Segoe UI Emoji" if not provided.
`font_size`	Sets the font size of the text, defaulting to "12px" if not provided.
`font_weight`	Sets the font weight of the text, defaulting to "normal" (normal, bold, bolder, lighter).
`fill_color`	Sets the fill color of the text, defaulting to "#000000" if not provided.
`text_value`	Contains the actual text value to be displayed.
`text_decoration`	Sets the text decoration, defaulting to "none" (underline, line-through).
`text_anchor`	The text anchor position. Default `start`.
`dominant_baseline`	The text dominant baseline, position. Default `text-before-edge`.
`opacity`	Set the text opacity.
`direction`	The text direction. Default `ltr`.
`transform`	Transform string. See SVG docs

breakline_obj

A JavaScript Object that can contain the following properties.

Property	Description
`start_x`	Specifies the x-coordinate of the starting point of the line.
`start_y`	Specifies the y-coordinate of the starting point of the line.
`end_x`	Specifies the x-coordinate of the ending point of the line.
`end_y`	Specifies the y-coordinate of the ending point of the line.
`size`	Size of the break, if provided.
`stroke`	Sets the color of the line's stroke, if provided.
`stroke_width`	Sets the width of the line's stroke, if provided.
`fill_color`	Defines the fill color of the path, if provided.

dimline_obj

A JavaScript Object that can contain the following properties.

Property	Description
`x1`	Start x location of the line.
`y1`	Start y location of the line.
`x2`	End x location of the line.
`y2`	End y location of the line.
`pos`	Position of the text.
`color`	Color of the text. Default black.
`text`	The text.
`text_size`	The text size. Default 10.
`arrow_size`	The text. Default 4.

Example

var creator = SVGCreator;
creator.initialize({
    align: 'center',
    width: 500,
    height: 500
});

creator.dimLineDrawer({
    x1: input_json.x_1,
    y1: input_json.y_1,
    x2: input_json.x_2,
    y2: input_json.y_2,
    pos: input_json.dropdown_input,
    color: "blue",
    text: input_json.text_input,
    text_size: input_json.text_size_input,
    arrow_size: input_json.arrow_size_input
});

creator.endSVG();
var svg_html = creator.getSVGHtml();