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

Save SVG Icons without transform at root level

Wrong Coordinates in the Viewbox if i save SVG´s from Xperience Design.
To correct the coordinates and the viewBox, i have to open the SVG in Illustrator, to save the ICON (SVG ) with right code.

Maybe it is my fall if yes tell me the right way :)

18 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

Anonymous shared this idea  ·  August 10, 2016  ·  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-completed  ·  April 03, 2018
Show previous admin responses (2)
feature-in-the-backlog  ·  AdminElaine (Adobe) (Product Manager, Adobe) responded  ·  December 02, 2016

This has been moved to our backlog. We’ll keep you updated!

-Elaine

feature-needs-more-info  ·  AdminPeter Flynn (Software Engineer, Adobe) responded  ·  August 16, 2016

Currently, when you export an SVG icon and then view it, the artwork is flush against the top-left as you would expect. However, inside the SVG markup, the artwork often has a transform offsetting it by a few hundred px, plus a viewBox setting that essentially cancels out that transform.

Normally, this isn’t a big deal though since the SVG looks the same when displayed. Could you tell us more about why the transform is a problem for your use case? Are you copy-pasting the SVG markup into a pre-existing, larger SVG file?

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
  • sam commented  ·  August 26, 2020 11:17  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    hi iam sam

    Submitting...
  • Kerlyn Marino commented  ·  July 07, 2019 04:43  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    When I try to use this SVG code in a SVG sprite with symbols it fails too. Another reason to remove this transalation attribute. I don't know why it's so complicated to remove if it doesn't offer any advantage. On the contrary it is simply inconvenient. I assumme this is something they put to guide us through Illustrator which do have a licence cost. The problem is in that case is even better move to sketch that is affordable.

    I really hope you can include this fix soon. It's is an additional checkbox in Export form.

    Submitting...
  • AdminRadu Stavila (Adobe) (XD Engineer, Adobe) commented  ·  May 18, 2018 06:50  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Hi,

    Width/height properties are not added to the svg root as they are not mandatory in the SVG spec. They can be omitted and default to "100%". For more details: https://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute

    The transform itself should present no issues, its a perfectly correct way of positioning vectors in SVG (unless you're using a tool that doesn't know how to handle transforms). In order to help you, we would need to better understand your colleague's scenario. What tool is he using to create icon fonts? What isn't working? Does manually adding width/height to the SVG element change anything?

    Thanks,
    Radu.

    Submitting...
  • Wiredframe commented  ·  May 18, 2018 03:03  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    As you can see width and height properties are gone and for some reason transform has been added. My colleague says that the glyphs are offset.

    Submitting...
  • Wiredframe commented  ·  May 18, 2018 03:01  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Hi Radu,

    my dev colleague can't convert those icons to icon fonts. Here is a comparison between the original Icons 8 icon and the exported one:

    Original Icons 8 Icon:

    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; width="50pt" height="50pt" viewBox="0 0 50 50" version="1.1">
    <g id="surface1">
    <path style=" stroke:none;fill-rule:nonzero;fill:#000000;fill-opacity:1;" d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z "/>
    </g>
    </svg>

    Exported Icon:

    <svg xmlns="http://www.w3.org/2000/svg&quot; viewBox="0 0 20.438 20.438">
    <g id="icons8_Delete" transform="translate(-5.781 -5.781)">
    <path id="Pfad_1" data-name="Pfad 1" d="M7.219,5.781,5.781,7.219,14.563,16,5.781,24.781l1.438,1.438L16,17.438l8.781,8.781,1.438-1.437L17.438,16l8.781-8.781L24.781,5.781,16,14.563Z"/>
    </g>
    </svg>

    Submitting...
  • AdminRadu Stavila (Adobe) (XD Engineer, Adobe) commented  ·  May 17, 2018 03:06  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    The issue that was reported here and fixed in XD 7.0 was about transform at root level (the viewBox that in your example is positioned at 0, 0 so with no transform). The transform on the checkbox's path itself is correct as that is where the checkmark was positioned. The checkmark's path will be added with the translate and the checkmark will be drawn at the correct position.
    Could you please elaborate on why that transform bothers you?

    Thanks,
    Radu.

    Submitting...
  • Wiredframe commented  ·  April 23, 2018 01:37  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    On my Windows version this issue still persists! A simple checkmark path is exported like this:

    <svg xmlns="http://www.w3.org/2000/svg&quot; viewBox="0 0 10.128 7.276"><defs><style>.a{fill:none;stroke:#fff;stroke-width:1.5px;}</style></defs><path class="a" d="M8208.429,4770l3.383,3.383,5.685-5.686" transform="translate(-8207.898 -4767.168)"/></svg>

    Submitting...
  • Tess commented  ·  April 03, 2018 13:53  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Perfect timing - I need to use this feature right now, before it was a longer process to go to online svg-optimizer

    Submitting...
  • Austin Andrews commented  ·  April 03, 2018 07:37  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    You guys are amazing! Seemed like a minor issue, but it helps a lot.

    Submitting...
  • AdminRadu Stavila (Adobe) (XD Engineer, Adobe) commented  ·  April 03, 2018 07:32  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    XD 7.0 just went live and it fixes this issue.

    Submitting...
  • Igor Polyakov commented  ·  February 16, 2018 01:12  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Is there any news about this update? I recently exported number of icons and stumbled upon that issue: totally bad!

    Submitting...
  • Tess commented  ·  November 02, 2017 18:15  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Had a similar problem and needed to go to online tool, optimize svg file and only than it been inserted fine at the html page

    Submitting...
  • Jeroen Reumkens commented  ·  May 23, 2017 00:07  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Yes, same issue here. XD can not export the SVG without the viewbox offset. Any idea when this will be fixed?

    Submitting...
  • Austin Andrews commented  ·  April 24, 2017 12:39  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Really need this feature for future icon work. But a realistic example of why this is needed is during font generation, most tools assume viewbox relative paths in absolute or relative for the SVG's.

    Wanted to point that out as it could cause issues for those trying to use this other tooling.

    Submitting...
  • EmanueleSabetta commented  ·  March 29, 2017 13:06  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Any update on this?

    Submitting...
  • Adrian Klingen commented  ·  March 23, 2017 04:13  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Yes i also have this issue, Sketch has this as well and I need to use Illustrator for re-saving my SVG.

    Submitting...
  • Ludovic Vialle commented  ·  December 07, 2016 00:41  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Thank you Elaine, it is much appreciated, that was one of my principal issues with Adobe xD

    Submitting...
  • Ludovic Vialle commented  ·  November 16, 2016 00:58  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    @Peter: I have created two codepen with one that demonstrate the issue and one that show the fix, and you are right, the transform is not really an issue, but browsers are not able to figure out the SVG size based on the viewBox, and they requires width and height flags:

    Not working:
    https://codepen.io/lvialle/pen/wozezy

    Working:
    https://codepen.io/lvialle/pen/JbRJWY

    So the solution would be to include the artboard size in the <svg> tag when exporting from xD.

    I ran some tests using Android Studio, and unfortunately this doesn't help, but that's another topic and I will post that in an appropriate bug report.

    Submitting...
  • AdminPeter Flynn (Software Engineer, Adobe) commented  ·  November 15, 2016 15:45  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    @Ludovic: Are you sure Chrome shows the file at 3000x2000 size? Usually, Chrome simply scales the SVG file up to 100% of the browser window size (unless it's embedded in HTML with a fixed size specified).

    SVG files like this appear to render at the correct size when imported into Sketch, too.

    I agree it would be cleaner if the SVG didn't have this big offset in its viewport, but I just want to understand a little more what problems it's causing. It almost sounds as if it's a _bigger_ problem for you that there's no fixed width/height set on the root SVG tag (causing Chrome to default to 100% size instead of fixed size)...

    Submitting...
  • Ludovic Vialle commented  ·  November 14, 2016 08:20  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Adobe XD 0.6.2.7 Beta SVG

    I am having this particular issue, which totally break our workflow when working on websites and android apps because XD output bad SVG files:

    - If you have an artboard that is located at 3000, 2000, which contains an icon I designed with a 48x48 size, then XD create a SVG file with the following attributes:

    viewBox="3000 2000 48 48"

    and on the path:

    transform="translate(3000 2000)"

    That mean that when using the SVG file in a lot of place (Sketch, Chrome when embedding svg code in html, Android Studio are a few examples), the image rendered is 3048x2048 and my icon is located at the 3000x2000 position, which is totally wrong.

    Sketch exports SVG correctly and XD should follow this proper behavior to support correct files that are usable everywhere:

    viewBox="0 0 48 48", and no transform since the paths coordinates needs to be relative to the artboard, not the entire Adobe XD project position!

    Another issue which will also prevent Android developers to use the SVG:
    The default size for the SVG file need to be added and it would be nice to have the SVG version in it, so to have a correct file, it should start with:
    <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink">

    Those are really minor fixes, but then the SVG exports would really work for most people (and I didn't try masks, etc, yet)!

    Submitting...

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