We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Load SVG in scene

Home Forums Programming Load SVG in scene

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #29768

    I know there are already some stuff about that in the Verge3D resources (like here: https://github.com/Soft8Soft/verge3d-code-examples/blob/master/webgl_loader_svg.html), but I cannot figure out how to use it!
    I would like to do some pretty simple things first, like loading a SVG file in an existing scene (exported from Blender).
    Is there a basic project example available somewhere on how to do this?
    I tried to use the 3DApp.js file and its prepareExternalInterface, and create a loader() function, based on the file SVGloader.html (located in /verge3d/docs/examples/loaders. By the way I could not find how to access this file in your documentation!??). But I must do something wrong as I have error messages “TypeError: v3d.SVGLoader is not a constructor”
    Any help would be greatly appreciated!



    Hi David,

    WebGL does not support loading SVG images and other vector-based formats. The example you mentioned uses basic SVG parser and generates geometry primitives. As such, it works only for simple SVG assets. In general, I’d recommend converting your SVG assets to JPG/PNG textures. It will be easier to achieve and more performance-friendly.

    Co-founder and CTO at Soft8Soft
    FB | Twitter | VK


    Been on the SVG V3D Quest since day 1.

    Instead of extruding, then bending then saving 30 ironed-in-stone (and disagreeable) shapekeys for each of many many items, the desired method would be dynamically extruding on a spline a profile from a loaded SVG, as seen here…
    Muffin man extruding loaded SVG via buffer geometry in three,js

    the former method was a fallback because I knew it was do-able, vs the learning curve of implementing three.js chive into already existing blender based scenes. :wacko:

    Our project’s demo is almost complete, but after it’s release I’m tackling that beast!

    Feel free to share any progress you make! Let us join forces in dominating the SVG V3D menace! :good:

    (I’ve asked and Ivan’s said most all three.js syntax is interchangeable with v3d code, so it’s (if using generated .js files, using the “run code here” and or app.externalApplication js call areas of your app’s js file.

    So here’s a link to a search result of SVG mentions at the three.js discourse forum…

    Three.js discourse svg

    Been almost a year pining on this conundrum… You’d think the Gods would show some pity… :-(



    Was your attempt’s goal to produce a texture with an SVG or geometry?

    You’re looking for geometry right?


    Basically seeing this demo:
    I thought it was possible to load a SVG file in the 3D scene, and benefit from its SVG crispness to display complicated schematics (electrical, networks, …) and eventually also interact with the SVG itself like what is possible in HTML (active links, change properties, colors…).
    It seems that it is a little more complicated than expected!
    Ans as I’m far from expert in Javascript and coding, it’s a little bit out of my league I’m afraid…


    right if you click draw fill shapes you’ll see that’s a wireframe.. the svg coords get brought by the loader into vertex coords to make an object.

    that’s what i’m lokoing to do.

    for what you’re talking about you could probably use lines like this – https://cdn.soft8soft.com/demo/examples/webgl_lines_colors.html


    Hey David.
    I just made a breakthrough, and have animated SVG’s rotating in 3d space just using css. (Sass css).
    You can click and interact with them and everything. not 3d wireframes made from svg coords, but svg graphics on polygons, able to do whatever you have them normally do to full capacity.

    Using puzzles to implement this will be easy.

    It’s NOT Webgl, because css uses html5, but there’s been success blending the two, with the three.js CSS3dRenderer, matching camera matrix with css d perspective etc…

    Three.js and css3D transforms

    This is especially exciting for me since ALL of my primary content is in SVG format.

    And if you’re reading this Ivan & Yuri, I think an updated version of you’re css3drenderer ,or better instructors for it’s dependencies would be fantastic, since the ONLY way to get LIVE, fully functional SVG capabilities working in 3D, as of now is in css3d transform. (Aside from using svg-to-canvas processing middle-man packages).

    Having the CSS3dRenderer working in synch with the verge camera’s matrix would be a huge bonus to potential future licensees! :good:

    • This reply was modified 4 months, 2 weeks ago by GlifTekGlifTek.

    I also found a 5 year old article about this. I can’t get it work though but he blend css3d with three.js renderer succesfully.
    Embedding webpages in a 3D Three.js scene
    and yes we really need this type of features in puzzles…

    • This reply was modified 4 months, 2 weeks ago by core3dcore3d.

    I also found a 5 year old article about this. I can’t get it work though but he blend css3d with three.js renderer succesfully. Embedding webpages in a 3D Three.js scene and yes we really need this type of features in puzzles…

    i know.. it’s yet another difficult challenge.

    got clickable, 3D animated SVG’s in html.. but all my scene and puzzles are in verge..


    UNTIL the CSS3DRenderer for verge is reasonably viable… /cough cough….

    i’m checking out this technique here…
    although it will render the SVG code’s interactive-ability impotent…
    it may still work fluidly for display purposes…

    Path2D writes SVG straight to HTML Canvas.
    Path2d for HTML5 canvas

    then that can be put in a readable format for the new canvas puzzle.

    so ya

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.