SVG & PDF Export

February 2023

New for v74, Circuit now supports single sheet, or even entire project export to SVG & HTML for dynamic view and interaction in a web browser plus export to a PDF file.

Scalable Vector Graphics is a file format that saves 2D shapes, including rectangles, ellipses, polygons and text, etc, in co-ordinate vectors of X and Y in a plain text file, SVG can be scaled without image degradation. SVG can be rendered with any modern web browser and it's capabilities enhanced with JavaScript and CSS technology.

Once we have created SVG, we can then optionally further process that data into PDF. (Note! The JavaScript functions will not be available in the PDF file.)

Component Data

Example of a Main device

element clicked with

it's component data

pop-up

Once the SVG is exported, simply open up the sheet HTML file (or the Index.html when a whole project is exported) in your web browser and enjoy...

Sheets are 'zoomable' without loss of fidelity or introduction of pixelation/artifacts
Sheets are printable to any scale
For ready reckoning, a circular marker dot is placed near every Main Element device that may have component data
Main Elements can then be clicked with a pop-up to show thier entire Component Data and Quantities
Interruption Points, Main/AUX./NO/NC and Contact Table may also be made "hot-links" and clickable to navigate the whole project
The optional Index.html page can include Project Comments if required
Projects can be used on the shop floor with large screen displays adjacent to where electrics are being assembled
SVG Projects may be served from your company web server and updated dynamically without reproducing printed copies/paper waste

Below are the setup and use procedures for using the SVG Export feature...

Getting Started

With a Circuit project loaded, choose File > Export > SVG Web/PDF

Note! When you only load a project and do not double-click into any sheet the SVG Export will NOT include the Border (if any). Equally, the Border file can also be hidden by use of the F12 (Show/Hide Border) feature if a project IS fully loaded

SVG Export Options

Use the [...] browse button to select the target output folder
Select [ ] Add WaterMark to apply to your required info text on every SVG/HTML page rendered, specify it's X and Y location

Select [ ] Create Index.html for a navigational home page that leads to all other pages with hyper-links

Select [ ] Include sheet comments to add to the Index page links

Select [ ] Add Navigation Bar to each page to add a |<< Prev | Home | Next >>| type bar at the top of each web page created

Select [ ] Include current Sheet Title to optionally add the title of the current sheet being displayed in the Nav Bar

Select [ ] Add Component Data to provide dynamic pop up's for each main device when clicked in the browser

Select [ ] Create XREF Hyper-Links in HTML to literally provide navigable click links for Interruption Points, Main/AUX./NO/NC and Contact Tables.

The feature will place a message below the target of a XREF Link destination, enter the required message in your own language to suit.

The message will be displayed for the duration set in milli-seconds.

Select the Color Scheme required. This will affect both the SVG/HTML and PDF output (if selected)

If using Default Colors and Sheet Title has been selected in Section 2, then Select [ ] Use Border Color for Sheet Title to make use of the Border Color chosen for each page as the title text color.

If not using the Default Color scheme then these options will also become available...

Select [ ] Covert Images to Grayscale/Custom Colors will take images referenced on any sheet, make a copy, convert it as required and place in the Output Folder. Image filenames will be pre-pended with bwOriginal.png for Grayscale and ccOriginal.png for color and linked accordingly in the HTML

Note! If you change the Custom Colors then all previous images of that type should be manually deleted from the Output Folder, as existing files are NOT over-written

4. Select [ ] Create PDF File to additionally process the SVG/HTML into a single PDF file. (The PDF export does not currently support the dynamic navigation aspect.)

Note! This feature requires the use of Microsoft Edge Web Browser to function - which should be already installed on a Win10/11 system. It can be downloaded if required.

Choose Portrait or Landscape sheet layout for the final PDF. The actual sizing of the sheet will be scaled to fit the Sheet Dimensions of your project.

5. Zoomable in Web Browser is a better option if you want to be able to zoom right in up to 500%. 'Size & Fit' on the other hand will automatically fit the SVG to the Browser window size

6. Choose Sheet Range ( ) All to export every Sheet in your project, or just the currently ( ) Selected Sheet

7. Finally, click [Export] to begin the work. If any setting is not correct you will get a message as such.

Take care to ensure you are only exporting a Single Sheet OR entire project.

Custom Color application on a project containing many/large image files may take some time.

Once started, the progress bar to the left will indicate the processing, stage (0~100%) until completion.

Output Effects

The effects of all the options offered can be quite interesting, so experiment until you get a result you like.

Dark fore colors on a white back color work best - other combinations can get a little funky!

And be sure to delete the \Images folder content of Custom Colored images before trying a new Custom Color Scheme OR if you have since replaced/altered any images in your project since a previous export.

How to setup Sheet Titles

To setup sheet titles, open a project. Hover over a sheet node to see any existing title. To change the title select the sheet node, right-click and choose "Text", edit as required and press [OK]. Note! To delete a title enter a "-" in the dialogue then press [OK]...

How to setup Sheet Comments

To setup sheet comments open a project then choose Menu > Edit > Sheet Comments or tap CTRL + M...

You can use comments for any purpose, either to remind you of work that needs finished on a sheet, or of a component question, or in this case to draw attention to a detail that you'd like the reviewer to notice. Double-click a row to open the comment editor and enter as required. Note! To delete a comment enter a "-" in the dialogue then press [OK]...

To Export with Comments

Choose Main Menu > Export > SVG Web/PDF

When the SVG Export dialogue opens, set as follows:-

Ensure [ ] Create Index.html and [ ] Include sheet comments are both checked.

Select the target output folder.

Ensure Sheet Range (*) All is selected.

Press the [Export] button.

Once the progress bar has completed the export is done, so press [Cancel] to close.

Open the output folder and double click the "index.html" file.

Component Data Display

If you choose [ ] Add Component Data for export, then use the marker dots as a visual clue to texts that may have data attached. The dots are generally right above the texts - so click the actual text (as indicated above, NOT the dot!) to display the pop-up. If the text is a Main element of $device type and yet no data is attached then the pop-up will display a message as such.

PDF

Once exported to PDF, use Adobe Acrobat or any modern web browser to view, navigate and print.

Note! Component Data 'dots' will not be included in any PDF Export if selected.

Instead use CTRL+F in the PDF viewer to search for Component Data - assuming your project includes "Component Lists".

Hatching Issue

The SVG output attempts to fully translate the original Circuit Sheets verbatim for lines, shapes, images and texts, there is one caveat though...

Whilst Circuit supports 50+ versions of standard hatch (in-fill for shapes) as provided by the .NET architecture, SVG 1.1 does not have direct comparisons (unless uniquely scripted, which is beyond scope here), so all hatches will use a default hatch style, as shown to the below left.

Workflow

The recommended workflow for an entire project would be to create the full SVG output with an Index page and Component Data, then subsequently use the (*) Selected Sheet output method to update each sheet in comparison with reviewing the created pages in a Web Browser to get everything just so.

Note! Image files are NOT replaced if they already exist in the \images folder during updates - so if you change any images it's best to just delete the whole Output Folder contents before exporting your project anew.

That's all for SVG Web/PDF Export for now.