Skip to main content
Karl Fabian5F97
Karl Fabian5F97
Inspiring
March 8, 2021
Answered

How to curve SVG images

  • March 8, 2021
  • 2 replies
  • 3021 views

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! 

This topic has been closed for replies.
Correct answer Karl Fabian5F97

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!

2 replies

Karl Fabian5F97
Karl Fabian5F97AuthorCorrect answer
Inspiring
July 20, 2022

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!

Mylenium
Mylenium
Legend
March 8, 2021

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
    Karl Fabian5F97Author
    Inspiring
    March 9, 2021

    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!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices