<SVG>

Renders an SVG using Three.js’ SVGLoader.

Show Code

• App.svelte
• ordering.svg
• Scene.svelte

<script lang="ts">
  import { NoToneMapping } from 'three'
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
  import { Pane, List, type ListOptions } from 'svelte-tweakpane-ui'

  const options: ListOptions<number> = {
    logo: 0,
    ordering: 1
  }
  let selection = 0
</script>

<div>
  <Canvas toneMapping={NoToneMapping}>
    <Scene {selection} />
  </Canvas>
</div>

<Pane
  position="fixed"
  title="SVG"
>
  <List
    bind:value={selection}
    label="scene"
    {options}
  ></List>
</Pane>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import { T } from '@threlte/core'
  import { SVG, OrbitControls } from '@threlte/extras'
  import url from './ordering.svg?url'

  interface Props {
    selection: number
  }
  let { selection }: Props = $props()
</script>

<T.PerspectiveCamera
  makeDefault
  position.z={5}
  position.y={1}
>
  <OrbitControls
    autoRotate
    enablePan={false}
    enableZoom={false}
  />
</T.PerspectiveCamera>

{#if selection == 0}
  <SVG
    src="/icons/svelte.svg"
    scale={0.005}
    position.x={-1.2}
    position.y={1.5}
  />
{:else}
  <SVG
    src={url}
    scale={0.005}
    position.x={-1.2}
    position.y={1.5}
  />
{/if}

<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="25" y="25" width="250" height="250" style="fill:#ff0000;fill-opacity:0.2;stroke:none" />
    <rect x="50" y="50" width="100" height="200" style="fill:#000000;fill-opacity:1;stroke:none" />
    <rect x="75" y="75" width="150" height="150" style="fill:#00ff00;fill-opacity:0.5;stroke:none" />
    <rect x="100" y="100" width="100" height="100" style="fill:#000080;fill-opacity:1;stroke:none" />

</svg>

Examples

Basic Example

Scene.svelte

<script lang="ts">
  import { T } from '@threlte/core'
  import { SVG } from '@threlte/extras'
</script>

<SVG
  src="/icons/svelte.svg"
  scale={0.005}
  position.x={-1.2}
  position.y={1.5}
/>

Component Signature

Props

name

type

required

default

description

---

src

string

yes

Can be a URL or SVG data.

---

fillMaterialProps

Props<typeof MeshBasicMaterial>

no

{}

---

fillMeshProps

Props<typeof Mesh>

no

{}

---

skipFill

boolean

no

false

---

skipStrokes

boolean

no

false

---

strokeMaterialProps

Props<typeof MeshBasicMaterial>

no

{}

---

strokeMeshProps

Props<typeof Mesh>

no

{}