• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to curve SVG images

Explorer ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

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:

SVG_Curve_Transformation.jpeg

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! 

Views

1.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , Jul 20, 2022 Jul 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

...

Votes

Translate

Translate
Adobe
LEGEND ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 09, 2021 Mar 09, 2021

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines