I've been watching videos on how to export .SVG files from Illustrator to be implemented in the HTML

[Dnhy]

I've been watching videos on how to export .SVG files from Illustrator to be implemented in the HTML. I'm directed to export as an .SVG with art boards on. But when I see the svg code which is essentially what makes it work, it's greyed out. It's critical that I get an answer to this issue. Many thanks. 

[Anshul_Saini]

Hi @Dnhy,

If you're experiencing issues with exporting SVG files from Adobe Illustrator with greyed-out SVG code, it could be due to specific settings during the export process. Here's a step-by-step guide to ensure you get the correct SVG code:

• • In the SVG Options dialog, ensure the "Styling" option is set to "Internal CSS." This ensures that your styles are included in the SVG file and not inlined.
  • Check other settings as needed (e.g., Responsive).
  • Click "OK" to confirm.
  • Open the exported SVG file using a text editor (like Notepad or VS Code).
  • Look for the <style> tag in the SVG code. This is where your CSS styles will be placed.

If you're still facing issues, consider sharing a snippet of your SVG code or sharing the Illustrator/ SVG file with me.

Additionally, you might want to check if there are any errors or warnings in the SVG file that could be affecting its display in Illustrator.
If you encounter further issues or need additional assistance, feel free to let me know.

Best,

Anshul Saini

[Monika Gause]

Are you writing your own HTML code or do you hand off those files to developers?

If the latter: have you already talked to them about how to exactly set up the options?

[AllenMuellerTHD]

Same here, Dhny. I've used this feature for several years, and today it is not working. I've tried every combination of settings, of course starting with the ones I typically use. The "SVG Code…" button remains greyed out. 

I like this feature because I don't have to generate a SVG "file." I can just copy the code, escape out of the save dialogue and paste it into my code. Also great when you want to use SVG in native form (not really image files), or when you intend to optimize it with something like SVGOMG. 

Come to think of it... I don't think I've ever used an SVG file, except when animating them in svgator.

I guess this means I'll have to add a few steps to get what I want. I'll save the SVG file, optimize it with SVGOMG and then grab the code from there. 

[CarlosCanto]

I'm not sure if this has always been the default behavior but checking "Use Artboards" in the SaveAs dialog will disable the SVG Code and the Browser buttons.

uncheck the "Use Artboards" check box to enable the buttons