Skip to content
← Adobe XD Feedback : Feature Requests & Bugs

Settings and activity

1 result found

  1. Better svg export

    329 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

    17 comments  ·  Adobe XD: Feature Requests (Read-Only) » 05 : Asset exporting  ·  Admin →
    feature-started  ·  Mihnea Ovidenie responded

    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.

    An error occurred while saving the comment
    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.

    An error occurred while saving the comment
    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.

    An error occurred while saving the comment
    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  ·