threlte logo
@threlte/extras

<SVG>

webgl <SVG> works with WebGL and is available from the @threlte/extras export. webgpu <SVG> works with WebGPU and is available from the @threlte/extras/webgpu export.

Renders an SVG using Three.js’ SVGLoader.

<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
The SVG to render, as a URL or as SVG markup starting with <svg.
fillMaterialProps
Props<typeof MeshBasicMaterial>
no
Props spread onto every fill material, a MeshBasicMaterial.
fillMeshProps
Props<typeof Mesh>
no
Props spread onto every fill mesh.
skipFill
boolean
no
false
Skips the shapes' fills and draws only their strokes.
skipStrokes
boolean
no
false
Skips the shapes' strokes and draws only their fills.
strokeMaterialProps
Props<typeof MeshBasicMaterial>
no
Props spread onto every stroke material, a MeshBasicMaterial.
strokeMeshProps
Props<typeof Mesh>
no
Props spread onto every stroke mesh.
Previous Page <RoundedBoxGeometry>
Next Page <Text>