How to Embed Interactive Parts Manuals with Composer
Interactive Product Content
SOLIDWORKS Composer has the ability to create interactive SVG files from your CAD models that can be added to your website such as this example below. Hover over the components to see them highlight the corresponding row in the BOM and click on any sub-assembly to navigate to a page with more details.
HTML Code
The cross-highlighting and linking features are native capabilities in Composer, and SVG files are very efficient and infinitely scalable because they are vector images. To embed an SVG into a web page you simply need to add some very basic HTML code to the web page code, or add an HTML widget as above. Here is some sample HTML code you can use. Note that not all of the code is required when embedded.
<!DOCTYPE html>
<head>
<title>YOUR TITLE HERE</title>
</head>
<body onload=”onLoad()” style=”margin: 5 5 5 5″>
<div style=”border-width: medium; border-color: Black; border-style: groove; margin: 20px;”
width=”100%” height=”100%”>
<embed src=”https://mlc-cad.com/downloads/Online Manual/4240.svg” width=”100%” height=”100%” type=”image/svg+xml” />
</div>
</body>
</html>
How to Create Interactive SVG Files
Ready to build a similar guide for your products? Check out this webinar where our expert Kali Gonzalez covers the process step-by-step, including adding navigation to get back to the top level or skip to other resources. You can also contact us about Training or get help from our team building this type of content for your products.
About the author
While Marcus has been a SOLIDWORKS Applications Expert with MLC CAD Systems in Oklahoma for over a decade, his knowledge extends into all product lines MLC offers. More than once, he has held the prestigious title of the world’s most certified SOLIDWORKS AE. He actively supports the user group community and is known for his improv comedy tips and tricks sessions. Connect with Marcus on LinkedIn to discuss your project.
