Exporting SVG incorrectly can cause visual errors on the page but also cause validation errors inside Web Audit. Using these settings in Adobe Illustrator can reduce or eliminate these errors all together.
When you export your SVG in Adobe Illustrator you should get a popup for "SVG Options", these are the options you should select
1. For "Styling" you should select "Inline Style"
This will move the styling for your paths and text to be on a per item basis. This will fix the issue where multiple SVGs on the page conflict with each other.
2. For "Images" you should select "Embed"
This will encode the image data into the SVG itself. If you do not select embed it will try to reference the file that the image is stored in on your computer. This file will not be in the same location on the CMS which will cause the image to not load.
3. For "Object IDs" you should select "Unique"
This will give every path, layer, and object inside the SVG a unique ID. You will get errors in Web Audit and using validator.unl.edu when multiple elements on a page have the same ID, this will help prevent any two SVG elements from having the same ID.
4. You should select "Minify"
This will remove any unneeded characters from the SVG file. Without this setting checked it will make the file more human readable, but with it checked it will remove the characters we do not need. This will improve page load times and fix errors related to invalid characters inside the SVG.