Why are my elements moved after being exported to svg

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?

Answer

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

Attribution
Source : Link , Question Author : Gundon , Answer Author : Stéphane

Leave a Comment