11 comments

  • Peter NowellPeter Nowell, over 6 years ago

    Hey fellow designers! There’s an amazing hidden feature in Sketch’s v43 update... Sketch’s SVG export just took another giant leap forward with this new inside/outside borders feature. No other design software comes close. Enjoy the article!

    3 points
  • Marc EdwardsMarc Edwards, over 6 years ago

    Worth noting that this is hopefully an issue with a future fix, using the proposed stroke-alignment SVG feature.

    https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment

    1 point
    • Peter NowellPeter Nowell, over 6 years ago

      Totally, and that's obviously the best way to handle inside/outside strokes! I left a little note about this in the article, but it's unfortunate that SVG 2 has yet to be implemented in any browser yet. Which means that it's going to be quite a while before the stroke-alignment feature can be relied upon for consistently displaying inside/outside strokes.

      1 point
  • Jack BachJack Bach, over 6 years ago

    Nice article Peter!

    A problem I've come around several times has to do with the coordinates of the points. I usually import paths in three.js to create extrusions and would like them to have the center at (0, 0). I was wandering if you know a way to set the anchor point before exporting?

    1 point
    • Peter NowellPeter Nowell, over 6 years ago

      Hey Jack, are you referring to the center of the bordered path being 0,0 (effectively giving it a centered transform-origin in SVG's coordinate system), or just having one of the vector points on the bordered path be positioned at 0,0?

      0 points
      • Jack BachJack Bach, over 6 years ago

        The first (having the center of the path at 0,0). That would mean that Sketch would translate all the points. I tried in the past putting the svg in an Artwork and the path's center at the top left of the artwork, but I think it didn't work :/

        0 points
  • Ted McDonald, over 6 years ago

    This is great! I export SVG's all the time and border behavior always annoyed me.

    1 point
  • Noah SNoah S, over 6 years ago

    Great insight into the technical deets of SVG's. Sign me up for the optimiser you're working on!

    1 point
  • Gabe WillGabe Will, over 6 years ago

    What was Bohemian's response on why they chose to handle filled shapes with inner / outer borders the hard way?

    0 points
    • Peter NowellPeter Nowell, over 6 years ago

      To paraphrase my understanding of their reasoning:

      • Putting the stroke and fill on the same layer—and therefore removing any trace of what the original path was—could be considered "flattening." They argued that certain users may not expect it to be flattened in this way.

      (Personally I think that recreating the border in the first place is flattening. It's already happening, so why stop short?)

      • They also felt that developers often need to keep the original path/layer intact in some way... retaining it's dimensions and position.

      (I think there's theoretical truth to this, but I haven't heard of anyone actually in this scenario. People in this situation can so easily create 2 separate layers for their border and fill before export. Also, I think developers might be far more frustrated that Sketch codes 'in/out border + fill layers' differently from 'centered border + fill layers', despite the fact that both end up in SVG as centered strokes.)

      I think there's some merit to their arguments, and I admit that it can be difficult to make these decisions... especially as Sketch seems to be committed to a one-click SVG export experience instead of providing more options like AI or Affinity do. Hard to have it all!

      1 point