Request details

Better svg export

Adobe Creative Design supports svg export which is great, but the resulting svg is a little bit suboptimal. For example, if i create a simple circle, give it a stroke-width of 4 with some color and a fill
the resulting svg contains a group element containing 2 circles, one with a fill and the other with a stroke.

It would be great if the exported svg could be cleaner. I attached some sample files. the "_exported.svg" is the file exported from Adobe XD, the "_edited.svg" contains the svg, which yields the same result but is cleaner.

A cleaner svg would allow to export some portions of a canvas as svg and wrap it up in a Angular or React component. Currently the developer has to scan through the svg and remove unnecessary elements/rearrange them etc.

162 votes
Sign in
(thinking…)
Password icon
Signed in as (Sign out)

We’ll send you updates on this idea

Sven Lauterbach shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

12 comments

Sign in
(thinking…)
Password icon
Signed in as (Sign out)
Submitting...
  • Austin Andrews commented  ·   ·  Flag as inappropriate

    Would be nice to see an option to merge the clipPath's in the SVG export. I have to go back to illustrator to clean up paths at the moment. It's really pretty SVG export, but not optimized file size wise.

    SVGO has a request for a similar task of merging clipPaths, but since the math involved is so advanced it probably won't be added for a while if ever.

  • Magali commented  ·   ·  Flag as inappropriate

    Better svg export. I've created a clean svg file from Illustrator, then imported it inside my CC library, then used it on XD. When exporting the svg from the XD specs, it does not respect the original settings of the svg file, but adds a lot of code.

  • Carlos commented  ·   ·  Flag as inappropriate

    I think another nice thing would be to respect the original file if I bring in an SVG-file into my XD design. So that if I then mark the graphic for export and a developer downloads it through the design spec she/he gets an identical file as I put in from the beginning. This would make the asset export much more useful for sharing icons and other graphics in a consistent way, as you can make sure that the original file is clean and has the appropriate viewBox/size.

  • David commented  ·   ·  Flag as inappropriate

    What in the world is in exported SVG. A separate CSS HTML-like container and bunch of transform properties for every path? Cmon, this can be done better. SVG is an essential format. It's 2018.

  • André Taris commented  ·   ·  Flag as inappropriate

    Why no export to layered PSD, whyyyyyyyy? this is a failed project (XD) if we cant share layered artboards,
    -sheesh. This SVG hacking to export and cleanup is pretty dumb. Feels like scripting in cs4. You would expect to make this as basic functionality with CC.

  • AdminKyle Galle (Admin, Adobe) commented  ·   ·  Flag as inappropriate

    SVG export improvements (these are all features found in Illustrator's "Export As"):
    Ability to minify the SVG but keep ID's (useful for coding animations)
    Being able to control whether width/height are coded (Illustrator's poorly named "responsive" option).
    Converting text to outlines upon export (without having to convert the design).
    Controls for whether CSS or presentation attributes are used

  • Iván Soria commented  ·   ·  Flag as inappropriate

    Cameron, That SVG cleaner link and ideais awesome. Almost a feature request by itself. :thumbsup:

    And yes, it would be awesome to have a quick export mode as in Ai, where one can copy and paste an SVG quite easily.

  • Cameron Sagey commented  ·   ·  Flag as inappropriate

    I agree and would like to provide an example of a "SVG" cleaner that is really good. At my company, any time anyone exports an SVG it is mandatory to run it through SVGOMG. It greatly reduces the file size and reduces random problems that arise from badly exported svgs. Please take a look at how they do it. If XD has an option to export a bare-bones clean svg like this, it will remove a repetitive step in the export process.

    https://jakearchibald.github.io/svgomg/

  • Sven Lauterbach commented  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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

Feedback and Knowledge Base