Optimize your Sketch SVG’s with SVGito

SVGito is a web app created by Peter Nowell that cleans up SVG files exported from the Sketch App. You copy and paste the SVG code, or drag and drop it into the app and it does its magic:

During the cleanup process it does four things to the SVG:

  • Cleans up Sketch Layers with Fills + Inside/Outside Borders
  • Replaces “Single-Instance” <use> Elements with Their Reference
  • Removes Unnecessary Fill-Rule Attributes
  • Removes <defs> if there’s nothing inside

This tool is designed primarily for SVG’s exported from Sketch, but I’d love to see it add support for renaming styles inside other SVG’s. For example, last week I hit a weird issue where multiple SVG files defined styles with the same name, .cls-1, When I added these inline, they would conflict causing the icons to display wrong. The solution, in this case, was to open each one individually and do a find and replace on the cls-1 selectors.

Airbnb Releases a React Sketch.app

Airbnb released a new open-source library named React-sketchapp that allows you to write React components that render to Sketch documents.

They said they’ve built this tool because managing the assets of design systems in Sketch is complex, error-prone and time-consuming. Sketch is scriptable, but the API often changes. React provides the perfect wrapper to build reusable documents in a way already familiar to JavaScript developers.

Getting started with this new tool is easy. Just be sure you are running Sketch 43+ and have a recent install of NPM. Then install it and run it with the following:

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

npm run render

Even the code output from their example is not horrid like you might expect from a tool like this:

import { render, Text, Artboard } from 'react-sketchapp';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
      { props.message }
    </Text>
  </Artboard>
);

export default (context) => {
  render(<App message="Hello world!" />, context);
}

For more information check out their announcement and Github repo.

Making seamless SVG patterns in Sketch

Steve Schoger, the creator of the popular service Hero Patterns, created a video tutorial on how he puts together seamless patterns using the Sketch app.

I’m always fascinated at watching the way other people work especially when they are using tools that I use, but that I’m not an expert at. Even though I’ll probably never create a seamless pattern, I picked up a few tips to increase my Sketch productivity in this video.

For more information on how to handle the CSS side after exporting check out his accompanying blog post.