8 Replies Latest reply on Feb 10, 2011 8:40 AM by mynormalnamesarenotavail

    SVG files saved from Illustrator CS5 vs. CS3?


      We just recently upgraded to CS5 from CS3.

      Previously when we saved a graphic as SVG from AI, when displayed online only the graphic was shown.

      Now when we save SVG from AI CS5, when displayed online the SVG has additional white space on all 4 sides of the graphic. Seems to incorporate the artboard.

      Besides creating a custom artboard size each time (we use a template), how else can we have the SVG save with only the graphic and no extra white space?

        • 1. Re: SVG files saved from Illustrator CS5 vs. CS3?
          Monika Gause Adobe Community Professional & MVP

          You could try turning off the option "Use Artboard" resp "Clip to artboard" (in Save for Web). But if you're using multiple artboards in one file with different illustrations, turning off that option would put them all in one file.

          • 2. Re: SVG files saved from Illustrator CS5 vs. CS3?
            muditsingh Adobe Employee

            In CS3 there was no support for MAB and opening the new document did not also defined a crop area, with CS4 onwards they have mapped each artboard like the crop area in CS3, in CS3 if you apply a crop area around the object and view the saved SVG in browser, you will get to see the white spaces, same is the case now with the Multiple artboard support in CS5, an artboard resembles to a Crop Area which was in CS3. Monika's suggestion is good to solve your problem, even i do the same way. However, if you do not prefer to save SVG via S4W and save directly via the Save As, one way to eliminate out the white spaces is, you design with you Artboard template, when you finish designing select all the content of the document and goto Object>>Artboards>>Fit to Artwork Bounds, it makes the artboard to fit in all the artwork, no headache of artboard size calculations, just couple of clicks.

            • 3. Re: SVG files saved from Illustrator CS5 vs. CS3?

              I tried the suggestion above, and it didn't work. I just did the update, with the HTML5 pack reinstalled. Instead of having white on all 4 sides, the content is in the upper left.


              This is very easy to reproduce. Make an artboard for 300x100. Throw in a fill. Save As an SVG. It doesn't matter if you check "use artboard" or not, it gets the same result. The extra white area is huge.


              We have another designer who still has CS4, and he has the same issue. or, with or without the HTMML5 pack.....it's there. It would be nice if someone would address this, because it makes the SVG unusable.

              • 4. Re: SVG files saved from Illustrator CS5 vs. CS3?
                Mylenium Most Valuable Participant

                Don't have CS3 here, but there's definitely a difference. There's a simple fix, though: Use Save for Web and Devices, choose SVG and on the Image Size tab turn off crop to artboard...



                • 5. Re: SVG files saved from Illustrator CS5 vs. CS3?
                  colejoplin Level 1

                  I hadn't seen this. Thanks for the info. Since my artboard size is the same as my content, it did not matter. Checked on or off, there is still a noticeable width and height addition to the svg. As long as the html container matches the svg content, you can hide the problem by having the SVG in a DIV or IFRAME. But if the SVG is meant to actively scale by the user, it shows the ugly whitespace again.

                  • 6. Re: SVG files saved from Illustrator CS5 vs. CS3?

                    I can confirm that this does not work in CS5.  As far as I can tell, there is absolutely no way (short of manually) to get rid of the artboard on save to svg. 


                    I tried Save for web>svg>Clip to artboard>apply.  In the preview, all looks good, but when I actually save it and view the results, the artboard still exists, but the artwork has been shifted to the upper left. 


                    Not sure if this is a bug or what....?  Sure seems like one.


                    Why is this not easier?  Refer to http://answers.yahoo.com/question/index?qid=20081012163347AAh94kF for someone who asked a simple question: "How do I make the artboard fit my picture on Illustrator?"  The resulting answer is almost laughable in it's length...


                    The answer to that question should be, "Go to the menu and select Fit Artboard to Selection/Contents/Whatever"  Not everyone uses illustrator for print.

                    • 7. Re: SVG files saved from Illustrator CS5 vs. CS3?
                      colejoplin Level 1

                      Update: I discovered some interesting things here. The current build of WebKit that is in Safari and Chrome and other browsers has a bug, which was logged, fixed, and not rolled out yet to a new version of the browsers. The transparency of an SVG when using the <object> or <embed> does not work. It leaves a white matte. This is why when I look at the file in Finder, I see the white background, because that's how it renders. Adobe isn't doing anything funky here.


                      Workarounds: If you only need a transparent image, use the <img> tag instead, as it respects transparency. This works.


                      What won't work: If you are creating an SVG that is data-driven (which is what I was doing), you are out of luck, because that tag doesn't trigger the reading of the SVG and javascript-reading capabilities. If you try the <svg> tag, Firefox will work, but not the WebKit-based browsers. So, you just have to wait.

                      • 8. Re: SVG files saved from Illustrator CS5 vs. CS3?
                        mynormalnamesarenotavail Level 1

                        Thanks for that Cole.  Shame on me for not trying to open the generated SVG in more than one program.   I opened it in Inkscape and it looks as expected. 


                        I think my criticism stands in regard to removing the artboard being overly complex, however.