Metro Nova Creative Fredericksburg Graphic Design logo
Specializing in gorgeous logos and professional-looking websites
Who You Gonna Call? (540) 369-3200
Troubleshooting SVG Files Exported from Illustrator to Elementor

Troubleshooting SVG Files Exported from Illustrator to Elementor

You’ve uploaded that SVG icon file fifteen times from Adobe Illustrator to Elementor, and it just won’t change colors.  We feel you. There is a lot of conflicting information on which settings will cause an Illustrator icon to work correctly in Elementor.  I tested lots of different settings, and I think I’ve located the actual problem. It’s simpler than you may think.

Why won't my SVG icon change color in Elementor?

Your SVG icon won’t change color in Elementor because it isn’t #000000 black.  

See, Illustrator’s default palette does not use a #000000 for the black color.  If you are using the black swatch from the color picker or swatch palette, you aren’t actually coloring your icon black.  See the image below:

Elementor to Illustrator conversion not web black

As you can see, the default black in Adobe Illustrator is not the #000000 black that is necessary for icon recoloring.  Set your icon’s fill color to #000000 black, and you should find that the icon works correctly in Elementor

But What About SVG Export Settings from Illustrator to Elementor?

Like you, I’ve read lots of instructions on how to export a .svg file from Illustrator to Elementor that will work correctly.  Every person seems to have their own special sauce that works for them.  I decided to test multiple settings to determine if I could cause an icon to break with certain SVG export settings, and I could not.  

You read that right: I could not break my SVG import by changing export settings, or by using Export for Screen instead of Export As.  

Still don’t believe me?  Well, check out the icons below.  I did not use a diff comparison to check the files generated by each of the settings listed below for differences, but I did check file sizes.  I did see larger file sizes when I turned off Minify and Responsive, as expected.  Save As resulted in the largest files. I also had larger file sizes when I saved out with large artboards, and the settings labeled Crazy and Crazy 2 below ended up with larger file sizes, too, but none were excessively large.  Everything I did stayed well under 2000 bytes.

Not Black

The default "black" swatch in Illustrator is not, in fact, #000000 black. It's #231f20. As you can see, if your icon is set to anything other than pure #000000 black, it will not color correctly in Elementor. The icon does resize, but it does not tint using the Primary Color style.

RGB

These are the standard settings you will see most places. You can see the icon works fine.
RGB
Internal
SVG
Preserve
Unique
1 decimal
Minify
Responsive

CMYK

It was okay for the icon to be in CMYK mode.
CMYK
Internal
SVG
Preserve
Unique
1 decimal
Minify
Responsive

ILPSU1

RGB
Inline
SVG
Preserve
Unique
1 decimal
Minify
Responsive

No Minify

Turning off Minify did not cause issues with the icon, and the filesize was not .
RGB
Inline
SVG
Preserve
Unique
1 decimal
Responsive

No Minify No Responsive

Turning off Minify and Responsive did not cause any issues with the icon.
RGB
Inline
SVG
Preserve
Unique
1 decimal

PSPU1

Presentation
SVG
Preserve
Unique
1 decimal
Minify
Responsive

Crazy

Internal CSS
Convert to Outlines
Embed
Layer Names

1 Decimal
Minify
Responsive

Crazy2

Presentation Convert to Outlines
Embed
Unique
5 Decimals
Responsive

Export for Screen

Export for Screen uses the same settings as Export As. I

Export As with Big Artboard

Although this icon had a large artboard, Export As trimmed the icon file down to the edges.
RGB
Inline
SVG
Preserve
Unique
1 decimal
Minify
Responsive

Export for Screen with Big Artboard

As you can see, Export for Screen defaults to using the entire artboard, which left this icon with a lot of whitespace around it.
RGB
Inline
SVG
Preserve
Unique
1 decimal
Minify
Responsive

Save As

The icon saved out using Save As worked just fine with default settings, however, you can see it used the artboard, which means the icon has some whitespace around it.

Does changing the decimal setting in Illustrator result in better or worse icon quality?

After tinkering with the export and save settings in Illustrator, I decided to do a comparison of changes made to the decimal setting.  Would increasing the number of decimal places make a noticeable difference in my icon quality once the icons were expanded to giant size?  What effect do these settings have on SVGs that are exported from Illustrator to Elementor? 

Well, if adjusting the Decimal settings in Illustrator changed anything, I can’t see it:

1 Decimal

5 Decimals

You can see the slightly jagged line on the shoulder of the center person — a minor imperfection present in the original design, but I can’t tell any difference in the curves or other parts of these icons.

Tentative Conclusion

As you can see, the same SVG icon exported from Illustrator using many different settings doesn’t seem to actually affect how the icon displays. However, if you, like me, are surprised to find that the default black swatch in Adobe Illustrator is no longer #000000 in either CMYK or RGB color document mode, you may find that your icons aren’t coloring properly when you export an SVG from Illustrator to Elementor. Change the black fill color, and I suspect your icon will work as expected.

Troubleshooting SVG Files Exported from Illustrator to Elementor - Quick Links

More Design and Marketing Articles from the Metro Nova Creative Team

How to Write a Mission Statement

A mission statement is short description of a business’ purpose that guides the actions of the employees and attracts like-minded customers by explaining how the company intends to accomplish its purposes ethically.

Read More »

Writing a FAQ for your website

What is a FAQ? FAQ stands for Frequently Asked Questions. FAQS have been around since at least 1648, when Matthew Hopkins wrote wrote The Discovery of Witches as a list of questions and answers. Today the FAQ has migrated to web, and hyperlinking along with consistent formatting makes it easy for spiders like the GoogleBot to crawl and index for use in

Read More »