some things are not exported with correct positions and rotations.
might be related to instanced components or rotated groups.
also, xd shows and exports the 1px lines as 1px sharp, the exported html/css shows them as 2px lines. might be due to xd snapping them to the closest pixel.
example file with export settings & screenshots:
webExportTest.zip (89.1 KB)
adobe xd 20.1.12.4, confirmed on 21.2.12.3
webexport 2.7.1
windows 10 version 1809
Thank you. The example shows right away what the issue is. Right now, rotation support is experimental and it looks like this is a case where the rotation positioning is incorrect.
In my export locally the line is 1px so something might have changed to fix it. Here’s the exported Line:
<svg class="Line_2_A0_Line_4">
<path fill="transparent" stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2_A0_Line_4" d="M 0 133 L 0 0">
</path>
</svg>
Note: Lines are exported as paths currently.
For the rotation issues there might be some work on this in the next version. As a temporary hack you can add a style with the correct top and left or convert the group into an image with the convert to image option.
oh that convert to image looks useful!
also, the 2 circles do not line up correctly in the browser. not sure if this is also the rotation issue or another imprecision.
with the line, it seems like the subpixel value is lost on export. i updated the example to show the issue:webExportTest.zip (105.7 KB)
really just a minor issue, but i noticed it while experimenting
Convert to image exports both normal and high resolution images. So in the past the advantage of vector was that it would look sharp at any resolution. With convert to image enabled a 2x export is included so you have a sharp image ready and waiting when hi res is available. I’ll write a post about this.
The zip xd project doesn’t contain the new lines but it does contain snap shots and I see the issue. Could you update the project and resend? I’ll look into this.
Browsers have render half pixel values based on a few issues. There is a style called shape-rendering that handles how SVG is drawn in some cases. For lines this is set to auto.
sorry for the confusion i must have forgotten to pack the new xd file.
WebExportTest.xd (78.8 KB)
the line issue is really nitpicking, but here is another try at explaining:
What browser are you testing in? I’ve seen this on some browsers at 72dpi. Here is what I see in Firefox and Chrome:
Try this. Set the shape-rendering to crispEdges on Line 3 and Line 4 in the sub styles:
This value indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
browser is Firefox 68.0.1 (64-Bit) and chrome 75.0.3770.142
the shape-rendering makes the line precise. awesome!
although this makes both lines sharp, so it is still different to xds native behviour, but should be enough to control the sharpness.
one ui thing: i am unable to remove this tag / clear the field. when i delete it and exit the field, the text pops back in.
also, the property window looks different on my version, but xd (21.1.12) says that its up do date, and the plugin (2.7.1) too.
another thing i noticed:
inside / outside stroke (/border) alignment does not work and always exports as centered.
quite noticable since xd’s default is inner border.
webExportTest.zip (307.7 KB)
this might be due to the svg standard not supporting it, but i think in css it should work with
outline: 3px solid black;
outline-offset: -1.5px;
in general, would it be possible to use simple divs instead of svg for rectangles?
so instead of
<svg class="Rechteck_333">
<rect id="Rechteck_333" rx="7" ry="7" x="0" y="0" width="32" height="32">
</rect>
</svg>
it would be
<div class="Rechteck_333">
</div>
style: Rechteck_333{ border-radius: 7px; width: 32px; height: 32px; }
just a general question, it might be a lot more programming effort though
What field? This bug existed with the hyperlink field and another field. You would clear the field and it would become filled again. It should be fixed in 3.0.2 (in release).
The property window I’m using is 3.0.2.
That’s interesting! The reason it’s not supported is because it’s not supported in the browser. I’ll have to see if the results match XD.
Yes it’s possible. Rectangles don’t need to be in SVG. It’s something that’s been considered as possibly an export option, “Export as div”.
In version 3.0.2 and newer versions you’re going to start seeing options specific to the element selected. For example, if you select a group you will have layout options display. If it’s not a group they are not shown.
I might have a fix for this. It will be in the release after next.