Separate file for svg loader.

sandbox/embed_selfhost_errors.html

@@ -51,6 +51,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>

sandbox/embed_selfhost_externallibs.html

@@ -51,6 +51,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>

sandbox/embed_selfhost_fullscreen.html

@@ -50,6 +50,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>

sandbox/embed_selfhost_manual.html

@@ -51,6 +51,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>

sandbox/embed_selfhost_multiple.html

@@ -51,6 +51,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>

sandbox/embed_selfhost_single.html

@@ -50,6 +50,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>

sandbox/embed_selfhost_single_scroll.html

@@ -50,6 +50,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>

source/import/importersvg.js

@@ -0,0 +1,85 @@
+OV.ImporterThreeSvg = class extends OV.ImporterThreeBase
+{
+    constructor ()
+    {
+        super ();
+    }
+
+    CanImportExtension (extension)
+    {
+        return extension === 'svg';
+    }
+
+    GetUpDirection ()
+    {
+        return OV.Direction.Z;
+    }
+
+    GetExternalLibraries ()
+    {
+        return [
+            'three_loaders/SVGLoader.js'
+        ];
+    }
+
+    CreateLoader (manager)
+    {
+        return new THREE.SVGLoader (manager);
+    }
+
+    GetMainObject (loadedObject)
+    {
+        function ShowFill (path)
+        {
+            const style = path.userData.style;
+            if (style.fill === undefined || style.fill === 'none') {
+                return false;
+            }
+            return true;
+        }
+
+        function ShowStroke (path)
+        {
+            const style = path.userData.style;
+            if (style.stroke === undefined || style.stroke === 'none') {
+                return false;
+            }
+            return true;
+        }
+
+        let object = new THREE.Object3D ();
+
+        let fillsObject = new THREE.Object3D ();
+        let strokesObject = new THREE.Object3D ();
+
+        fillsObject.name = 'Fills';
+        strokesObject.name = 'Strokes';
+
+        object.add (fillsObject);
+        object.add (strokesObject);
+
+        const material = new THREE.MeshPhongMaterial ({
+            color: 0xcc0000
+        });
+        for (let path of loadedObject.paths) {
+            const shapes = THREE.SVGLoader.createShapes (path);
+            if (ShowFill (path)) {
+                for (const shape of shapes) {
+                    const geometry = new THREE.ShapeGeometry (shape);
+                    const mesh = new THREE.Mesh (geometry, material);
+                    fillsObject.add (mesh);
+                }
+            }
+            if (ShowStroke (path)) {
+                for (const subPath of path.subPaths) {
+                    const geometry = THREE.SVGLoader.pointsToStroke (subPath.getPoints (), path.userData.style);
+                    if (geometry) {
+                        const mesh = new THREE.Mesh (geometry, material);
+                        strokesObject.add (mesh);
+                    }
+                }
+            }
+        }
+        return object;
+    }
+};

source/import/importerthree.js

@@ -440,80 +440,3 @@ OV.ImporterThree3mf = class extends OV.ImporterThreeBase
         return loadedObject;
     }
 };
-
-OV.ImporterThreeSvg = class extends OV.ImporterThreeBase
-{
-    constructor ()
-    {
-        super ();
-    }
-
-    CanImportExtension (extension)
-    {
-        return extension === 'svg';
-    }
-
-    GetUpDirection ()
-    {
-        return OV.Direction.Z;
-    }
-
-    GetExternalLibraries ()
-    {
-        return [
-            'three_loaders/SVGLoader.js'
-        ];
-    }
-
-    CreateLoader (manager)
-    {
-        return new THREE.SVGLoader (manager);
-    }
-
-    GetMainObject (loadedObject)
-    {
-        function ShowFill (path)
-        {
-            const style = path.userData.style;
-            if (style.fill === undefined || style.fill === 'none') {
-                return false;
-            }
-            return true;
-        }
-
-        function ShowStroke (path)
-        {
-            const style = path.userData.style;
-            if (style.stroke === undefined || style.stroke === 'none') {
-                return false;
-            }
-            return true;
-        }
-
-        let object = new THREE.Object3D ();
-
-        const material = new THREE.MeshPhongMaterial ({
-            color: 0xcc0000
-        });
-        for (let path of loadedObject.paths) {
-            const shapes = THREE.SVGLoader.createShapes (path);
-            if (ShowFill (path)) {
-                for (const shape of shapes) {
-                    const geometry = new THREE.ShapeGeometry (shape);
-                    const mesh = new THREE.Mesh (geometry, material);
-                    object.add (mesh);
-                }
-            }
-            if (ShowStroke (path)) {
-                for (const subPath of path.subPaths) {
-                    const geometry = THREE.SVGLoader.pointsToStroke (subPath.getPoints (), path.userData.style);
-                    if (geometry) {
-                        const mesh = new THREE.Mesh (geometry, material);
-                        object.add (mesh);
-                    }
-                }
-            }
-        }
-        return object;
-    }
-};

tools/config.json

@@ -47,6 +47,7 @@
 		"source/import/importergltf.js",
 		"source/import/importero3dv.js",
 		"source/import/importerthree.js",
+		"source/import/importersvg.js",
 		"source/import/importer3dm.js",
 		"source/import/importerifc.js",
 		"source/import/filelist.js",

website/embed.html

@@ -60,6 +60,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>

website/index.html

@@ -60,6 +60,7 @@
 	<script type="text/javascript" src="../source/import/importergltf.js"></script>
 	<script type="text/javascript" src="../source/import/importero3dv.js"></script>
 	<script type="text/javascript" src="../source/import/importerthree.js"></script>
+	<script type="text/javascript" src="../source/import/importersvg.js"></script>
 	<script type="text/javascript" src="../source/import/importer3dm.js"></script>
 	<script type="text/javascript" src="../source/import/importerifc.js"></script>
 	<script type="text/javascript" src="../source/import/filelist.js"></script>