• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2

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

New Here ,
Dec 19, 2023 Dec 19, 2023

Copy link to clipboard

Copied

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. illustrator-issue.png

TOPICS
Bug , Import and export

Views

290

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Adobe Employee ,
Dec 21, 2023 Dec 21, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 21, 2023 Dec 21, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 28, 2023 Dec 28, 2023

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 28, 2023 Dec 28, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines