Best Practices for Saving SVGs to Upload in Design Huddle

One of the best ways to get editable designs into Design Huddle from Illustrator or Photoshop is by saving them as SVGs. SVGs are vectorized image files for two dimensional graphics. When exporting them, follow these steps in order to have them be uploaded properly into Design Huddle. You can upload them into any Canvas by dragging and dropping or selecting the Upload button in the editor. 

Saving an SVG within Adobe Illustrator:

  1. Select the object
  2. If any part of object has a stroke color, you will need to expand the object by clicking Object > Expand and click OK.
  3. If object has editable text, you will need to convert the text to outlines. Select the text only and click Text > Create Outlines.
  4. Before saving, Artboard must fit to object. With object selected, double click the Artboard Tool (see screenshot). When the Artboard options appear, click the dropdown menu and select 'Fit to Selected Art' (see screenshot). This ensures no unnecessary space will be added around object when selecting object within Design Huddle (see screenshot).
  5. To save object, click File > Save As. In the format menu options, click SVG. In the SVG options, please use the following below or (see screenshot):
  6. SVG Profiles: SVG 1.1
  7. Type: SVG
  8. Subsetting: None
  9. Image Location: Embed
  10. Uncheck 'Preserve Illustrator Editing Capabilities
  11. CSS Properties: Style Attributes
  12. Decimal Places: 1
  13. Encoding: Unicode (UTF-8)
  14. Check 'Output fewer <tspan> elements
  15. Uncheck 'Use <textPath> element for Text on Path
  16. Check 'Responsive'
  17. Uncheck Include Slicing Data
  18. Uncheck Include XMP
    Click 'Ok'

Saving an SVG from Photoshop:

  1. Open the Adobe Photoshop file within Adobe Photoshop.
  2. Click File > Save As
  3. In Format menu click Adobe Photoshop and Save.
  4. Open Adobe Illustrator and click File > Open.
  5. Locate the Adobe Photoshop file and proceed to open.
  6. From here, follow steps for Saving an SVG within Adobe Illustrator above.