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.)
Christoph Mauerhofer
shared this idea
9 comments
-
Bastian Steinhauer
commented
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.
-
DJ
commented
This would be great. I have been having to draw transparent square in the background to preserve the alignment within the canvas.
-
Anonymous
commented
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?
-
Zach Bruce
commented
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.
-
Андрей Берестовой
commented
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. -
RS
commented
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.
-
Carlos
commented
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
-
Christoph Mauerhofer
commented
Yes, that makes sense, I might have confused the attributes.
-
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?
