DGN to SVG Converter

What is DGN to SVG Conversion?

Converting DGN to SVG is the process of transforming a MicroStation infrastructure drawing into the open Scalable Vector Graphics format, supported by every modern browser without any extensions. The contents of the source file (lines, arcs, complex chains, B-splines, multilines, hatches, cells, dimensions, text, levels) are rewritten in SVG: each geometric entity becomes a vector path with coordinates and attributes, DGN levels turn into SVG groups, hatches are described as repeating patterns, and text is preserved as an indexable element. The result is a text XML file that embeds into an HTML page, opens on any device, and scales losslessly to any size.

DGN is the binary CAD format developed by Bentley Systems and native to the MicroStation environment. It is the working format of infrastructure design bureaus: roads and railways, bridges, tunnels, metro systems, airports, hydraulic engineering objects, oil and gas linear facilities and pads, dams, large territory master plans, and land surveying materials are all designed in DGN. The file stores a drawing together with numbered named levels (Levels), geometry entities of varying complexity, cells (an analogue of blocks), hatches, dimensions, text, file references (References), user coordinate systems, and a tie to real-world geography. There are two main branches of the format: the legacy V7 and the modern V8/V8i. A unique feature of DGN that sets it apart from other CAD formats is that a single file can hold several independent models (Models), each with its own geometry and coordinate system - for example, a plan model, a longitudinal profile model, and a dozen cross-section models can all live inside one source file. Working with DGN natively requires specialised CAD software, and without it the file becomes an inaccessible source: neither a browser, nor the operating system, nor ordinary viewers can open DGN directly.

SVG is an open vector graphics standard developed by the W3C. The format was designed for the web from the start: it is natively supported by every modern browser on computers, tablets, and smartphones, embeds easily into HTML, can be styled through CSS, animated through scripts, indexed by search engines, and rendered crisply on retina displays. Geometry in SVG is described mathematically, so the same drawing can be rendered as a tiny preview icon in a catalogue and as a large hero image on a project page without redrawing and without pixelation. Because SVG is plain XML text, it can be edited in a graphics editor, in browser developer tools, or even in a plain text editor when needed.

Converting DGN to SVG turns a closed infrastructure source into a web-ready asset for online documentation, marketing pages, and interactive presentations. After conversion, a site master plan, a junction diagram, a transport network layout, a tunnel cross-section, or a fragment of a railway hub renders equally crisply on a field inspector's phone, a client's tablet, a website visitor's monitor, and a meeting room projector. There is no need for a MicroStation licence, no need for a mobile app, and no need for heavy CAD software on the receiver's side. This is a fundamentally different scenario from PDF: SVG lives inside web pages as a native interface element, reacts to mouse hovers, switches layers on click, and fits naturally into the responsive layouts of corporate websites.

Comparing DGN and SVG Formats

The key difference between the formats lies in their purpose. DGN is the working tool of an infrastructure designer: a road interchange layout, a railway hub diagram, a tunnel cross-section, or an industrial site master plan is created, refined, and finalised in DGN. SVG is the format for showing the result: it is intended for web pages, mobile screens, online documentation, browser-based presentations, and marketing landing pages of engineering bureaus. When an infrastructure drawing is converted from DGN to SVG, it moves from the closed working CAD environment to the open web, where it can be seen by an unlimited number of website visitors, corporate blog readers, online conference participants, and newsletter subscribers. DGN stays with the author as the master file for further work, while SVG goes into the open circuit: onto the company website, into the technical knowledge base, into marketing presentations, into email campaigns for contractors, and into news articles in industry publications.

When to Use SVG Instead of DGN

Publishing Infrastructure Drawings on Engineering Bureau Websites

Design institutes, engineering firms, and research organisations working in transport, hydraulic engineering, oil and gas facilities, and territorial planning constantly face the challenge of presenting their expertise through finished projects. Sections such as «Implemented Projects», «Portfolio», and «Projects» on the company website benefit from showing not only photographs but also drawings: a fragment of a junction master plan, a bridge cross-section, a tunnel profile, or a district transport network diagram. SVG offers a fundamental advantage here: the drawing is embedded into the page as part of the layout, stays crisp when zoomed on a high-resolution monitor, looks equally good on a desktop and a smartphone, is indexed by search engines, and helps the page rank for professional queries. Posting a DGN file directly on the website makes no sense - visitors cannot open it, downloading the source file appeals to almost nobody, and the content stays invisible.

Interactive Site and Master Plans

Developers of large territories, operators of industrial zones, management companies of residential complexes, and industrial park managers need interactive site plans: visitors choose a zone, click on an object, see a card with a description, and toggle layers - utilities, landscaping, construction phases. The source of such interactive maps is almost always a DGN file in which the designer prepared the original master plan. SVG turns the drawing into a live interface element: DGN levels become SVG groups, and developers attach event handlers, tooltips, and smooth transitions between states. The same SVG works in both the desktop version of the website with a detailed map and the mobile version with simplified navigation.

Project Presentations in Browsers and Mobile Apps

Infrastructure projects are discussed at urban planning councils, investment committees, technical client meetings, and public presentations. The modern format for such discussions is an online showing through a browser: a link opens on each participant's own device, with no heavy file transfers and no software compatibility issues. SVG diagrams become standard slides in such presentations: an interchange layout, a longitudinal road profile, or an isometric view of utility networks opens on an investor's laptop, a municipal officer's tablet, and a journalist's smartphone - and looks crisp and readable everywhere. This is particularly important for public consultations on transport projects, where audiences can include hundreds of participants with all kinds of devices.

Embedding into Technical Online Documentation

Large infrastructure companies maintain technical knowledge bases in modern corporate documentation systems: internal portals, regulation libraries, contractor instructions, and training materials for operations staff. SVG diagrams fit naturally into such documents: a cross-section of a collector with labelled elements, a typical joint detail, a layout of catenary supports, or a fragment of an alignment with a highlighted maintenance segment. Unlike raster images, SVG does not lose sharpness when zoomed in, prints correctly from the browser, and exports well to PDF when an article is downloaded. For operations teams this means fast access to the right diagram from any device, right on site.

Adaptive Diagrams for Marketing Materials

Infrastructure company marketing increasingly relies on digital content: landing pages for specific projects, newsletters to potential clients, and dedicated pages for tenders. Simplified SVG diagrams fit naturally into such materials: a visualisation of a transport interchange, a simplified site layout, an infographic of construction phases, or a logistics scheme of an industrial site. SVG is indispensable here because the same file looks equally crisp on a desktop banner and in a mobile version of the page, is easy to recolour to match brand styles through CSS, supports smooth animation of element appearance, and integrates seamlessly into responsive layouts.

Illustrations in Technical Blogs and Press Releases

Engineers, designers, and infrastructure project leaders run professional blogs, publish articles in industry magazines, and issue press releases. Illustrations for such materials - selected fragments of plans, simplified joint diagrams, cross-sections of structures - are most conveniently prepared in SVG. A vector diagram is easy to insert into an article editor, stays sharp when readers zoom in on a phone, and renders correctly in RSS feeds and email newsletters. If the article is translated into another language, captions in the SVG can be updated directly in the text representation of the file, without re-exporting from CAD.

Interactive Transport Project Maps on Corporate Websites

Transport operators, road builders, and companies operating linear infrastructure place interactive maps of their routes and structures on their websites. The source of such a map is often a DGN with detailed geometry of the alignment, sidings, engineered structures, and utility networks. SVG allows that geometry to be exposed through the website interface: users see the overall network diagram, hover over an interesting segment, get a pop-up with information, click and jump to a detailed description of the object. The DGN level structure becomes a logical structure of SVG groups, and the developer only needs to wire up the interaction.

Widgets on Design Bureau Websites

Bureaus that specialise in standard solutions - typical pavement structures, standard bridges for specific spans, catenary pole templates, typical cross-sections - prepare interactive widgets for their own websites. The visitor picks parameters (load, span, surface type), and the widget shows the corresponding diagram from the library. SVG is an ideal fit for this scenario: typical diagrams from the DGN library are converted into compact SVG files, loaded on demand, easily recoloured to match brand styles, and smoothly transition between options through animation. This creates the feel of a modern interactive service and gives the bureau site an edge over competitors with plain downloadable PDFs.

Technical Aspects of Conversion

Preserving the Vector Nature of Geometry

The main thing DGN to SVG conversion must do is preserve the vector data. In DGN, geometry is described by precise mathematical entities: lines are stored by endpoint coordinates, arcs and circles by centre and radius, B-splines by control points, complex chains as a sequence of elements. During conversion, each entity is rewritten with the corresponding SVG construct: a line becomes a line or path tag, a circle becomes a circle, a polyline becomes a polyline or path, a spline is approximated by curve commands inside a path with enough precision to remain visually faithful. The vector nature is fully preserved: the resulting SVG scales losslessly and renders equally crisply at any resolution.

Levels as SVG Groups

The level (Levels) structure is one of the key organisational elements of a DGN drawing. Infrastructure projects often have hundreds of levels: separate levels for existing conditions, for proposed elements, for right-of-way boundaries, for utilities of each kind, for legends and annotation. When DGN is converted to SVG, levels are transferred as named groups (g tags) with identifiers or class names matching the level names. This gives website developers a powerful tool: every level can be addressed via CSS or scripts, shown or hidden on click, highlighted on hover, animated, and used in interactive layer toggles. Levels that are hidden in the source file are typically dropped from the SVG to avoid bloating the output.

Text and Fonts

In MicroStation drawings, text is set in proprietary numbered fonts, in TrueType fonts from the system, and often in custom corporate fonts used for title blocks. During conversion to SVG, text can either remain a text element (the text tag) or be converted to curves (a path tag). A text element preserves editability, selection with the mouse, copying to the clipboard, and indexing by search engines - which is useful for SEO pages with infrastructure diagrams, where on-drawing labels help the page rank for thematic queries. Converting to curves guarantees identical visual appearance for any website visitor regardless of installed fonts but turns text into graphics that cannot be searched. The choice depends on the file's purpose: for a content page with an interactive diagram, text elements are usually better; for a marketing banner with brand-styled captions, curves are usually preferable.

Coordinate Systems and viewBox

Infrastructure DGN files often include a tie to geographic coordinates - metre-based systems, national geodetic grids, or local construction site systems. During conversion to SVG, the source coordinates are remapped into the document coordinate space via the viewBox attribute: the project geometry sits in a single coordinate system and is automatically rescaled by the browser to fit the container on the page. Length and angle ratios are preserved precisely, so the shape of the interchange, the rotation angle of a tunnel, and the curvature of a railway curve remain proportional. If desired, metadata about the original coordinate system can be written into the SVG, which is useful for later use of the diagram in GIS-driven maps.

Large Diagrams and Size Optimisation

Infrastructure DGN files are often very large: a linear object of dozens of kilometres, an industrial site master plan of several hectares, or a consolidated district model can contain hundreds of thousands of entities. A one-to-one export to SVG would yield a heavy file that loads slowly and lags on weaker devices. The service takes web-specific considerations into account during conversion: coordinate precision is limited to a sensible number of decimals, repeating definitions (such as standard cells) can be expressed via the symbol tag with reusable use references, which keeps the file size down. For web publishing, it almost always makes sense to export only a relevant fragment or a specific model - for example, just the master plan without the detailed pavement structure.

Multi-Model DGN Files

A unique feature of DGN is the ability to hold several independent models (Models) inside one file. In practice, a single project DGN can contain a plan model, a longitudinal profile model, separate cross-section models per station, a situation model, and a terrain model. SVG, by its standard, describes one root document per file. When converting a multi-model DGN, the service either exports each model into its own SVG file (which is usually more convenient for web publishing) or assembles selected models into one SVG as groups. Before converting a large multi-model DGN, decide in advance which models should end up in the web output: a general plan is typically enough for a home page, while a detailed project page benefits from a set of diagrams covering key sections.

Which Files Are Best Suited for Conversion

Ideal candidates:

• Completed site and territory master plans for publication on websites of design bureaus, construction firms, and developers of large territories
• Diagrams of transport interchanges, junctions, and hubs for interactive maps and presentation materials
• Road and railway alignment plans for illustration in portfolios and press releases
• Typical pavement cross-sections and structural details for catalogues of standard solutions on bureau websites
• Bridge, tunnel, and engineered structure cross-sections for technical documentation and training materials
• Utility network diagrams (water supply, drainage, catenary) for online instructions and regulations
• Isometric views of industrial sites and oil and gas facilities for marketing landing pages
• Plan fragments and structural details for illustrating articles in industry publications and corporate blogs

Suitable with caveats:

• Multi-model DGN files with many models - decide in advance which model is needed for web publication so you do not end up with an oversized file
• Drawings with large numbers of complex hatches - hatches may be exported as repeating patterns; consider simplifying them before conversion
• Files with many file references - make sure that required underlay files are attached or merged into the main file before conversion
• Very large consolidated territory models - export only a relevant fragment or a specific model to keep the page light
• Drawings with proprietary numbered MicroStation fonts - decide in advance whether to convert text to curves for visual fidelity or keep text elements for search indexing

Not worth converting:

• Unfinished working versions still being actively edited in CAD - SVG is not a CAD source and cannot replace the editing workflow
• Files intended for further processing in GIS systems or for handover of geometry to adjacent design sections - dedicated exchange formats are better suited
• Full 3D models - SVG is two-dimensional, so a flat view (plan, section, isometric) must be prepared before conversion
• Very detailed as-built drawings with multiple reference dependencies - formats designed to preserve precision and parametric data are more appropriate

Benefits of the SVG Format

SVG offers infrastructure design a number of advantages for web publishing, marketing, technical online documentation, and interactive services that no other format provides.

Native support in every browser. SVG opens in every modern browser on computers, tablets, and smartphones without extensions and without a dedicated viewer. The file embeds into HTML as an img tag, as inline markup directly in the page code, or as a CSS background - and in every case displays correctly for any site visitor. For an infrastructure company this means that a diagram published on the website is accessible to every potential client and partner from any device.

Lossless scaling at a touch on any screen. Vector content in SVG has no fixed resolution: the same file looks perfect both as a tiny catalogue thumbnail and as a large hero image on a project page, and as a large banner on the home page. A visitor on a smartphone pinches to zoom into an interesting fragment of an interchange diagram and sees, instead of pixelation, the same crisp lines as on first load. This is critical for infrastructure diagrams where details matter: pole positions, junction transitions, and intersection geometry.

Styling through CSS. Line colours, stroke widths, opacities, and element visibility in SVG are set through CSS rules. This makes it easy to support brand styles: the same diagram is recoloured for the design bureau's brand, for the colour scheme of a specific section, and for the dark theme of a mobile app. On hover, line colours can change, level groups can be highlighted, and selected areas can light up. If the company changes its brand colour, there is no need to re-export diagrams from CAD - updating a single CSS variable refreshes every SVG on the site automatically.

Search engine indexing of text. Search engine crawlers read text inside SVG: headings on the diagram, labels on junctions, names of segments. This provides a direct SEO benefit for pages with infrastructure diagrams: textual labels help the page rank for relevant queries and bring in targeted traffic. For design bureaus that rely on the website to attract clients, this is an important advantage over raster images, where text is invisible to search engines.

Adaptive rendering on retina displays. Modern mobile devices and computers use high-density displays where raster graphics look blurry unless prepared at the right resolution. SVG does not depend on pixel density - the vector representation is rendered by the browser pixel by pixel for each device and always looks sharp. This removes the burden of preparing and maintaining multiple versions of illustrations for different resolutions.

Built-in interactivity. SVG reacts to user actions: clicks, hovers, touches, and scrolling. Developers attach event handlers to individual elements and groups, and the diagram becomes a live interface. The visitor clicks on a road segment and sees a card describing the project, hovers over a bridge pier and gets its characteristics, ticks a checkbox and sees which utilities run on a given section. Without a vector source it is impossible to build such scenarios - that is exactly why SVG has become the standard for interactive graphics on websites.

Animation and smooth transitions. SVG supports animation through CSS transitions and scripts. This is useful for marketing materials: on a transport project landing page, layers appear in stages - first the terrain, then the existing road network, then the proposed alignment. On a page about a bridge and tunnel crossing, an isometric view smoothly rotates while element labels fade in. Such effects make the infrastructure company's website feel modern and stand out from competitors.

Accessibility for users with visual impairments. SVG supports ARIA attributes and title and desc tags that describe the image to screen-reader software. This is important both for compliance with web accessibility standards, which are mandatory for government websites and for large enterprises, and for broadening the site's audience.

Small footprint for typical diagrams. A vector diagram in SVG typically takes significantly less space than an equivalent high-resolution raster image. This speeds up page loading and saves mobile users' traffic - which is critical when the visitor is on a slow connection or a metered mobile plan.

Limitations and Recommendations

The main limitation is that SVG does not replace the working CAD format. Parametric relationships between objects, multi-model structure, ties to geodetic coordinates, dimension styles, and associative dimensions in DGN exist as «live» entities that turn into purely final graphics inside SVG. After conversion, you cannot make changes «the same way as in MicroStation»: SVG is the final asset for publication, not an alternative project source. If further editing of the geometry is planned, keep the original DGN and export a new SVG each time.

The second limitation is 3D content. SVG is two-dimensional, and 3D terrain models, volumetric representations of structures, and shaded isometric views cannot be transferred directly. A flat view must be prepared before conversion: a plan, a section, a facade projection, or a simplified isometric. This is standard practice for web publication of infrastructure projects: a clear flat diagram is almost always preferable to a volumetric model online.

The third limitation involves very large consolidated DGN files. Linear objects of several dozen kilometres, master plans of large industrial parks, and district-wide consolidated models can produce heavy SVG files when exported one-to-one. For web publishing, export only the necessary fragment or a specific model: a general district diagram without detailed level structures for the home page, and a set of key node diagrams for the detailed project page.

The fourth limitation concerns fonts. If a DGN uses corporate TTF fonts and they are not provided to the site as web fonts, visitors may see a substituted font in the SVG text. This is critical for title blocks, dimension annotations, and brand captions. Before publishing on the website, either connect the corresponding web font through CSS or convert critical labels to curves - this makes the file heavier but eliminates the risk of font substitution across different visitors.

The fifth limitation relates to the differences between V7 and V8/V8i. Legacy V7 DGN files may be converted with simplifications of certain user-specific decoration elements, since V7 is outdated and gradually leaving circulation. If the file was created long ago, it makes sense to open it in a modern CAD version and save it as V8 first to get a more stable result.

If the SVG is being prepared for a website, perform optimisation after conversion: reduce coordinate precision to a sensible number of decimals, remove service metadata, and simplify rarely used groups and unused definitions. This shrinks the file and speeds up page loading, especially on mobile devices. For interactive scenarios, keep meaningful level names - they become identifiers and class names in the SVG and simplify the developer's work. If the SVG is intended to be printed from a page, add separate CSS rules for the print media query so that line widths stay readable on paper and colours map correctly into black-and-white output. For interactive maps with many elements, consider a lazy-loading approach: show a simplified overview diagram first and load detailed SVGs on demand as the user explores.