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
May 26, 2016 · 3 min read

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.
Image for post
Image for post

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.
Image for post
Image for post
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.
Image for post
Image for post
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.
Image for post
Image for post
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.
Image for post
Image for post
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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store