Sven Lauterbach

My feedback

  1. 167 votes
    Sign in
    (thinking…)
    Sign in with: facebook google
    Signed in as (Sign out)

    We’ll send you updates on this idea

    Hi,

    The feature that allows you to control the position of stroke: inside/center/outside was started and it will be available in the future versions of Adobe XD. Will let you know once the feature becomes available.

    Cheers,
    M.

    Sven Lauterbach commented  · 

    Thank you Mihnea, another things which would improve the svg export is normalized translation and viewBox coordinates. If i export a group from a canvas, the viewBox is relative to the "World coordinates" (0, 0) which yields a little bit large viewBox and translation coordinates, like viewBox="12137 3868 440 430" and translate(12137 3868). It would be great if the viewBox attribute could be "viewBox='0 0 <group-width> <group-height>" and all translation relativ to this and not the world coordinate 0,0.

    Currently i workaround this issues by creating a new canvas, giving it the width and height of the component i like to export and set the x and y coordinate of the canvas to 0,0. Than i copy the group into this new canvas and export it.

    Sven Lauterbach commented  · 

    Hi,
    i checked in chrome, you're right, there is a difference. I used the following svg:

    <svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; viewBox="0 231 1920 1080">
    <defs>
    <style>
    .cls-1 {
    clip-path: url(#clip-Web_1920_1);
    }

    .cls-2 {
    fill: #fff;
    stroke: #95989a;
    stroke-width: 4px;
    }
    </style>
    <clipPath id="clip-Web_1920_1">
    <rect y="231" width="1920" height="1080"/>
    </clipPath>
    </defs>
    <g id="Web_1920_1" data-name="Web 1920 – 1" class="cls-1">
    <circle cx="97" cy="97" r="95" class="cls-2" transform="translate(227 363)"/>
    </g>
    </svg>

    And this one which is exported from Adobe XD:

    <svg xmlns="http://www.w3.org/2000/svg&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; viewBox="0 231 1920 1080">
    <defs>
    <style>
    .cls-1 {
    clip-path: url(#clip-Web_1920_1);
    }

    .cls-2 {
    fill: #fff;
    stroke: #95989a;
    stroke-width: 4px;
    }

    .cls-3 {
    stroke: none;
    }

    .cls-4 {
    fill: none;
    }
    </style>
    <clipPath id="clip-Web_1920_1">
    <rect y="231" width="1920" height="1080"/>
    </clipPath>
    </defs>
    <g id="Web_1920_1" data-name="Web 1920 – 1" class="cls-1">
    <g id="Ellipse_1" data-name="Ellipse 1" class="cls-2" transform="translate(227 363)">
    <circle class="cls-3" cx="97" cy="97" r="97"/>
    <circle class="cls-4" cx="97" cy="97" r="95"/>
    </g>
    </g>
    </svg>

    If you open both in 2 Tabs and switch between them it is hard to spot a difference, but with chrome developer tools you can see that the exported i slightly bigger (0.5). Would be cool if we could influence this behavior in Adobe XD.

    Sven Lauterbach commented  · 

    apperently you have to upload attachments before login in through google, the attachments are missing, but as i said, just add a circle, give it a fill, give it a stroke and export it

    Sven Lauterbach shared this idea  · 

Feedback and Knowledge Base