How CAD Programs Export 2D Drawings to SVG
Exporting 2D technical drawings from Computer-Aided Design (CAD) software to Scalable Vector Graphics (SVG) involves translating precise, mathematically defined engineering geometry into standard XML-based vector code. This process requires reading the internal CAD entities, mapping coordinates and unit scales, converting geometric primitives into SVG-compatible paths, preserving organizational hierarchies like layers and blocks, translating line styles, and formatting text elements. The end result is a resolution-independent, web-ready vector file that accurately reflects the original engineering drawing.
1. Extraction of Geometric Entities
CAD systems store 2D geometry as precise mathematical formulas (such
as lines, arcs, circles, ellipses, and spline curves). During export,
the CAD engine traverses the drawing database and extracts these
entities. Because SVG natively supports basic shapes and vector paths,
the exporter converts CAD primitives into corresponding SVG elements: *
Lines and Polylines: Mapped to
<line>, <polyline>, or
<path> elements using move (M) and line
(L) commands. * Arcs and Circles:
Converted to native <circle>,
<ellipse>, or elliptical arc curve commands
(A) within a <path>. * Splines
(NURBS/Bézier): Converted into SVG cubic (C) or
quadratic (Q) Bézier curve commands. If an advanced spline
cannot be mapped directly, it is tessellated into a series of closely
spaced Bézier segments or polyline approximations.
2. Coordinate System and Scale Transformation
CAD programs typically use a Cartesian coordinate system where the origin \((0,0)\) is at the bottom-left and the Y-axis points upward, operating in real-world physical units (such as millimeters or inches). Conversely, SVG uses a screen-based coordinate system where \((0,0)\) resides at the top-left and the Y-axis points downward.
To bridge this difference, the export engine performs an affine
matrix transformation: 1. Y-Axis Inversion: Inverts the
Y-coordinates across the drawing height. 2. Translation and
Bounds Calculation: Calculates the bounding box of the drawing
to set the SVG viewBox and
width/height attributes. 3. Unit
Scaling: Scales real-world units into SVG user units (points or
pixels) based on the specified output scale (e.g., 1:1 or fitted to
page).
3. Layer and Block Hierarchy Mapping
Organizational structures in CAD drawings are mapped to SVG container
elements: * Layers: Exported as SVG group elements
(<g>), often retaining the CAD layer names as
id or class attributes (e.g.,
<g id="Centerlines">). * Blocks and
Symbols: Reusable components are defined once in the SVG
<defs> section and referenced throughout the document
using <use> elements, minimizing file size and
preserving drawing structure. * Visibility: Frozen or
hidden layers are either omitted entirely or given a
display="none" or visibility="hidden"
attribute.
4. Translation of Line Properties and Styles
Technical drawings rely on standardized line weights, colors, and
patterns (such as hidden lines or centerlines). The export engine
translates these properties into SVG presentation attributes or inline
CSS: * Stroke Color: Mapped to the stroke
attribute using hex codes or RGB values. * Line Weight:
Mapped to stroke-width, scaled appropriately to match the
target viewport resolution. * Line Patterns: Converted
to the stroke-dasharray attribute, defining the exact
lengths of alternating dashes and spaces. * Caps and
Joins: Translated using stroke-linecap and
stroke-linejoin to maintain precise corner and endpoint
geometry.
5. Text and Dimension Handling
CAD drawings contain annotations, dimensions, and title block text.
Exporters handle these using one of two methods: * Live
Text: Preserved as native <text> and
<tspan> elements containing font family, size,
alignment, and transform attributes. This keeps the text selectable and
searchable, though it requires the viewing environment to have the
specified font installed. * Outlined Text: Converted
directly into vector paths (<path>). While this
removes text searchability, it guarantees that custom CAD fonts,
symbols, and geometric tolerance callouts display identically on any
device without font-substitution errors.
6. Code Optimization and Output Generation
In the final stage, the exporter compiles all elements into an XML
tree, optimizes the data, and writes the .svg file.
Optimization routines often round floating-point coordinates to a
user-defined decimal precision to reduce file size, strip unused
definitions, and ensure XML compliance for broad browser and vector
editor compatibility.