Create interactive SVG graphics for online spare parts pages

A spare parts page contains a technical illustration with callouts and a table that lists the available parts and relevant part information. The steps to create interactive SVG files for online spare parts pages in Corel DESIGNER are outlined below, and detailed in the procedure that follows.

First, create a new document, and import the file that contains the illustration as a linked file. For more information about linked files, see To import an externally linked file.

Then, import the Excel Workbook (XLS or XLSX) or Comma-separated Values (CSV) file that contains information about the spare parts. Format the table text and header rows as needed. For more information, see Format tables and cells.

You can sync the linked illustration or table with their sources at any time; however, any changes that you have made to the linked objects in the current project will be lost. You can also break the link between the linked and source files and edit them independently of each other.

Next, assign data to the callouts in the illustration, the objects identified by the callouts as well as the rows in the table. When you assign the same interactive-id and mouseover effect to a callout, an object and a table row, they all change when you point to one of them in the exported file. For more information, see Apply InteractiveSVG data to objects.

Finally, export the Corel DESIGNER document to SVG.

An example of an interactive SVG graphic that can be used on a spare parts page. Point to a callout or a row in a table to see the outline change its width and color.

To create an interactive SVG graphic for an online spare parts page

2 In the Sources docker (Window Sources), click the Add linked file button, browse to the file that contains the illustration, and import it.

3 In the Sources docker (Window Sources), click the Add linked file button, browse to the Excel Workbook (XLS or XLSX) or Comma-separated Values (CSV) file that contains information about the spare parts, and import it.

5 In the Object Data docker (Window Object Data), choose Interactive SVG from the list box, and assign data to the callouts, objects, and table rows.

We recommend that you add the InteractiveSVG object data to the source file of the illustration so that the object data is not overwritten when you sync the linked file with the source. Make sure to use the same interactive-id for the callout, object, and table row that you want to change simultaneously in the exported file. You can open the source file for editing by clicking the Open source file button in the Sources docker.

6 Click File Export, and choose SVG - Scalable Vector Graphics from the File format list box.

To export multiple pages to interactive SVG files, use the Export docker to export all pages at once by using the same settings. For more information, see Export objects and pages.