CADViewer, with it’s flexible design and use of standard toolkits, can be integrated with any Database Management Application and be used with a multitude of custom data-driven applications.

This Tutorial

This tutorial describes the extension to SVG produced by the CAD converter AutoXchange 2020, that CADViewer utilizes for unit transformations, page-change, dimensioning, etc. when modelling a DWG file as SVG.

This tutorial contains the following sections:

Please reference our Download section, to download AutoXchange 2020 and CADViewer to test with your own files.

1: cadviewer_worldUnits

AutoXchange represents a number of Unit variables that AutoCAD DWG exposes in the cadviewer_worldUnits matrix in the <metadata> section:

<text id="cadviewer_worldUnits">
{ "globalOrigin": { "x": -7101.72, "y" : 15047.9}, 
						"units": "mm",
						"measurementType": "Metric",
						"lengthType": "Decimal",
						"lengthPrecision": 4,
						"blockUnitsFormat": "Undefined",
						"svgToWorldUnits": 5.79325,
						"worldToSVGUnits": 0.172615

Values from the originating CAD system are:

  • measurementType
  • lengthType
  • lengthPrecision
  • blockUnitsFormat

Calculated values to use in the current SVG file are:

  • svgToWorldUnits
  • worldToSVGUnits

Assumed units in drawing, as perceived by AX2020 at conversion, are:

  • units

NOTE: AutoCAD DWG does not contain a unit definition. The assumed unit definition is based on the values of: measurementType, lengthType, lengthPrecision and blockUnitsFormat in combination. The application programmer can make their own assumptions based on these settings. CADViewer includes a Calibrate command, where users can change units or recalibrate if needed.

2: cadviewer_drawingCoordinates

For the current Model or Layout, AutoXchange calculated a transformation between the DWG and SVG extents. For general distance calculation, see section 8, calculate distances.

<text id="cadviewer_drawingCoordinates">
{ "DWG": 
    { "lowerLeft": { "x": -7101.72, "y" : 15047.9}, 
      "upperRight": { "x": 7118.24, "y" : 25000.7} 
    { "lowerLeft": { "x": 22.7133, "y" : 1718}, 
      "upperRight": { "x": 2477.29, "y" : 0} 
 "Drawing Height": 1718

3: cadviewer_ViewportClipping

In case of a PaperSpace Layout, where the viewport to the modelspace is clipped, the viewport path is exposed through cadviewer_ViewportClipping in the <metadata> section:

<text id="cadviewer_ViewportClipping">
{ "paths":
      [[20,15.5] , [230,15.5] , [230,35] , [326,35] , [326,292] , [20,292] ],
      [[326,292] , [326,35] , [415,35] , [415,292] ]

4: cadviewer_multiPages

Since SVG is a single page format only, AutoXchange 2020 computes a multipage navigation matrix, when the original drawing is processed for ModelSpace and all Layouts, see cadviewer_multiPages in the <metadata> section:

<text id="cadviewer_multiPages">
{ "multiPages": 3, 
                   "pages" : [
                        { "fileName":"bru_52a_basic", "pageName":"ModelSpace"},
                        { "fileName":"bru_52a_basic__Layout01", "pageName":"Pr\u00E9sentation1"},
                        { "fileName":"bru_52a_basic__Layout02", "pageName":"Pr\u00E9sentation2"}

5: Root Section

In the root section of the <defs>, a number of control variables are exposed, for application programmers the important ones are tmsNumberOfLayouts described below in Modelspace viewport classes and tmsNumberOfSVGViewports described below in SVG viewport classes.

	<style id="cv_styles" type = "text/css">
	    svg{ background-color: white; opacity: 1.}
		:root {
          --tmsMinLineWidth: 0.6;
          --tmsHLWidth: 0.6;
          --tmsNumberOfLayouts: 3;
          --tmsNumberOfSVGViewports: 1;
          --tmsMinFixedLineWidth: 0.2;
          --tmsbPostFix: 0;

6: Modelspace viewport classes

For each PaperSpace Layout, the Viewports defined into the ModelSpace are exposed as .sLO_xx classes. These class definitions contains the Scale Factor and extents of each ModelSpace Viewport

	<style id="cv_styles" type = "text/css">
		.sLO_0 {
		    scale: 1;
		    x: -62.7155;
		    y: -1.36865;
		    width: 545.431;
		    height: 299.737;
		.sLO_1 {
		    scale: 0.0199062;
		    x: 20;
		    y: 15.5;
		    width: 306;
		    height: 276.5;
		.sLO_2 {
		    scale: 0.0994258;
		    x: 326;
		    y: 35;
		    width: 89;
		    height: 257;

7: SVG viewport classes

For each PaperSpace Layout, the SVG Viewports mapping a ModelSpace Viewport are defined as .sSVGViewport__xx classes. In most cases there will be just one SVGViewport in a given Layout, but there can be multiple.

	<style id="cv_styles" type = "text/css">
		.sSVGViewport_0 {
		    x: 0;
		    y: 0.161616;
		    width: 2500;
		    height: 1767.68;

NOTE: If the SVG Viewport is a clipping mask, the .sSVGViewport__xx will be suppressed and instead represented by the cadviewer_ViewportClipping variable in the <metadata> section.

8: Calculate Distances

Distances in the drawing are calculated differently, depending if they are in ModelSpace or in the PaperSpace Layouts


Distances in ModelSpace are directly transformed using the svgToWorldUnits variable.

  distanceDWG = distanceSVG * svgToWorldUnits;

Layout with Rectangular Viewport

The distances in Layouts Viewports needs to be scaled based on the Viewport scale factor and the relative width (or height) factor between the SVG viewport and the DWG viewport into ModelSpace coordinates.

  distanceDWG = distanceSVG * sLO_1.width/(sSVGViewport_0.width*sLO_1.scale);

Layout with Clipped Viewport

The application programmer needs to calculate the clipped SVG viewport extents as defined from the path in cadviewer_ViewportClipping, and then apply the same transformation as above in Layout with Rectangular Viewport.

ENJOY - and get in touch!