{"id":134,"date":"2012-11-15T10:24:37","date_gmt":"2012-11-15T15:24:37","guid":{"rendered":"https:\/\/example.org\/interactive-scalable-vector-graphic-files-from-3dvia-composer"},"modified":"2013-07-22T16:09:11","modified_gmt":"2013-07-22T16:09:11","slug":"interactive-scalable-vector-graphic-files-from-3dvia-composer","status":"publish","type":"post","link":"https:\/\/blogs.solidworks.com\/solidworksblog\/2012\/11\/interactive-scalable-vector-graphic-files-from-3dvia-composer.html","title":{"rendered":"Interactive Scalable Vector Graphic Files from 3DVIA Composer"},"content":{"rendered":"<p><a href=\"https:\/\/www.solidworks.com\/sw\/products\/3dvia-composer-product-communication-software.htm\" target=\"_self\">3DVIA Composer<\/a> 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.<\/p>\n<p>\n<iframe loading=\"lazy\" frameborder=\"0\" height=\"253\" src=\"https:\/\/www.youtube.com\/embed\/wJJB9ZUFNzM\" width=\"450\"><\/iframe>\n<\/p>\n<h3><strong>It All Starts with BOM Views<\/strong><\/h3>\n<p>\nSVG files from Composer have an \u2018automatic\u2019 foundation of interaction built in to them by the BOM ID\u2019s and callouts placed in the views with the BOM Workshop.\n<\/p>\n<p>Once the BOM ID\u2019s 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.\n<\/p>\n<p>Before we save the SVG files, we need to create the \u2018navigation\u2019.\n<\/p>\n<h3><strong>Links to Almost Anything<\/strong><\/h3>\n<p>\nIn 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.\n<\/p>\n<p>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.\n<\/p>\n<p>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.\n<\/p>\n<p>To \u2018jump\u2019 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.\n<\/p>\n<p>TIP: For this example I\u2019ve 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.\n<\/p>\n<h3><strong>Save, Copy, Edit and Repeat<\/strong><\/h3>\n<p>\nOnce the navigation links have been created, it\u2019s simply a matter of previewing each of the views with the proper Technical Illustration settings.\n<\/p>\n<p>The preview will appear in Internet Explorer (IE) and will show the local path to the \u2018temporary\u2019 SVG image and the supporting HTML frame.  THIS \u2018HTML frame\u2019 is the key to capturing properly formatted SVG images.\n<\/p>\n<p>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.\n<\/p>\n<p><a href=\"https:\/\/blog.dasisolutions.com\/wp-content\/uploads\/2012\/11\/winexplorer-rename.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"Rename SVG and HTML\" height=\"170\" src=\"https:\/\/blog.dasisolutions.com\/wp-content\/uploads\/2012\/11\/winexplorer-rename.png\" title=\"winexplorer-rename\" width=\"450\" \/><\/a>\n<\/p>\n<p>Once there, rename the SVG and HTML files based on your chosen Navigation naming.\n<\/p>\n<p style=\"text-align: center;\">Example:  tmp.svg -&gt; Main.svg&#0160;&#0160;&#0160;&#0160;&#0160;&#0160;          tmp_svg.html -&gt;  Main.html<\/p>\n<p>\nLastly, don\u2019t forget to rename the path to the SVG file in the HTML code itself.\n<\/p>\n<p>Right-click the HTML file and Open With NOTEPAD to edit the HTML code. You don\u2019t need a full blown HTML editor for this.\n<\/p>\n<p><a href=\"https:\/\/blog.dasisolutions.com\/wp-content\/uploads\/2012\/11\/notepad-tempsvg.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"Notepad temp SVG\" class=\"alignnone size-full wp-image-2190\" height=\"180\" src=\"https:\/\/blog.dasisolutions.com\/wp-content\/uploads\/2012\/11\/notepad-tempsvg.png\" title=\"notepad-tempsvg\" width=\"450\" \/><\/a>\n<\/p>\n<p>Change \u201ctmp.svg\u201d to \u201cMain.svg\u201d in this example, but you will change the .svg to match further views that get previewed and copied.\n<\/p>\n<p><a href=\"https:\/\/blog.dasisolutions.com\/wp-content\/uploads\/2012\/11\/notepad-rename.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"Rename in notepad\" class=\"alignnone size-full wp-image-2191\" height=\"110\" src=\"https:\/\/blog.dasisolutions.com\/wp-content\/uploads\/2012\/11\/notepad-rename.png\" title=\"notepad-rename\" width=\"455\" \/><\/a>\n<\/p>\n<h3><strong>Test the Results<\/strong><\/h3>\n<p>\nOnce you have previewed, copied, pasted and renamed a couple of views, now is the time to test how things are working.\n<\/p>\n<p>Open the \u2018main.html\u2019 file and see how it looks. It should open in IE and have the desired \u2018frame\u2019 formatting that the preview had. Then click on the Actors to see if they are navigating to the other HTML pages you\u2019ve created.\n<\/p>\n<p>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.\n<\/p>\n<p>The data created for this article can be viewed at:<br \/>\n<a href=\"https:\/\/www.dasisolutions.com\/users\/Darin\/BlogFiles\/SVGtoHTMLblog10-29-12\/Main.html\">https:\/\/www.dasisolutions.com\/users\/Darin\/BlogFiles\/SVGtoHTMLblog10-29-12\/Main.html<\/a>\n<\/p>\n<p style=\"text-align: center;\">***<\/p>\n<p><a href=\"https:\/\/www.dasisolutions.com\/index.php\/company\/meet-the-team\/259-darin-grosser\" target=\"_blank\">Darin Grosser<\/a> is a SolidWorks Elite Application Engineer, Certified SolidWorks Expert and a senior member of the technical staff at <a href=\"https:\/\/dasisolutions.com\" target=\"_blank\">DASI Solutions<\/a>,  a SolidWorks Value Added Reseller with locations throughout Michigan and Indiana. He is a regular contributor to the <a href=\"https:\/\/blog.dasisolutions.com\/\" target=\"_self\">DASI Solutions Blog<\/a>.<\/p>\n<p>Want to try out 3DVIA Composer? You can download a <a href=\"https:\/\/www.solidworks.com\/sw\/support\/3dVia_eval.htm?scid=sm_bl_composereval\" target=\"_self\">free trial on our website<\/a>.<\/p>\n<p>Want to see how SolidWorks can help you win new business and get to market faster? <a href=\"https:\/\/www.solidworks.com\/pages\/demo\/product-demonstration.htm?mktid=2431%20\" target=\"_self\">Request a&#0160; SolidWorks demo today<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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<\/p>\n... <a href=\"https:\/\/blogs.solidworks.com\/solidworksblog\/2012\/11\/interactive-scalable-vector-graphic-files-from-3dvia-composer.html\">Continued<\/a>","protected":false},"author":60,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15,16],"tags":[200,201],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-solidworks-composer","category-tips-tricks","tag-scalable-vector-graphics","tag-3dvia-composer"],"acf":[],"_links":{"self":[{"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":0,"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.solidworks.com\/solidworksblog\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}