Svgsus: Tips & Tricks

Here are a few short and handy explanations on some of the things Svgsus can do to improve your workflow, both when designing and developing.

Department
3 min readMay 26, 2016

Mac App Store | svgs.us

Add your own icon sets

  1. Drag a folder that contains svgs into Svgsus.
    Tip: If the svgs are located in subfolders, they will be grouped by each subfolders name inside Svgsus.

Add tags to your SVG’s to improve search results

Available from v0.15.0

  1. Select an svg of your choice.
  2. Enter desired tags in the expanded toolbar.
    Tip: If you’re sharing the folder with others (via e.g. Drive, Dropbox) the tags will be shared as well.
Add tags to improve search / filter results

Alter icon sizes

  1. Use “CMD +” / “CMD -” to alter the size of the icons.
    An icon will never grow larger then it’s source size.
  2. Use “CMD 0” to restore sizes to default values.

Turn an SVG file into code

  1. Make sure you have the proper output selection in the preferences.
  2. Drag the .svg file into Svgsus.
  3. Release the file into Svgsus, and paste (cmd+v) into your editor.
Drag your svg into Svgsus, and keep dragging it to your editor to paste the generated code.

Turn a shape selection into an SVG file

  1. Make the selection and copy the shape (cmd+c).
    Use Sketch, Illustrator or some other vector based tool
    .
  2. Paste (cmd+v) it into Svgsus.
  3. Paste again wherever you wan’t the svg to be located. What you got now is a clean and beautiful svg.
    Tip: Code for the svg is also available if you paste into an editor.
Easily export a shape to a cleaned svg file.

Convert multiple files at once

Available from v0.15.0

  1. Enablemulti convert’ in the top right corner.
  2. Select the assets you’d like to export.
    Tip: Use cmd+a / cmd+alt+a to select / deselect all.
  3. Select desired format.
    Swift code isn’t currently supported, but will be added soon.
  4. Convert!
  5. Open Finder in desired location and paste (cmd+v) the files.
    If you prefer to select location right away, simply click the download icon.
Convert multiple SVG’s at the same time

Need an actual SVG file as output?

  1. Press an icon (or drop it or paste it) into Svgsus.
  2. Now paste (cmd+v) in finder, this gives you a cleaned svg file.

Try Svgsus out at the Mac App Store Or read more at svgs.us.

--

--