New and returning users may sign in

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
← Adobe XD: Feature Requests

Request details

Feedback

Adobe XD: Feature Requests: 01 : Design mode

Categories

  • CATEGORIES
  • All ideas
  • My feedback
  • 01 : Design mode 1366 ideas
  • 02 : Prototype mode 370 ideas
  • 03: Share mode 50 ideas
  • 04 : Sharing on the web 216 ideas
  • 05 : Asset exporting 157 ideas
  • 06 : Extensibility 38 ideas
  • 07 : Integration with other tools 118 ideas
  • 08 : Mobile (iOS) 25 ideas
  • 09 : Mobile (Android) 19 ideas
  • 10: Developer Handoff 140 ideas
  • 11: Plugins 135 ideas
  • Other 109 ideas

(thinking…)
  • Searching…

    No results.

    Clear search results
    • Adobe XD: Feature Requests 2,870 ideas

Import SVG with preserved viewBox boundary

Many icon sets define a specific (often square) area that represents the boundaries for all icons. In the SVG format, this boundary is specified by the SVG viewBox attribute. Individual icons will have varying measurements for their vector shapes, e.g. a "minus" icon's vector-shape will have a larger width than height. When scaling icons, if you can rely on the viewBox size, you can scale all icons to consistent sizes (e.g. 24x24 or 48x48).

Currently when importing an SVG icon into Adobe XD, the object will have the vector-shapes measurements, so that scaling multiple icons from the same icon set to consistent sizes is complicated. (You can multiply the width and height values by 1,5 or 2 or you can group the icon with a boundary rectangle and then scale the group.) (Another workaround is to use an icon font instead of SVG icons because then the scaling can be done consistently via the font size.)

It would be great to give the user a choice if an icon object's boundaries should rely on the vector shape or on the viewBox. (Also for exporting icon assets, preserving the viewBox can be very useful.)

50 votes

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Christoph Mauerhofer shared this idea  ·  March 07, 2018  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

How important is this to you?

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
feature-in-the-backlog  ·  March 08, 2018
Tweet
  • Remove
Attach a File

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Bastian Steinhauer commented  ·  February 07, 2021 22:52  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is particularly important when importing icons with a safe area around it. Right now it requires me to import them, create an empty box, place the icon inside, group it, disable responsive resize, lock width and height and resize it. What a workflow! Would really appreciate I you could fix it.

    Submitting...
  • DJ commented  ·  November 25, 2020 11:46  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This would be great. I have been having to draw transparent square in the background to preserve the alignment within the canvas.

    Submitting...
  • Anonymous commented  ·  August 06, 2020 09:09  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Every direction I turn I discover new oversights and bugs with XD and Illustrator. Creative Cloud is entirely useless for my professional needs in 2020.

    What's the point of exporting viewbox information in Illustrator if XD disregards it?

    Submitting...
  • Zach Bruce commented  ·  May 28, 2020 14:11  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Been doing a lot of work with large, pre-made SVG icon sets for web. Each needs to have a bounding box for maintaining alignment and perceived image sizes (e.g. all artboards have 24px by 24px bounding box, but each icon may be 18px / 22px / 24px max within that). I just realized that any icons I import all get their very precious bounding box removed with I import them.

    Submitting...
  • Андрей Берестовой commented  ·  September 20, 2019 06:22  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    When will this opportunity be finally realized? In Figma, this has been working for a long time.
    I create SVG icons in Adobe Illustrator, create an artboard with a size of 18x18 pixels, leave safe areas, and therefore the physical size of the icon object is less than 18x18 pixels. When importing into XD, I have to rebuild the icon not according to its artboard, but according to its physical dimensions, and this takes a lot of time if the icon is not symmetrical.
    In XD, as I understand it, the concept of "Frame" is missing, as in Figma, and therefore the icon is imported without taking into account the artboard.

    Submitting...
  • RS commented  ·  July 02, 2019 05:39  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I would strongly support that issue. We'd like to keep width and height in the svg-code, too. Our SVG-files contain width and height but those attributes seem to be ignored when the SVG is interpreted by XD.

    Submitting...
  • Carlos commented  ·  November 06, 2018 00:10  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is especially important when assets are later exported. I've tried to use design specs to allow developers to download assets, but that's basically useless when viewBox/size isn't respected since placing and scaling icons/graphics becomes a huge hassle for the developers. Now I've had to go back to sending assets by mail or saving them on shared drives

    Submitting...
  • Christoph Mauerhofer commented  ·  March 08, 2018 05:49  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Yes, that makes sense, I might have confused the attributes.

    Submitting...
  • AdminRadu Stavila (Adobe) (XD Engineer, Adobe) commented  ·  March 08, 2018 05:31  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Hi Christoph,

    Sounds like what you need would be the width/height attributes in the SVG tag, not the viewBox attribute. The viewBox controls "the viewport" through which you're looking at the vector art, not the actual size of the vector art. The width and height attributes on the SVG root tag actually control the overall size of the vector art.
    Does that make sense to you?

    Submitting...

Adobe XD Feedback : Feature Requests & Bugs · UserVoice Terms of Service & Privacy Policy · Adobe Terms of Use · Adobe Privacy Policy