Skip to main content
S
Shareef Hadid
New Participant
February 8, 2020
Question

SVG Export without transform: translate

  • February 8, 2020
  • 6 replies
  • 8206 views

Hi,

 

I am trying to build an SVG using adobe XD to export and use within an HTML document. I plan to animate this SVG by targetting the ID of the path/group and using the transform attribute to translate/rotate/etc. a section of the SVG.

 

For some reason, when I export the SVG, adobe XD draws the paths without correctly positioning them, then uses transform: translate(X,Y) to move the path/group to the correct position. This is in contrast to drawing the path in the correct position within the SVG canvas to begin with (using d="M X Y"), which would make transform: translate(X,Y) redundant.

 

This creates issues when I try to use the transform attribute in my animation. Transform always overrrides existing values when it is set, leading the paths/groups I am animating to become mispositioned. I hope I have made my issue clear.

 

If there is something I am missing please let me know. Other design software, such as Figma, does not have this issue. It simply draws the paths in the correct positions, esssentially freeing up the transform attribute for the front-end developer. If there is a work around, or something I have misunderstood, please let me know. Thank you in advance 🙂

    This topic has been closed for replies.

    6 replies

    R
    r.blinzler
    New Participant
    May 7, 2022

    I am having the same issue.

    In my case, I did the entire app mockup in Adobe XD (that's what it's for?). I have several svg elements that I want to put into an html page. One specifically is a path in which I will create an <animateMotion> <mpath> to animate other svg elements along.

    My problem is, the path is drawn outside of the artboard and XD uses (at least in the svg code) a transform translate to move the path into the artboard. This means the path the other elements follow is outside the visible area of my project.

     

    Why does XD do this? Is this how it generates the SVG Code or does it actually paint elements in a staging area outside of the artboard and then position them using transforms? Should I be using another application to design my mockups?

     

    R
    r.blinzler
    New Participant
    May 7, 2022

    I was able to get the desired path without the transform, by following the instructions to use Illustrator as an intermediator

    Clever_Ocean15A9
    Clever_Ocean15A9
    Inspiring
    May 11, 2021

    We are also running into this issue. Exporting from XD to Illustrator does work as a quick patch but not as a solution. Tremendously hinders workflow!

     

     

    Please advise!

      Prototypen
      Prototypen
      New Participant
      April 29, 2021

      If you have Illustrator CC, the simplest and most straightforward solution to this, is to 1) export your XD-artboard to SVG, 2) import the SVG to Illustrator CC, and 3) select all objects and copy and paste the SVG-markup in a text editor.

       

      Voila!

       

      The transform-things are completely removed and the positioning works as expected 🙂

      D
      DYNWEB.CZ
      New Participant
      April 30, 2021

      I still miss the point... OK, I can copy (XD) and paste (AI) the images I want to have "nicely created SVG source code" or I can use some other tool (SVGMO mentioned above) BUT why? Why the heck should I have two apps open and slow down my workflow? XD has some cool built-in assets export features. Both XD and AI are the products created by the same Adobe company, right?

        D
        DYNWEB.CZ
        New Participant
        February 26, 2021

        I love to create SVGs in XD but this is a blocker. AI exports SVGs as it should be in XD too. I hope you will fix it.

        D
        dominikk90967463
        New Participant
        March 27, 2020

        I am just having the same issue for the exact same thing as Shareef. It would really be nice if there is a solution to this. 🙂

          D
          dominikk90967463
          New Participant
          March 27, 2020

          For those with the same issue, I found this tool useful: https://jakearchibald.github.io/svgomg/

            O
            oooola
            New Participant
            April 28, 2020

            Thanks. Very useful tool.
            With the settings
            Pretty Markup ON
            Clear IDs OFF
            I can easily find and copy my animation paths without any transform translate.

            Preran
            Community Manager
            PreranCommunity Manager
            Community Manager
            February 12, 2020

            I am not sure about the limiations of creating an SVG in Adobe XD, but if you are subscribed to CC, you can try using Illustrator and see if that meets your requirements. I would also suggest reading the section on exporting to SVG in this article https://helpx.adobe.com/ca/xd/help/export-design-assets.html to check if there is anything you are missing when exporting to SVG.

              S
              Shareef HadidAuthor
              New Participant
              February 12, 2020

              Thank you for your reply. I am not subscribed to CC and don't have access to illustrator. From what I have read, illustrator would meet my requirement. I am just providing feedback in the hopes of improving XD, as this is a very basic feature that most design tools do well. I have already used Figma, which is a free design tool, to address my issue. I have already read the article you have linked as well 🙂

                Preran
                Community Manager
                PreranCommunity Manager
                Community Manager
                February 14, 2020

                Thank you for your feedback and taking time to share it here. I will share your observations with the product team. I am sure that they are aware of it, but every voice counts in helping them prioritize feature sets.

                 

                Have a wonderful weekend,

                 

                Preran

                Terms & ConditionsAccessibility statement
                Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices