I'm quite new to Adobe Illustrator, but used to PS.

I wanted to experiment with Illustrator to create SVGs that can than be manipulated with JavaScript.

I created some kind of background-layer and filled it with a rect. That has a pattern as background-image (Adobes Waffelmuster - Doppelt).

I then created a second layer and added several filled paths to it. I tried to align these paths as best as I could to the background-pattern of my first layer.

When I export my graphic as SVG, my paths are not aligned to the background as in Illustrator. It seems they shifted a little bit to the right. Also, if I zoom in Firefox (STRG,+) the mismatch becomes even bigger.

Why is that and how can it be prevented? Is there something like relative and absolute positioning?

  • Try placing an unstyled ("invisible") rectangle (the exact dimensions and placement as the background layer object) on the same layer as the second layer. Perhaps the origin and window size of the two SVG files will then be the same.
    – horatio
    Commented May 14, 2013 at 16:25

3 Answers 3


Try to check "Preserve Illustrator editing capabilities" while saving, it should fix the problem.

Moreover, be sure that:

  • "responsive" is not checked
  • your artwork isn't bigger than your canvas
  • your canvas' size doesn't contains decimal values

I use Illustrator to generate .svg for the web and it works pretty well.

Illustrator save as popup


As someone that had quite a bit of work done with coding up SVGs exported from AI (One example), I can tell that the issue is AI doesn't export SVGs in a format fit for the web. Not fully at least.

When using SVGs generated with AI, I had to always massage positions somewhat to maintain proportions originally seen while drawing on AI. As for anything path/gradient related - I found no way to export that from AI to be mimicked in a browser.

In the end, the only REAL benefit for developing your SVGs in AI is to get your coordinates. Sorry if this is not what you wanted to hear, but I spent almost 2 weeks trying to tweak the export process with professional AI users (5+ years) and the best we got - solid color filled polygons/lines/circles/etc., I.e. SVG wireframes, that were consistent (with some margin of error) with what was on AI.

  • Was that last sentence supposed to not end?
    – Hanna
    Commented May 14, 2013 at 20:16
  • @Johannes you're absolutely right... Fixed. Commented May 14, 2013 at 20:41
  • It just made me laugh when I read it, not a problem!
    – Hanna
    Commented May 14, 2013 at 20:55
  • 1
    If my inadvertent mistake made you laugh - I'm glad I made it then :D. Cheers! Commented May 14, 2013 at 21:01

Instead of saving as .svg, try exporting as .svg instead. It worked for me!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.