SVG exported from Adobe XD has its path alignment distorted

493 Views Asked by At

I have symbol with an outer square and at the center an upwards pointing arrow towards the top right in Adobe XD. When I try to export it to svg, the final form gets all broken up, what I get is the arrow on the top-left corner of the canvas, and the outer rectangle in the bottom right.

Can anyone help me extracting the icon (which is just a square with the North East pointing arrow at the center of the outer square) from it? not sure how I can do that at the moment. I am guessing I may have to tweak the translation of the individual paths but I am not familiar with svg at all, if someone could point me in the right direction that would be great.

Here's my svg:

<svg xmlns="http://www.w3.org/2000/svg" width="692.657" height="510" viewBox="0 0 692.657 510">
  <rect id="Rectangle_1505" data-name="Rectangle 1505" width="99" height="98" rx="5" transform="translate(589.657 408)" fill="none" stroke="#fff" stroke-width="8"/>
  <path id="Path_162" data-name="Path 162" d="M10.5,57.972,57.972,10.5" transform="translate(-4.843 -4.021)" fill="none" stroke="#fff" stroke-linecap="square" stroke-linejoin="round" stroke-width="8"/>
  <path id="Path_163" data-name="Path 163" d="M10.5,10.5H57.972V57.972" transform="translate(-2.364 -6.5)" fill="none" stroke="#fff" stroke-linecap="square" stroke-linejoin="round" stroke-width="8"/>
</svg>
1

There are 1 best solutions below

0
Paul LeBeau On

It appears as if AdobeXD really messed up that export. Here's a corrected version. I hope it suits your needs.

svg {
  background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="auto" viewBox="0 0 107 106">
  <rect id="Rectangle_1505" data-name="Rectangle 1505" width="99" height="98" rx="5" transform="translate(4 4)" fill="none" stroke="#fff" stroke-width="8"/>
  <g transform="translate(31.4 16)">
    <path id="Path_162" data-name="Path 162" d="M10.5,57.972,57.972,10.5" transform="translate(-4.843 -4.021)" fill="none" stroke="#fff" stroke-linecap="square" stroke-linejoin="round" stroke-width="8"/>
    <path id="Path_163" data-name="Path 163" d="M10.5,10.5H57.972V57.972" transform="translate(-2.364 -6.5)" fill="none" stroke="#fff" stroke-linecap="square" stroke-linejoin="round" stroke-width="8"/>
  </g>
</svg>