Issue with SVG files

Question

I am the Design Manager at a startup company which sells custom printed items, such as phone/tablet cases and clocks.

I have created a clock graduation with numbers, hour markers and minute markers to be used in the customiser on our website.

Everything appears fine in illustrator.

I then uploaded the SVG file to the customiser on the website and again it appears fine.

However, when the design in which the graduation has been used, is downloaded from our website, the minute markers have rotated so that instead of being aligned from the center of the clock to the edge, they have all realigned to point vertically.

The fact that they are only doing this after being downloaded from our website makes me think that the issue is being caused by our customiser.

If this problem is being caused by our customiser I will have to get our web developer to fix it, which will cost a lot.

I am unable to use any other format (such as png) as it means the customer cannot change the colour of the graduation within the customiser.

Does anyone know what is causing this problem?

Or maybe there is a work around I haven't though of?

Any help would be greatly appreciated.

Answer 1

I assume this is because Illustrator is exporting the markers as rects with a transform matrix, and that is getting lost along the way somehow.

What you have is something like:

<rect x="100" y="200" width="5" height="60"
      transform="matrix(0.7953 -0.6062 0.6062 0.7953 -90.8174 130.1822)" />

An easy workaround is to convert your markers in to compound paths, which will output path elements (with no transform) instead.

Simply select all your markers and go to Object → Compound Path → Make or hit cmd+8. You'll then have a single path on export. Something like:

<path d="M168.288,222.531l-4.331,3.301l-37.512-49.215l4.331-3.301L168.288,222.531z M296.695,243.748l-1.064-5.845 l64.289-11.711l1.064,5.845L296.695,243.748z"/>

If you really need distinct objects then you can turn each marker in to a compound path individually but otherwise just select them all and create one large compound path.