# Background svg image

**URL:** <https://discourse.threejs.org/t/background-svg-image/16087>\
**Category:** Questions\
**Tags:** background\
**Created:** [June 10, 2020, 9:08am UTC](https://discourse.threejs.org/t/background-svg-image/16087 "2020-06-10T09:08:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AleeeKoi](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@AleeeKoi](https://discourse.threejs.org/u/AleeeKoi)\
**Post date:** [June 10, 2020, 9:08am UTC](https://discourse.threejs.org/t/background-svg-image/16087/1 "2020-06-10T09:08:13Z")

</div>

Hi!  
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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 10, 2020, 9:10am UTC](https://discourse.threejs.org/t/background-svg-image/16087/2 "2020-06-10T09:10:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AleeeKoi](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@AleeeKoi](https://discourse.threejs.org/u/AleeeKoi)\
**Post date:** [June 10, 2020, 9:26am UTC](https://discourse.threejs.org/t/background-svg-image/16087/3 "2020-06-10T09:26:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 10, 2020, 11:22am UTC](https://discourse.threejs.org/t/background-svg-image/16087/4 "2020-06-10T11:22:58Z")

</div>

> [@AleeeKoi](#):
>
> Ok, working with SVGLoader and SVGObject could be a solution?

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`.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [June 10, 2020, 12:10pm UTC](https://discourse.threejs.org/t/background-svg-image/16087/5 "2020-06-10T12:10:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AleeeKoi](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@AleeeKoi](https://discourse.threejs.org/u/AleeeKoi)\
**Post date:** [June 10, 2020, 12:14pm UTC](https://discourse.threejs.org/t/background-svg-image/16087/6 "2020-06-10T12:14:18Z")

</div>

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: {},
        }),
        "baseTexture"
      );

      finalPass.needsSwap = true;

      this.composer.addPass(finalPass);
},

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