Preparing SVG

Getting SVG ready for production
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.
SourceFigma

Preparing SVG for production

When exporting svg, here are some tips to ensure svg is production ready and can be included.

Follow the design guidelines.

If in doubt about a design decision, reach out in the #design-systems Slack and we're available to help.

Final design checklist

  • Meets technical constraints

  • Stroke cap, angles, spacing, and radii are visually consistent with existing product iconography

  • Appropriately filled vs outlined

  • Squares and rectangles radius consistent with product environment.

  • Irregularly shaped corners are curved consistently with other icons in the product environment.

  • Inner junctions do not have a radius consistent with other icons in the product environment

  • Icon does not communicate its meaning solely via color

  • Icon's subcomponents are sized to appropriate scale

  • Icon can be coupled with text and the overall meaning is improved

  • Icon conveys a specific meaning

  • Contextual mockup included in Ready for Review file

Final technical checklist

  • Remove white background from icon frame

  • Outline all strokes of vector shape

  • Union shapes

  • Merge/flatten vector (cmd + e)

  • Remove any unused points

  • Vector layer color set to icon.default

  • Name the icon frame to the correct icon name

  • Name is lower-cased and uses a “-” to separate the descriptors, a.k.a "kebab-case"

Exporting from Illustrator:

The Fuegoicons icon design kit for Illustrator can be found here.

  • Draw a 16 x 16 or 32 x 32 px artboard. 16 px icons should have 1 px padding. 32 px icons should have 2 px padding.
  • Place the icon squarely on the artboard, making sure it's aligned to the pixel grid.
  • Expand all strokes Object → Expand.
  • Select all overlapping shapes and click the “Unite” icon in the Pathfinder panel to merge all of the shapes together.
  • Make sure the icon is at #000000 and has no additional styling.
  • Select File → Save a Copy... from the top navigation.
  • On the Format dropdown select “SVG”.
  • Below Format select Use Artboard, then select either all or a range of artboards, depending on your need.
  • Click Save.
  • The SVG Options dialog will then open, and you should select the options shown below:
A picture of the options available when exporting svg from Adobe Illustrator.

Make sure the preferences are the same as in the image above.

Exporting from Figma:

The Fuegoicons icon design kit can be found in Figma here..

  • Remove white background from icon frame
  • Outline all strokes of vector shape
  • Union shapes
  • Merge/flatten vector (cmd + e)
  • Remove any unused points
  • Vector layer color set to icon.default
  • Name the icon frame to the correct icon name
  • Fuegoicons should be lower cased and use a - to separate the descriptors, a.k.a "kebab-case"