Your Source for SolidWorks, Simulation, EPDM, 3DVIA and 3D Printing

Interactive Scalable Vector Graphic Files from 3DVIA Composer

3DVIA Composer has long had the ability to save Views as Scalable Vector Graphics (SVG) files viewable with a web browser. However, there is a trick to getting nicely formatted SVG files to show on HTML web pages, and it all comes from the PREVIEW.


It All Starts with BOM Views

SVG files from Composer have an ‘automatic’ foundation of interaction built in to them by the BOM ID’s and callouts placed in the views with the BOM Workshop.

Once the BOM ID’s and callouts are placed in the views, and the BOM is shown, the Technical Illustration Workshop will assist us in saving the SVG images with the proper line weights and effects for our vector graphics images.

Before we save the SVG files, we need to create the ‘navigation’.

Links to Almost Anything

In 3DVIA Composer, one can hyperlink any actor to nearly any location, whether it be HTTP, FTP, a file on the network, or any point or portion of an animation in the Composer file.

It is best to setup what you would like each SVG view to be called, and determine a naming convention that is consistent and easy to apply.

By setting up a navigation structure ahead of time, the creation of the interactive content is reduced to a repetitive series of steps, and the result is immediately usable.

To ‘jump’ from one place to another, link a Geometry or Collaborative actor to a location by selecting one or several actors, then in the Property Manager, select the LINK box.  You will be prompted for the TYPE of link and the PATH of that link.

TIP: For this example I’ve setup links that are path independent and relative to the folder the content is saved. This way, you can move the main folder to any computer or website and the links will still work.

Save, Copy, Edit and Repeat

Once the navigation links have been created, it’s simply a matter of previewing each of the views with the proper Technical Illustration settings.

The preview will appear in Internet Explorer (IE) and will show the local path to the ‘temporary’ SVG image and the supporting HTML frame.  THIS ‘HTML frame’ is the key to capturing properly formatted SVG images.

While the preview is still showing in IE, navigate to the path in the address bar using Windows Explorer. There you will see 5 files, but we only need to copy and paste the .SVG and .HTML files to the final destination folder.

Rename SVG and HTML

Once there, rename the SVG and HTML files based on your chosen Navigation naming.

Example:  tmp.svg -> Main.svg          tmp_svg.html ->  Main.html

Lastly, don’t forget to rename the path to the SVG file in the HTML code itself.

Right-click the HTML file and Open With NOTEPAD to edit the HTML code. You don’t need a full blown HTML editor for this.

Notepad temp SVG

Change “tmp.svg” to “Main.svg” in this example, but you will change the .svg to match further views that get previewed and copied.

Rename in notepad

Test the Results

Once you have previewed, copied, pasted and renamed a couple of views, now is the time to test how things are working.

Open the ‘main.html’ file and see how it looks. It should open in IE and have the desired ‘frame’ formatting that the preview had. Then click on the Actors to see if they are navigating to the other HTML pages you’ve created.

If everything is linking properly, you can do anything from zipping the folder and sending it to your consumers whether they be internal or external to your organization, or you may place these files on your website for mass distribution.

The data created for this article can be viewed at:
http://www.dasisolutions.com/users/Darin/BlogFiles/SVGtoHTMLblog10-29-12/Main.html

If you are using IE versions later than IE9 and encounter problems seeing the SVG file, you may download the SVG viewer at http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.02/en/SVGView.exe.

Hope you find this useful. Until next time,

Darin GrosserDarin J. Grosser
Engineer – CSWE – Elite AE
DASI Solutions, LLC

This entry was posted in Tips & Tricks and tagged , , . Bookmark the permalink.
US

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>