This workflow holds true—it has not been deprecated. Typing 300w into an Export Setting will not do the math for you… you need to multiply the width of your final product by 300. For example, a 4 inch × 4 inch design should be 1200px at 300dpi, so you’d type
1200w into the Export Setting. I’ve updated the Medium response to include this second example.
Thanks, Scott! The challenge you describe—about inside or outside borders turning into masked SVG strokes—was effectively solved in Sketch’s v43 update last year. When exporting, Sketch now tries to re-create inside or outside borders using centered SVG strokes, without relying on masking or outlining. I actually used to do this manually, and I…
The Scissors tool is accessible in two ways: via Layer > Path in the menu bar, or by customizing your toolbar (right-click it to see this option) to add the Scissors tool or the Tools dropdown to your toolbar. My preferred approach is the Tools dropdown in the toolbar, because it de-clutters the toolbar and is accessible with a single click.
The best solution for a website’s logo would probably be SVG, but if you use a PNG I’d export it at 2x. I always suggest designing for the web at 1x in Sketch (like you would for an app), because 1px in CSS tends to be equivalent to 1pt. Then export @2x.
It does the same thing as Vectorize Stroke, and you can find it under the Layer menu in the menu bar. The keyboard shortcut is command shift O.
It’s a great book — especially for front-end developers getting started with SVG. I actually recommend Chris’s book in my course, as a resource.
I haven’t seen any resources or guides that provide comprehensive and practical conclusions about these declarations at the top of an SVG, however — thus the inspiration for this article.
SVGito is not intended to replace, or even overlap with, other optimizers like SVGO (which SVGOMG is based on). The article mentions this at least three times. I’m a huge fan of SVGOMG, and created SVGito to have…