The author of this post highlights a suboptimal aspect of Adobe Creative Design's SVG export feature. While the tool supports SVG export, the resulting SVG may contain unnecessary elements, which can be time-consuming for developers to clean up. The author provides sample files to demonstrate the difference between the exported SVG and a manually edited SVG that yields the same result but is cleaner.

The author suggests that a cleaner SVG export would be more beneficial for developers, as it would enable them to easily export portions of a canvas as SVG and wrap it up in Angular or React components. This would save developers time and effort in scanning through the SVG and removing unnecessary elements or rearranging them.

Overall, this post highlights the importance of efficient and clean SVG exports, which can greatly benefit developers and improve their workflow.

<a href="https://socialfunda.in/">

Isnt't it possible to just use the same engine to export svg as you have in Illustrator?
In my opinion this feature is at least as important for XD as for Illustrator. The final design I'm (as a developer) handed off by the designer is in XD, not Illustrator. So I'm dependent on XD to have a decent SVG export without unnecessary data-attributes and most important without transform-attributes(!!) .

Yes, hoping the SVG exports for XD will work better. The Adobe Illustrator svg and ai elements are not exporting correctly from XD to Zeplin using the soft UI styling. Long shadows generated in Adobe Illustrator with the Blend tool also not exporting. In conversations on both sides to solve. The soft UI double shadows and blended long shadows are disappearing with the shape filling in black. Rasterizing is the only solve currently.

The exported SVG Data often includes unnecessary tags like transform which make the SVGs really difficult to use in-line. We optimize all of our SVG code to be as minimal as possible and removing the transform attributes creates a lot of problems - thus making it so I have to export my SVG graphics from AI instead of XD (which is so much simpler).

Yes! And also, when XD exports groups and objects, it makes all the objects have absolute canvas coordinates, instead of local Artboard coordintes. Comon Adobe? So you put a group at 2500 x 5800 px and then inside the group you move the internal objects back -2490 x 5830 ?? That doesn't even make sense.

I'm doing hand animations of the objects inside the SVG, and I have the constantly fix all the screwed up coordinates or even worse, use these decimal coordinates in animation transform: statements. It's consuming SOOO much time!!!

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.

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.

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.

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.

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.

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

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.

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/

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.

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.

Right Sven, but we were seeking your suggested improvement on the "inside" stroked ellipse, without the need to export 2 shapes. :)

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