Including THREE.SVGLoader and THREE.SVGObject


Does anyone know if there is a simple and “Expo friendly” way of getting THREE.SVGLoader and THREE.SVGObject into a project? They don’t seem to be in the THREE imported in a standard Expo project.


Hello @blamsoft, not yet but I have a strange obsession with three.js and a few hours to kill tonight - I’ll take a look for ya :blue_heart::fire::space_invader:


Thank you. Any help would be appreciated!


Hmm, this will take some work. Looks like svg stuff will need to be added to the browser-polyfill.
I assembled this little collection of polyfills for loading in images and stuff. I’m not quite sure how much shim it will require but that’s where I would start. <33


i think this won’t work unfortunately :confused: but maybe someone can figure out how to make it work


Here is my solution. I’m not saying it is the best solution ever. I have hacked the SVGLoader.js file and included it in my project. It requires the xml-dom package. npm install xml-dom. Include pakagerOpts in app.json.

import { FileSystem } from 'expo';
import SVGLoader from './SVGLoader';

async loadSVG(svgAsset) {
    await svgAsset.downloadAsync();
    const svgText = await FileSystem.readAsStringAsync(svgAsset.localUri);
    const loader = new SVGLoader();
    const shapePaths = loader.load(svgText);
    const geometry = new THREE.Geometry();
    for (let i = 0; i < shapePaths.length; i++) {
      const shapes = shapePaths[i].toShapes();
      for (let j = 0; j < shapes.length; j++) {
        geometry.merge( new THREE.ExtrudeGeometry(shapes[j], { bevelEnabled: false, amount: 0.01 }) );
    return geometry;
import { Asset } from 'expo';
const svgAsset = await Asset.fromModule(require(`./assets/mysvg.svg`));
var geometry = await this.loadSVG(svgAsset);
"packagerOpts": {
  "assetExts": [


Wow! This is great, maybe we should put this in expo-three ?? Initially I thought you wanted the ability to use SVGRenderer :joy::sweat_smile:


Some people frown on having a hacked file that isn’t maintained. I’m okay with it.


Well I sit upside down, this is useful because then every appears to be smiling. :upside_down_face:
What could we do to make this less hacky?


I just mean it is no longer maintained in the three.js Github. I’m new here so I don’t really understand the process.


Here’s a snack that shows this:

I have to run it on my device.


Yeah this is great! Thanks for sharing and solving this. <33

closed #13

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.