# SVGLoader: Transform (Scale, Translate) resulting Path objects

**URL:** <https://discourse.threejs.org/t/svgloader-transform-scale-translate-resulting-path-objects/48074>\
**Category:** Questions\
**Tags:** svg-loader, svg\
**Created:** [February 15, 2023, 2:05pm UTC](https://discourse.threejs.org/t/svgloader-transform-scale-translate-resulting-path-objects/48074 "2023-02-15T14:05:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![morpheus713](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@morpheus713](https://discourse.threejs.org/u/morpheus713)\
**Post date:** [February 15, 2023, 2:05pm UTC](https://discourse.threejs.org/t/svgloader-transform-scale-translate-resulting-path-objects/48074/1 "2023-02-15T14:05:22Z")

</div>

We try to create an extrude geo from an SVG. This works fine. The question is can we transform (translate, scale) the SVG or the resulting shape?

One possible solution would be to use `Shape.extractPoints`: Create points, transform them with a matrix and recreate the corresponding Shape (and holes) and pass the resulting shape to ExtrudeGeo.

Is there an easier solution to it? Does threejs provide something in this direction?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 15, 2023, 2:21pm UTC](https://discourse.threejs.org/t/svgloader-transform-scale-translate-resulting-path-objects/48074/2 "2023-02-15T14:21:24Z")

</div>

If you start with a SVG model and end up with a `THREE.BufferGeometry` or `THREE.Mesh` or `THREE.Group`, you can translate, rotate and scale the result.

Instead of:

> [@](#):
>
> SVG → shape → transform → extrude → mesh

I’d suggest:

> [@](#):
>
> SVG → shape → extrude → mesh → transform

or

> [@](#):
>
> SVG → shape → extrude → transform → mesh

The following example translates and scales SVG files after they are being extruded with `THREE.ExtrudeGeometry` and put in a `THREE.Mesh` in a `THREE.Group` (see lines 80-81):

[https://codepen.io/boytchev/full/jOvOJxo](https://codepen.io/boytchev/full/jOvOJxo)

---

<div class="post-metadata">

**Author:** ![morpheus713](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@morpheus713](https://discourse.threejs.org/u/morpheus713)\
**Post date:** [February 15, 2023, 3:10pm UTC](https://discourse.threejs.org/t/svgloader-transform-scale-translate-resulting-path-objects/48074/3 "2023-02-15T15:10:48Z")

</div>

Thanks for your answer. Maybe to clarify: The idea is to use the SVG as a way cut out holes. Something like this:

```
// outer being a rectangular shape
svgData.paths.forEach((path) => {
    const shapes = SVGLoader.createShapes(path);
    shapes.forEach((shape) => {
        outer.holes.push(shape);
    });
});

```

Now we would like to move the cut-out around (translate) and most likely we have to scale it:

Imagine a rectangular shape from which we use the svg image to cut-out (shape.holes). The final shape is then passed to the extrude geo. The svg image needs to be translated and scaled in context of the outer shape. This has to be done in “Shape-Space” and not in 3d…

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 15, 2023, 3:43pm UTC](https://discourse.threejs.org/t/svgloader-transform-scale-translate-resulting-path-objects/48074/4 "2023-02-15T15:43:14Z")

</div>

I see now. As far as I remember, shapes, paths and curves have no built-in transformations.

Have you considered injecting a `transform` attribute in the SVG itself, after reading it, but before processing it into a shape

> SVG → inject → shape → extrude