Skip to main content
T
tiadaguru
Participant
March 9, 2020
Answered

Exporting AI to SVG creates a 10KB blank SVG

  • March 9, 2020
  • 1 reply
  • 5430 views

Hello! I have an unusual problem. I had an EPS, which I opened with Adobe Illustrator 24.1.1, made some color changes, and then saved as the standard *.ai format.

 

If I export it as a PNG or JPG, there's no issue. If I export it as an SVG, it comes out completely blank (though the SVG code is definitely there). Opening the SVG in any browser, in Illustrator, in SVG editing tools = blank. Nothing. 

 

I've tried all of these changes, with zero effect:

 

  • Change the decimal precision from 1 to 2 to 3 to 4 to 5 (no difference)
  • Change the styling from Internal CSS to Inline Style to Presentation Attributes (no difference)
  • Saving as a SVG (instead of Export), which creates a 95% blank SVG with a few random objects

 

The file itself...isn't complex: it's overlapping rectangles with circular gradients. Have I violated some law of SVGs? This does not occur with other EPS or other AI files. Just this one. My SVG settings:

 

 
The poorly-behaving AI file, the broken SVG, and the properly-working PNG are linked here: https://drive.google.com/drive/folders/1rfhYgh-1jZANAXJS02VZHaOgp0jzY_DA?usp=sharing 

Adobe Illustrator 24.1.1 (CC subscription)

Windows 10 Pro x64 1909 (18363.657)

Intel i5-8600K + 32 GB DDR4-3200

Samsung 960 EVO 250 GB

    This topic has been closed for replies.
    Correct answer Mylenium

    Likely you need to change the complete layer structure and reorganize your file. SVG is as much about structure as it is about visual representation ansd surely just importing a potentially terrible EPS with tons of issues like stray paths, tiny non-convex areas and so on is not ideal. I can't check your actual file, but I'd bet that this is one of those cases...

     

    Mylenium

    1 reply

    Mylenium
    MyleniumCorrect answer
    Legend
    March 9, 2020

    Likely you need to change the complete layer structure and reorganize your file. SVG is as much about structure as it is about visual representation ansd surely just importing a potentially terrible EPS with tons of issues like stray paths, tiny non-convex areas and so on is not ideal. I can't check your actual file, but I'd bet that this is one of those cases...

     

    Mylenium

    T
    tiadaguruAuthor
    Participant
    March 10, 2020

    Thank you! This gave me the motivation to re-create the layout. It worked WILDLY better. I was getting insane 1MB SVG exports with some unusual online tools. It's literally boxes:

     

     

    Here's how I recreated it, for future posters:

     

    1. Open the original EPS->AI converted file in Illustrator. Copy its artboard dimensions & create a new AI file with those same dimensions.
    2. Select one of the paths (yes, the original file used paths for these boxes!) in the original file, copy it with CTRL+C and paste it with CTRL+F (to maintain positioning) into the new AI file.
    3. Create a new rectangle to match the original shape (or whatever shape you've got). Somehow, this new rectangle picked up the original gradient; this was the wildest part because I must've missed how it got set.
    4. Then, delete the path. For me, I also needed to change the layer blend mode to multiply for this kind of unique transparency effect.
    5. Continue for each object. Copy-paste the path with CTRL+C / CTRL+F, trace out the shape with the rectangle tool, and remove the path. Add adjustments as needed.

     

    This turned a 900 KB PNG (3200px width), a broken 1MB SVG, and a pixellated 300 KB JPG into a pixel-perfect...drumroll.....9 KB SVG!

     

    Yes. 9 KB SVG. That's what I had expected, honestly, from the get-go.

    Thank you for the support, mylenium.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices