Participating Frequently

Answered

Adobe XD resize SVG without distortion.

Forum|Forum|6 years ago
January 25, 2020
9 replies
40050 views

Every time I try to increase the size of and SVG all the spacing between elemants gets distorded.

This is really messing up and slowing down my work flow.

Has anyone found a solutions for ths or experienced the same or similar problem?

This topic has been closed for replies.

Correct answer Rachel28612360s035

Another solution I found - select all the parts of the icon and press "add" on them (the botton next to repeat grid) - though it has a disadventage in a colorful icon because it unites all the different parts of the icon into one. But hey, it helps in a simple icon..

R

Rachel28612360s035Correct answer

Participant

Another solution I found - select all the parts of the icon and press "add" on them (the botton next to repeat grid) - though it has a disadventage in a colorful icon because it unites all the different parts of the icon into one. But hey, it helps in a simple icon..

G

Gavin27134696vqn6

Participant

outline the strokes and try resizing

M

mowglivj

Inspiring

The advice on this thread only works sometimes and it's dependent on so many things that figuring out how to fix it often takes forever.

I just spent 40mins finding a solution for what shouldn't be a problem. Why is it so hard to do a simple undistorted resize of some vectors? Every single other vector-based application on the planet has no issues with this!

L

Linda21840742360u

Participating Frequently

this isnt working, I dont have responsive layout turned on. so how can we work with this?

J

JackJeffman

Participant

Have you tried locking the aspect ratio? What is the exact problem you're facing? Did you try all the above mentioned?

J

JackJeffman

Participant

This can also have to do with your SVG image not being set to Outline Stroke. This can be set up when making your object (I made in Illustrator, you can go to, Object > Path > Outline Stroke) or within XD same way. This is so your line weight scales up and down as well with the object.

S

Sander32585821jr2w

Participant

This is what solved it, thank you!

D

default5kdqtuy4s1ta

Participant

Not Solved...

D

Daron Howard

Participant

I'm just a UX Researcher and the furthest thing from a designer, but occasionally have to do utilize XD and recently I experienced this problem. A resolution for me was turning off "Response Resize" (as Peter suggested) and then locking the ratio under the "Transform" label in the side properties panel on the right. I then went ahead added the SVG wordmark (which I originally created with AI) as a component (which I still don't quite undersand the benefit of making it a "component," but I did it anyway), and now I can sucessefully resize the SVG component without distortion -- as long as the "Response Resize" is turned off AND the ratio is locked.

The default setting of the component is for Responsive Resize to be turned on, and for the aspect ratio to be unlocked. So each time that I go back to that component and drag and drop it for use elsewhere in the project, you will have to turn the Responsive Resize button back off, and once again lock the aspect ratio for the new one you just dragged and dropped, and then it's good to go!

Daron_Howard_XD_help.pdf

Y

yoooowow

Known Participant

It's very useful!!!

O

Onyekachii

Participant

Saved my entire life, you're an angel!

Peter Villevoye

Community Expert

Upon importing or pasting any SVG related objects (an Illustrator file, or a copied bunch of vectors from anywhere), Adobe XD regards them as separate objects. And resizing it will indeed tear all elements intentionally apart ! Grouping all elements beforehand or even in XD won't help.

But there's this option on the right: "Responsive Resize", which is ON by default.

Switch it OFF, and you'll be a happy camper 🙂

V

VCStordyAuthor

Participating Frequently

I think I fugured it out.

It's apparent to me now, that boarders which have been applied to vector lines do not resize an any program.

Can you please verify for me if this is a true statemnt or not Peter?

This seems to the be probmen I have been experiencing.

Even if responsive resize in XD is selected or not the boarders on vector lines to not respond in size accordingly, weather I'm edditing the SVG in Illustrator or in XD.

The only solution i found for this has been to manualy decrease the boarder size after shrining down the SVG.
I wish there was a better solution for this problem, as I run the risk of accidenntally distorting 3rd party design elements that are not mine to alter.

Peter Villevoye

Community Expert

Correct ! Adobe XD regards anything vector-based not as a whole, but as something to import as editable. After all, being able to create and edit Illustrator-like materials in an easier way, that's what instigated Sketch, and that's what Adobe is mimicking. So everything (positions, fills, line widths, etc.) becomes a setting.

Having an option to keep line widths scaling along, is a long-standing user request:

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/17480839--scaling-tool-scale-stroke-weight-shadow-effect

Another work-around is to expand or convert your line widths to paths in Illustrator, so e.g. a red line width becomes a shape with a red fill and no line. Which has also been a good practice for any drawing, to prevent lines not scaling when others are opening and editing the file in Illustrator.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded