Adobe XD resize SVG without distortion.

Community Beginner ,
Jan 25, 2020 Jan 25, 2020

Copy link to clipboard

Copied

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?

 

<The Title was renamed by moderator>

TOPICS
Design , Product performance

Views

25.4K

Likes

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 2 Correct answers

Valorous Hero , Jan 25, 2020 Jan 25, 2020

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 🙂

 

Schermafbeelding 2020-01-25 om 20.28.23.png

Likes

Translate

Translate
Valorous Hero , Jan 26, 2020 Jan 26, 2020

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

...

Likes

Translate

Translate
Valorous Hero ,
Jan 25, 2020 Jan 25, 2020

Copy link to clipboard

Copied

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 🙂

 

Schermafbeelding 2020-01-25 om 20.28.23.png

Likes

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
Community Beginner ,
Jan 26, 2020 Jan 26, 2020

Copy link to clipboard

Copied

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.

Likes

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
Valorous Hero ,
Jan 26, 2020 Jan 26, 2020

Copy link to clipboard

Copied

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-...

 

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.

Likes

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
New Here ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

Why you don't just learn from Figma or sketch app is that too hard to insert new option tool for scale object like Figma (press K control) to scale whole shapes or icons in perfect way to avoid distortion !

Likes

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
New Here ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

You saved my life! Thank you so much!

Likes

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 ,
May 26, 2021 May 26, 2021

Copy link to clipboard

Copied

This doesn't always work. For example I have copied and pasted a button from AI. Even with responsive resize turned off, the text does not scale witht the button.

Likes

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
Community Beginner ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

The same thing is happening to me. I created a logo in Illustrator and saved as an SVG. When I import to XD, create a component, and then resize the logo, all the separate letters in the logo distort and behave separately instead of as a unit. Help!

Likes

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 ,
Jun 10, 2021 Jun 10, 2021

Copy link to clipboard

Copied

This doesn't always work.

Likes

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
New Here ,
Dec 23, 2020 Dec 23, 2020

Copy link to clipboard

Copied

Saved my entire life, you're an angel!

Likes

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 ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

It's very useful!!!

Likes

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
New Here ,
Aug 16, 2021 Aug 16, 2021

Copy link to clipboard

Copied

Not Solved...

 

Likes

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
New Here ,
Dec 30, 2021 Dec 30, 2021

Copy link to clipboard

Copied

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!

Likes

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
New Here ,
Jan 26, 2022 Jan 26, 2022

Copy link to clipboard

Copied

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.

Likes

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
New Here ,
Apr 26, 2022 Apr 26, 2022

Copy link to clipboard

Copied

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

Likes

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
New Here ,
Apr 26, 2022 Apr 26, 2022

Copy link to clipboard

Copied

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

Likes

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
Adobe Employee ,
Apr 27, 2022 Apr 27, 2022

Copy link to clipboard

Copied

Another option is to hold down the Shift key while resizing to temporarily disable Responsive Resize feature.

 

HTH,
Randy

Likes

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
Community Beginner ,
Apr 27, 2022 Apr 27, 2022

Copy link to clipboard

Copied

LATEST

Unfortunately none of these suggestions worked for me. I don't know about others, but I had no luck. Thanks for your suggestion, though 🙂

Likes

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