Inner and Outer Border / Stroke differences

Adobe XD UXP Plugin API
,
#1

The Astui plugin is about to evolve providing some great new functionality for creators. However, we’ve just discovered one very important difference with how XD handles Inner and Outer Borders (Strokes) when combined with chamfered or rounded corner types. It makes XD go against the flow of other vector apps including Illustrator, Affinity, Sketch and InVision. The difference is illustrated here:

Outset%20stroke%20and%20corner%20types
Outset stroke and corner types.gif1200×920 95.2 KB

With inner/outer stroke types not being defined in SVG, there’s no real defining document on the method to adopt. But I think I’m right in suggesting that Illustrator was the first to offer this functionality, and remaining the #1 vector design tool by usage, it makes the difference a major potential issue for interpretability for designer’s workflow.

I would appreciate any feedback from Adobe (especially @kerrishotts) on this as well as other user’s views on the difference.

I’ll also poll users beyond this forum as it’s an issue that affects workflow for those in other design packages and our own Astui API.

Thanks!

#2

So I talked with the internal team and the indicated that there are some differences between Rectangles and Path objects. Which kind of object is being used here?

Also, it seems that the original intent was to align with how Chrome handled rendering, which would help explain the differences.

#3

Thanks @kerrishotts - very insightful!

Indeed, I was working with native “live” rectangles. However, when I construct a rectangle with the Pen Tool, the rendering matches the other apps.

This brings the next comment; there is no way to glance at a rectangular shape to know how it’s been constructed. With much artwork still originating outside XD (most notably, Illustrator), the difference could be problematic for consistency.

However, it does answer the cases when this rendering approach takes place.

As you saw from the separate post Outline Stroke (border) and Offset Path functionality preview, we want to minimise times when outlining of the stroke (border) causes a change in appearance. In theory, we could handle live rectangles differently in the plugin, but I fear that’s a slippery slope.

Perhaps it’s a storm in a teacup - ie. not really important. For strokes (border) widths of 1 or 2px, you’d never see it.

#4

Re:

there is no way to glance at a rectangular shape to know how it’s been constructed

For users, if you select a rectangular shape you can tell if it’s a rectangle vs. a path by seeing if it has corner radius controls. Or you can look at what icon it has in the layers panel.

For a plugin developer, you can check if it’s an instance of Rectangle vs. Path.

#5

Thanks @peterflynn - indeed, once selected it’s possible to see this. The problem is when simply glancing at a document without indivual objects being selected.

As I said, it may not be an issue for many.