How to curve SVG images

[Karl Fabian5F97]

Hello everyone,

I am currently using illustrator to curve SVG images, for example via:

Object --> Envelope Distort --> Make with Warp

However, I have to perform this task repeatedly every day and looked to automate it with a script. That works, but I want to take this one step further and understand how I can apply this warp effect directly on an SVG image as such:

I have looked into how SVG works and I have tried using DOMMatrix transformation (e.g. skew, translate, rotate), I have also tried using SVG filters (e.g. fedisplacementmap) and I have even tried to manipulate each path in the image individually.

Unfortunately, I cannot seem to achieve the desired outcome, which is what the Warp effect does in illustrator. If anyone knows how this can be done directly in Javascript or SVG that would be great.

Thank you! 

[Mylenium]

You need to calculate the virtual center point of a radial transform/ bend with the original im age being the result at 0 degree/ 0 percent and the full bend being 360 deg/ 100% and then "rotate" the anchor points according to the distance from the center. Simple 7th grade sinus/ cosinus math that doesn't even need matrices, though they probably would increase precision. The only point of contention might be what you define as your imaginary reference perimeter - the top edge, center, bottom edge or anything inbetween.

Mylenium

[Karl Fabian5F97]

Hello @Mylenium and thank you very much for the insightful reply. I am going to have a look at how I might achieve that. Nonetheless, I'm quite new to the world of SVG and will have to first familiarize with some of the concepts you mentioned. If you have the time to lay out in a little bit more detail how I might go about the process of calculating the virtual center point of a radial bend with the image at 0,0, would be amazing.

In either case, thanks for helping out!

[Karl Fabian5F97 · Accepted solution]

If anybody has come here looking for a solution I used this code in the end:

for (var j = 0; j < pathsToOffset.length; j++) {
    var item = pathsToOffset[j];
    var xmlstring = '<LiveEffect name="Adobe Offset Path"><Dict data="R mlim 4 R ofst ' + offset + ' I jntp 2 "/></LiveEffect>';
    item.applyEffect(xmlstring);
}

The LiveEffect allows you to do a lot of cool things and there is an entire thread describing all the things you can do. I don't have the thread right now but I'm sure you can find it by searching, otherwise send me a DM and I'll help you look!