This topic comes up with almost every end user of 3DVia Composer, CATIA Composer, or SOLIDWORKS Composer (guess what, they are the same program). You use the tools to create great looking content, without going into Illustrator or going back to a design engineer and as for new screens from CAD. So now how do I deliver this to the end user. Well you’ve got some options. First being just use the composer player. This is very nice if you are using it internally for work instructions on the shop floor, but you do need to have a computer that will support players need for good OpenGL graphics sometimes that can be tough. You could publish a HTML or PDF of the Composer content, but that requires the Composer Player be installed on the consuming computer. Another option is the High Resolution Workshop to create raster image output ( raster meaning pixels), to be put into a technical document. But the more high-resolution images you use the file size can go up on the document. So our suggestion to maintain some interactively, high fidelity, and smaller file size is SVG (scalable vector graphics).

Raster Vs Vector

Below is a slide I gave at SOLIDWORKS WORLD in 2013 called “Product Marketing Communication with SolidWorks Tools”. It illustrates that images like JPEG, PNG, & BMP are comprised of pixel and have a finite resolution, meaning that get blurry the closer you get to them or blow them up. Vector files like eps, cgm, ai & svg are based upon lines and keep a smooth look and feel no matter how close you get to them or how much you scale them.

SVG benefits

With raster images you need an image editing software like Adobe Photoshop or heavens forbid Microsoft Paint (Sorry if someone won’t fork over Photoshop bucks, but Paint is painful) to get edits and tweaks done. With an SVG file, you can do that in a text editor, I prefer notepad ++. The reason for this is simple SVG files are encoded in XML. If you know anything about CSS (cascading style sheets) to control the look and feel of your SVG output. Because these files are XML based they work on any web browser as a view and supports any HTML5 editing you’d like to do to the files. SVG image output allows your customers the ability to view your content on a cellular phone from a work-site to fix a problem fast.

SOLIDWORKS Composer How to we create SVG files.

SVG vector files are generated by the Technical Illustrations Workshop in SOLIDWORKS Composer. The following four area in the main section are things you should consider.

1. Output area items Lines, Color Regions and Shadows: You definitely need to output lines, but do you need colors and shadows each area up to you, but my person preference is Lines and Colors, with no shadows.
2. Global Line Width: This is a multiplier for every outline and silhouette created below. If the complete image is a little light on the weight, change this number up and down to globally change them all (no ring of power required).
3. Outlines: This governs the way Composer creates the lines of the illustration. You have the options of “Construction, Sharp Edges, and Smart Outlines”. My preference here is smart outlines, as it eliminates unneeded lines created by fillets that don’t lot all that great in a illustration but are ok in CAD.

1. Silhouettes: This method governs what the outline of the thickest line in the illustration. Please see the options below.

Creating links from one SVG output to another in SOLIDWORKS COMPOSER

So the links can be attached to any ACTOR inside of Composer. Below are some things I linked to in this project, as you can see I linked just about anything that would make for good navigation.

Most people when they start learning composer will do the following.

1. Select the actor to add the link on.
2. Go to the Link property under the Events category in the properties pane
3. Then click the … menu button
4. Select the file they want to link with. (This will create a link to the absolute path of that file, if you plan on moving this to the web site that’s a problem)
5. Close the dialog
6. Then forget to update their view and never have anything work.

Here is the method that I use.

1. Select the actor to add the link on.
2. Go to the Link property under the Events category in the properties pane
3. In the Link properties field manually type in the name that will be the name of your SVG file that you will be linking with. This will be relative path and will update when moved. Example my path for one image is “SVG3.svg” when I type is in, but when I link to it through the Link properties menu dialog would be “C:UsersbmcgaugheyDesktopSVGSVG3.svg”
4. After creating all the paths to SVG files I plan on creating I will right mouse button click on that view and click update view to commit those changes to memory.
5. Finally, I’ll use the Technical Illustrations Workshop to output my SVGs and move them over to my website.

I think I’ll go back and create a YouTube video of all of this. If you find that would be valuable, please comment below and let us know.

If the iframe below doesn’t load, please click this link to see this SVG example in action. http://www.cadtoystore.com/3292018/
[raw]

[/raw]

Cheers,

Bob McGaughey, CSWE

CATI