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! 

TOPICS
How to

Views

34

Likes

translate

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

Most Valuable Participant , Mar 08, 2021 Mar 08, 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 edg...

Likes

translate

Translate

Translate
Most Valuable Participant ,
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

Likes

translate

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!

Likes

translate

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