SVG Section Dimensions

The SVG Section Drawer has been developed to easily draw cross section dimensions for different geometries in SkyCiv Quick Design.

Supported Sections#

  • Rectangular
  • Hollow Rectangular
  • Hollow Circular
  • I-Beam
  • T-Section
  • Angle
  • Channel
  • Hat Shape

Functions#

drawRectangle#

Draws a rectangle.

ParameterTypeDescription
colorstringThe color of the rectangle.
bInputnumberThe section width.
dInputnumberThe section height.
widthnumberThe width of the drawing area.
heightnumberThe height of the drawing area.
unitsstringThe unit string for the dimensions.
axisbool or objectfalse is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn rectangle.

drawRectangularTube#

Draws a rectangular tube.

ParameterTypeDescription
colorstringThe color of the tube.
bInputnumberThe section width.
dInputnumberThe section height.
tFInputnumberThe flange thickness.
tWInputnumberThe web thickness.
widthnumberThe width of the drawing area.
heightnumberThe height of the drawing area.
unitsstringThe unit string for the dimensions.
axisbool or objectfalse is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn rectangular tube.

drawIBeam#

Draws an I beam.

ParameterTypeDescription
colorstringThe color of the beam.
bInputnumberThe section width.
dInputnumberThe section height.
tFInputnumberThe flange thickness.
tWInputnumberThe web thickness.
widthnumberThe width of the drawing area.
heightnumberThe height of the drawing area.
unitsstringThe unit string for the dimensions.
axisbool or objectfalse is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn I beam.

drawCircularTube#

Draws a circular tube.

ParameterTypeDescription
colorstringThe color of the tube.
dInputnumberThe section diameter.
tInputnumberThe wall thickness.
widthnumberThe width of the drawing area.
heightnumberThe height of the drawing area.
unitsstringThe unit string for the dimensions.
axisbool or objectfalse is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn circular tube.

drawChannel#

Draws a channel.

ParameterTypeDescription
colorstringThe color of the channel.
bInputnumberThe section width.
dInputnumberThe section height.
tFInputnumberThe flange thickness.
tWInputnumberThe web thickness.
widthnumberThe width of the drawing area.
heightnumberThe height of the drawing area.
unitsstringThe unit string for the dimensions.
axisbool or objectfalse is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn channel.

drawTSection#

Draws a T Section.

ParameterTypeDescription
colorstringThe color of the t section.
bInputnumberThe section width.
dInputnumberThe section height.
tFInputnumberThe flange thickness.
tWInputnumberThe web thickness.
widthnumberThe width of the drawing area.
heightnumberThe height of the drawing area.
unitsstringThe unit string for the dimensions.
axisbool or objectfalse is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn T Section.

drawAngle#

Draws a Angle Section.

ParameterTypeDescription
colorstringThe color of the angle.
bInputnumberThe section width.
dInputnumberThe section height.
tFInputnumberThe flange thickness.
tWInputnumberThe web thickness.
widthnumberThe width of the drawing area.
heightnumberThe height of the drawing area.
unitsstringThe unit string for the dimensions.
axisbool or objectfalse is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn Angle Section.

drawHatSection#

Draws a Hat Section

ParameterTypeDescription
colorstringThe color of the hat section.
b1InputstringThe top flange width.
b2InputstringThe bottom flange width.
dInputstringThe section height.
tFInputnumberThe flange thickness.
tWInputnumberThe web thickness.
widthnumberThe width of the drawing area.
heightnumberThe height of the drawing area.
unitsstringThe unit string for the dimensions.
axisbool or objectfalse is default for no axis, otherwise an Axis Object

Returns: string - The SVG HTML representing the drawn Hat Section.

Axis Object#

The axis object can contain the following key-value pairs. The object can be set to false to exclude the axis. An empty {} object can be used to include the default axis.

PropertyDefault ValueDescription
vertical_label'Z'The label for the vertical axis.
horizontal_label'Y'The label for the horizontal axis.
vertical_color'blue'The color for the vertical axis.
horizontal_color'green'The color for the horizontal axis.
axis_size'small'The size of the axis. "small", "medium", "large".

Example Code#

In the ui.js file:

var section_drawer = SectionDrawer();
svg_html = section_drawer.drawRectangularTube(
'black',
100,
200,
10,
12,
300,
150,
'mm',
false
);
div_input = jQuery('#div_input')
div_input.html(svg_html)

In the calculate.js file:

let sectionDrawer = SectionDrawer;
svg_html = sectionDrawer.drawRectangularTube(
'black',
100,
200,
10,
12,
300,
150,
'mm',
false
);
ReportHelpers.print("", svg_html, "");

In the ui.js with axis object:

var axis = false;
if (input.show_axis) {
axis = {
vertical_label: input.vertical_axis_label,
horizontal_label: input.horizontal_axis_label,
vertical_color: input.vertical_axis_color,
horizontal_color: input.horizontal_axis_color,
}
}
var section_drawer = SectionDrawer();
svg_html = section_drawer.drawRectangularTube(
'black',
100,
200,
10,
12,
300,
150,
axis
);
div_input = jQuery('#div_input')
div_input.html(svg_html)

Sample Calculator#

You can find a sample calculator to view all the options for SVG Section Dimensions here.