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.
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.
Change “tmp.svg” to “Main.svg” in this example, but you will change the .svg to match further views that get previewed and copied.
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:
https://www.dasisolutions.com/users/Darin/BlogFiles/SVGtoHTMLblog10-29-12/Main.html
***
Darin Grosser is a SolidWorks Elite Application Engineer, Certified SolidWorks Expert and a senior member of the technical staff at DASI Solutions, a SolidWorks Value Added Reseller with locations throughout Michigan and Indiana. He is a regular contributor to the DASI Solutions Blog.
Want to try out 3DVIA Composer? You can download a free trial on our website.
Want to see how SolidWorks can help you win new business and get to market faster? Request a SolidWorks demo today.