Skip to main content
B
bwjwright
Participant
November 4, 2014
Question

SVG – Illustrator pushes artwork off artboard after saving.

  • November 4, 2014
  • 20 replies
  • 20804 views

Hi All,

I'm having an issue with SVGs and Illustrator that hopefully someone else knows a fix or has been having similar issues. Note, these SVG's are super simple icons, no text just basic shapes and I'm using CC2014. This is basically what happens…

1. Resize my artwork and artboard to the correct pixel dimension that I want.

2. Save out to SVG with default settings, Responsive unchecked.

3. Open SVG back up in Illustrator after hearing that my FED can't use the files and suddenly the artwork is miles off the art board.

4. Reposition the artwork again and save out with same settings.

5. Open up SVG to check it's on the artboard correctly, find that the artwork is once again miles off the art board.

Anyone know how to fix this? It's a pain in the butt and I've had to resort to using Sketch.app to open up my SVG's back up and then export them through Sketch.

Would love to just be able to use Illustrator exclusively instead of relying on Sketch to export. Any help much appreciated!

Cheers.

    20 replies

    Show previous replies
    A
    Anonymous
    June 21, 2015

    You need to Save As - SVG. Then in the SVG Options window, check the box that says 'Preserve Illustrator Editing Capabilities'. Worked for me.

      T
      Thunder71
      Participant
      May 18, 2015

      I think I found the solution. On the save as dialog box, be sure to mark the check box next to "Use Artboards". When I reopened, the files were how they needed to be and worked with my site.

      M
      mrtechnicalweb2
      Participating Frequently
      March 17, 2015

      Unfortunatly Adobe is now rubbish. Nothing they do really works any more.

      But oh look, InkScape dop a FREE SVG editor. So why not down load that to get the job done. It doesnt move things about on your behalf. It wont ask you to sign in every 10 minutes either.

      It also wont ask you for lots of money every month for the privelidge.

      Inkscape for SVG

      FileZilla for ftp

      I just wish I could find a replacement for Dreamweaver. Dreamweaver was a blessed child given birth to by intelligent people at a company called Macromedia. Adobe have essentially destroyed that intuitive intelligent tool and replaced it with a beurocratic marketing managers wet dream resulting in it not doing anything well and being rubbish. a small clue is that all road now seem to lead to INDIA. If you ever 'communicate' with Adobe 'tech' they will, in my experience be Indians. If im factually wrong then just say so.

      hungerSTAR
      hungerSTAR
      Participant
      September 2, 2015

      Use Sublime Text instead of Dreamweaver. Find and install Package Manager. Find packages that suite your workflow. Enjoy!

      abdulk
      abdulk
      Participant
      February 25, 2015

      I'm experiencing the same. I've wasted 4+ hours on this already. Adobe, are you aware of this bug?? Kindly let us know if/when this will be addressed.

      mrmikemcgowan
      mrmikemcgowan
      Participant
      February 15, 2015

      Kodi,

      I had the same problem.

      Frrrrrrrrustrating!

      I switched to an earlier version of Illustrator and had no problems.

      Good luck!

      /\/\/\/\

      K
      Kodi Fletcher
      Participant
      January 20, 2015

      I'm getting the same issue. Can't seem to figure it out and it is really a pain to more with. Adds more work than I need.

        W
        witkacy
        Known Participant
        January 20, 2015

        Hi, Kodi,

        Could you confirm your OS and Illustrator version, please?

        Thanks.

        Regards

        m.

        mrmikemcgowan
        mrmikemcgowan
        Participant
        February 10, 2015

        Same problem. Super simple 16px x 16px .ai file saved as svg. Image is pushed outside the art board when viewed as a svg.

        MacBook Pro Retina 15"

        Adobe Illustrator CC

        2014.1.0

          W
          witkacy
          Known Participant
          January 14, 2015

          Hi,

          This is an illustration of the problem.

          I open this simple SVG in Illustrator:

          <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#333" d="M0 39l58 46.3 6 5 6-5L128 39l-3-3.8L64 70 3 35.2z"/></svg>

          It looks like that:

          Upon resaving as an SVG from Illustrator (irrespective of Use Artboard and other options) and opening again, it suddenly looks like that:

          The viewBox reads "56 -57 128 128" instead of "0 0 128 128" as in the original SVG.

          This is driving me nuts... Maybe I am doing something wrong? Later I will try to test earlier Illustrator versions, I am pretty sure it didn't happen before.

          Thanks.

          Regards

          m.

            W
            witkacy
            Known Participant
            January 17, 2015

            Hi,

            As promised, I've checked the older version of Illustrator and the problem is not present there. AI 16.0.4 Mac works correctly, latest CC Win works incorrectly. Can't easily check, but I think that I haven't seen that bug on some older CC on Windows, but I can't be sure.

            Regards

            m.

            W
            witkacy
            Known Participant
            January 12, 2015

            Hi,

            I have the same issue with the latest Illustrator. Tried everything - different files, saving with/without Use Artboard, changing Origin point in Artboard settings, saving the intermediate AI file, Flattening the file. The most simple SVG file resaved in AI ends up off the artboard... I am out of ideas :-(

            Regards

            m.

              M
              mwght987
              Participant
              December 24, 2014

              I am experiencing the same issue. Any takers on this??

                Mylenium
                Mylenium
                Legend
                November 4, 2014

                CHeck your ruler origins.

                Mylenium

                B
                bwjwrightAuthor
                Participant
                November 4, 2014

                I double clicked on the top left corner on both the global and artboard rulers and the origin reset slightly but as soon as the SVG is opened again the ruler jumps back and the artwork is offset.

                Just a note, the artwork is offset from the artboard x:1px y:20px. So the ruler origins seems most likely to be the issue. Is there a way to nuke the ruler origin settings globally? Can't seem to find anything in preferences.

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