diff --git a/examples/files.js b/examples/files.js
index 99bb1a357ddeede181e02a9492b62af6d18d498d..c8e439cf752cc8d900863182d54a1a2530680f0c 100644
--- a/examples/files.js
+++ b/examples/files.js
@@ -124,6 +124,7 @@ var files = {
"webgl_loader_sea3d_skinning",
"webgl_loader_sea3d_sound",
"webgl_loader_stl",
+ "webgl_loader_svg",
"webgl_loader_texture_dds",
"webgl_loader_texture_exr",
"webgl_loader_texture_hdr",
diff --git a/examples/js/loaders/SVGLoader.js b/examples/js/loaders/SVGLoader.js
index ce09a3ecd52799dccd3e5d0b2f9cba627e77dc46..15504778ab42ac6082ad0fa2be3fc9af8979e6ab 100644
--- a/examples/js/loaders/SVGLoader.js
+++ b/examples/js/loaders/SVGLoader.js
@@ -17,17 +17,199 @@ THREE.SVGLoader.prototype = {
var scope = this;
- var parser = new DOMParser();
-
var loader = new THREE.FileLoader( scope.manager );
- loader.load( url, function ( svgString ) {
-
- var doc = parser.parseFromString( svgString, 'image/svg+xml' ); // application/xml
+ loader.load( url, function ( text ) {
- onLoad( doc.documentElement );
+ onLoad( scope.parse( text ) );
}, onProgress, onError );
+ },
+
+ parse: function ( text ) {
+
+ function parseNodes( nodes ) {
+
+ for ( var i = 0; i < nodes.length; i ++ ) {
+
+ parseNode( nodes[ i ] );
+
+ }
+
+ }
+
+ function parseNode( node ) {
+
+ if ( node.nodeType !== 1 ) return;
+
+ switch ( node.nodeName ) {
+
+ case 'svg':
+ break;
+
+ case 'g':
+ break;
+
+ case 'path':
+ paths.push( parsePathNode( node ) );
+ break;
+
+ case 'rect':
+ paths.push( parseRectNode( node ) );
+ break;
+
+ default:
+ console.log( node );
+ break;
+
+ }
+
+ parseNodes( node.childNodes );
+
+ }
+
+ function parsePathNode( node ) {
+
+ var path = new THREE.ShapePath();
+ var point = new THREE.Vector2();
+
+ var d = node.getAttribute( 'd' );
+
+ console.log( d );
+
+ var commands = d.match( /[a-df-z][^a-df-z]*/ig );
+
+ for ( var i = 0; i < commands.length; i ++ ) {
+
+ var command = commands[ i ];
+
+ var type = command.charAt( 0 );
+ var data = command.substr( 1 );
+
+ switch ( type ) {
+
+ case 'M':
+ var numbers = parseFloats( data );
+ point.fromArray( numbers );
+ path.moveTo( point.x, point.y );
+ break;
+
+ case 'H':
+ var numbers = parseFloats( data );
+ point.x = numbers[ 0 ];
+ path.lineTo( point.x, point.y );
+ break;
+
+ case 'V':
+ var numbers = parseFloats( data );
+ point.y = numbers[ 0 ];
+ path.lineTo( point.x, point.y );
+ break;
+
+ case 'L':
+ var numbers = parseFloats( data );
+ point.x = numbers[ 0 ];
+ point.y = numbers[ 1 ];
+ path.lineTo( point.x, point.y );
+ break;
+
+ case 'C':
+ var numbers = parseFloats( data );
+ path.bezierCurveTo(
+ numbers[ 0 ],
+ numbers[ 1 ],
+ numbers[ 2 ],
+ numbers[ 3 ],
+ numbers[ 4 ],
+ numbers[ 5 ],
+ );
+ point.x = numbers[ 4 ];
+ point.y = numbers[ 5 ];
+ break;
+
+ case 'h':
+ var numbers = parseFloats( data );
+ point.x += numbers[ 0 ];
+ path.lineTo( point.x, point.y );
+ break;
+
+ case 'v':
+ var numbers = parseFloats( data );
+ point.y += numbers[ 0 ];
+ path.lineTo( point.x, point.y );
+ break;
+
+ case 'l':
+ var numbers = parseFloats( data );
+ point.x += numbers[ 0 ];
+ point.y += numbers[ 1 ];
+ path.lineTo( point.x, point.y );
+ break;
+
+ case 'c':
+ var numbers = parseFloats( data );
+ path.bezierCurveTo(
+ point.x + numbers[ 0 ],
+ point.y + numbers[ 1 ],
+ point.x + numbers[ 2 ],
+ point.y + numbers[ 3 ],
+ point.x + numbers[ 4 ],
+ point.y + numbers[ 5 ],
+ );
+ point.x += numbers[ 4 ];
+ point.y += numbers[ 5 ];
+ break;
+
+ }
+
+ }
+
+ return path;
+
+ }
+
+ function parseRectNode( node ) {
+
+ var x = parseFloat( node.getAttribute( 'x' ) );
+ var y = parseFloat( node.getAttribute( 'y' ) );
+ var w = parseFloat( node.getAttribute( 'width' ) );
+ var h = parseFloat( node.getAttribute( 'height' ) );
+
+ var path = new THREE.ShapePath();
+ path.moveTo( x, y );
+ path.lineTo( x + w, y );
+ path.lineTo( x + w, y + h );
+ path.lineTo( x, y + h );
+ return path;
+
+ }
+
+ function parseFloats( string ) {
+
+ var array = string.split( /[\s,]+|(?=\s?[+\-])/ );
+
+ for ( var i = 0; i < array.length; i ++ ) {
+
+ array[ i ] = parseFloat( array[ i ] );
+
+ }
+
+ return array;
+
+ }
+
+ //
+
+ var xml = new DOMParser().parseFromString( text, 'image/svg+xml' ); // application/xml
+
+ var svg = xml.documentElement;
+
+ var paths = [];
+
+ parseNode( svg );
+
+ return paths;
+
}
};
diff --git a/examples/models/svg/tiger.svg b/examples/models/svg/tiger.svg
new file mode 100644
index 0000000000000000000000000000000000000000..983e57026e4a4c513c58acfe3f9f56c62eaa963e
--- /dev/null
+++ b/examples/models/svg/tiger.svg
@@ -0,0 +1,730 @@
+
+
+
+
diff --git a/examples/webgl_loader_svg.html b/examples/webgl_loader_svg.html
new file mode 100644
index 0000000000000000000000000000000000000000..c1ff8f33700743f6797d495a4244fe73b0c5334f
--- /dev/null
+++ b/examples/webgl_loader_svg.html
@@ -0,0 +1,158 @@
+
+
+
+ three.js webgl
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+