Background svg image

I’m trying to add a background static image .svg to my scene.
I have loaded a new texture and setted as background property of the main scene.
I can see my svg rendered in background but it appear with a poor definition and grainy.
Here my code:

const texture = new THREE.TextureLoader().load("/img/background.svg");
this.scene.background = texture;

What’s the correct way to do this?

Thank you

WebGL can’t render vector graphics in the same optimal way like when using SVGs directly in a website. You might want to convert the SVG to PNG or JPEG and then use it as the scene’s background. This might give you more control over the final image quality.

Ok, working with SVGLoader and SVGObject could be a solution?
Thank you for your quick reply.

No, SVGLoader does not return an image hence you can’t apply it to Scene.background. SVGObject is from SVGRenderer which is not relevant when using Scene.background.

If you wan’t it just as a background - wouldn’t using an underlying <img /> solve the problem? :thinking: (With renderer canvas transparency enabled.)

Ok, thank you!

I have made some changes in the logic
I have exported every svg group as a separated png and imported in my scene loading every file as a texture, I have created a plain geometry and finally I have created the meshes. (I will animate them)

So, at now in my code there is 3 different effect Composer:

  • one for bloom effect
  • one for rendering the background scene
  • one for composing all with a ShaderPass

There is also 2 different scenes, one for the bg and one for the other mesh.

All works fine except that when I meshing my textures creating the shaderMaterial, the background texture blend with the other textures (like if all textures have the alpha channel at 50%).

In particular I need to blend bloomTexture and baseTexture but not the bgTexture (do I need to make 2 separate ShaderPass?).

Following my code:

setupFinalPass () {

      const finalPass = new ShaderPass(
        new THREE.ShaderMaterial({ 
          uniforms: {
            bgTexture: { value: this.bgComposer.renderTarget2.texture },
            baseTexture: { value: null },
            bloomTexture: { value: this.bloomComposer.renderTarget2.texture },
          vertexShader: finalVertexshader,
          fragmentShader: finalFragmentshader,
          blending: THREE.NoBlending,
          defines: {},

      finalPass.needsSwap = true;


const finalVertexshader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

const finalFragmentshader = `
  uniform sampler2D bgTexture;
  uniform sampler2D baseTexture;
  uniform sampler2D bloomTexture;
  varying vec2 vUv;
  vec4 getTexture( sampler2D texelToLinearTexture ) {
    vec4 text = mapTexelToLinear( texture2D( texelToLinearTexture , vUv ) );
    return text;
  void main() {
    vec4 monkeyTexture = getTexture( baseTexture ) + vec4( 1.0 ) * getTexture( bloomTexture );
    vec4 bgTexture = texture2D( bgTexture, vUv );
    gl_FragColor = bgTexture * 1.0 + monkeyTexture * 1.0;

Where I’m wrong?
Thank you