Be nice. Or else.
Designer at Peter Nowell Design Joined about 3 years ago
Fellow designers and developers! If you’re like me, you’ve probably wondered about all that mysterious code at the beginning of an SVG file. What is it, and when can certain pieces safely be removed?
This article explains all of that—a cheat sheet that I always wished I had. Enjoy!
Hey fellow designers and developers! I just released this free web-app for optimizing SVGs—especially those exported from Sketch. SVGito is launching with a few optimizations that you won't find in other SVG optimizers (so it’s a companion, not a replacement, for tools like SVGO/SVGOMG). The big one is cleaning up Sketch's extra fill + inside/outside border markup, which I wrote about recently.
Check out the release article (above) and please share your feedback and suggestions.
To paraphrase my understanding of their reasoning:
(Personally I think that recreating the border in the first place is flattening. It's already happening, so why stop short?)
(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!
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.
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?
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!
So glad to you found it useful, Shawn! For those of us who prefer making layouts in Sketch, those techniques are really a life saver. :)
That's true! I found that Flinto's ability to automatically interpolate between connected layers (especially basic shapes) in the Transition Designer, along with 3D rotations and super easy timing/easing tools allowed me to create more stunning animations in 2 day than a motion graphics animator could get through in a week. Sure, it doesn't support multiple keyframes, but you can fake that and get surprisingly far with groups and additional screens.
Designers frequently throw around terms like "3x", "HiDPI", "DIPs" and"Pts" and I felt there needed to be a better visual explanation of what everything means and how pixel density affects us as designers.
Check out the video and share it with someone who's trying to understand this stuff!
Love how quickly you can now access a gesture, by clicking on the link line!
Be nice. Or else.
Designer News is a large, global community of people working or interested in design and technology.