threlte logo
@threlte/extras

<SVG>

Render an SVG using threejs’s SVGLoader.

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

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

<style>
  div {
    height: 100%;
  }
</style>
<script lang="ts">
  import { T } from '@threlte/core'
  import { SVG, Grid, OrbitControls } from '@threlte/extras'
</script>

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

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

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
{}