Tips on working with SVG

Uploading to Noun Project requires files to have certain standards with how it was created and exported. They are defined in the Creator's Handbook. Sometimes these are easy to spot and fix, other times it can be more difficult due to hidden or locked layers. Use these tips to export better SVG icons and shorten your wait. 

Upload Errors

If you receive any of the following errors while uploading to Noun Project, please try to resolve them using the tips that match the error messages.

"We cannot accept this file."

We only accept valid SVG files. Check to make sure your files end in .SVG. If they do and you still see this message, chances are the file has been corrupted or is invalid.

Try to re-export from the app you created the icon in.

Adobe Illustrator:

• How to export SVG | Adobe Illustrator CC tutorials 
• Check the box `Use Artboards` if it is available
  

Sketch App:

• Understanding Sketch's Export Options
• Export 100px by 100px art boards
  

"Contains CSS fills that are not black."

`Fill` is the color of the inside of a shape in your icon. You may or may not see these colors that are not black in your icon. Sometimes by default, apps like Adobe Illustrator use a color that looks black on your screen, but isn't the black required by the upload process.

Follow these steps:

• Make sure your colorspace is set to RGB, (not CMYK or greyscale)
• Delete any hidden layers
• Unlock any locked layers
• Select all elements with fill and change the fill color to `#000000`

"Contains strokes."
"Contains CSS strokes."
"Contains CSS strokes that are not black."

`Stroke` is the color of the lines in SVG. Most of the time you should `outline strokes` before uploading to Noun Project.

Sometimes by default, apps like Adobe Illustrator use a color that looks black on your screen, but isn't the black required by the upload process.

Follow these steps:

• Make sure your colorspace is set to RGB, (not CMYK or greyscale)
• Delete any hidden layers
• Unlock any locked layers
• Select all elements with strokes and change the stroke color to `#000000`
• Outline strokes to make them shapes instead of lines. (this helps them scale more consistently with the rest of the icons on Noun Project)

"Contains strokes without full opacity."

All strokes must be at full opacity, which means it is not transparent at all. This can be a percentage in Illustrator, or a fraction of 1 in the code itself. In SVG opacity of an element should always be 1 when submitting to Noun Project.

Follow these steps:

• Delete any hidden layers
• Unlock any locked layers
• Select all elements with strokes and make sure the opacity is at `100%` or `1.0` in the SVG code.

"Contains gradients."

Please remove any gradients from your SVG file as they are not supported on Noun Project.

Follow these steps:

• Make sure your colorspace is set to RGB, (not CMYK or greyscale)
• Delete any hidden layers
• Unlock any locked layers
• Select all elements with fill and change the fill color to `#000000`

"Contains hidden layers or elements."

Please remove (delete) any hidden layers before exporting your SVG. 

Follow these steps:

• Unlock any locked layers
• Delete hidden layers
• Check the box `Use Artboards` if it is available in your app while exporting

"Contains text."

Please remove any text from your SVG file as in almost every case they are not supported on Noun Project. If the text element in your icon does qualify you must `Create Outlines` your text ( or create the text into vector shapes ).

Follow these steps:

• Unlock any locked layers
• Delete any hidden layers
• Delete any text elements that are not needed
• Select any required text elements and `Creating Outlines` with the text layer selected
• Check the box `Use Artboards` if it is available in your app while exporting

Create Outlines in Adobe Illustrator:

Create Outlines in Sketch App:

"Contains Animations"

Please remove any animations from your SVG file. This typically is done by opening the file in a text editor, and deleting any element such as:

• `<animateTransform >`
• `<animate>`
• `<animateColor>`
• `<animateMotion>`

Don't forget to remove the entire element, from `<` to `>`