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.enter image description here

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.

1 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.

  • Thank you so much, it worked perfectly. You have no idea how much time I've spent trying to figure this out. I should have posted here days ago. Thanks again
    – Tom
    Sep 29, 2016 at 13:09
  • No problem at all @Tom
    – Cai
    Sep 29, 2016 at 13:12
  • and welcome to GDSE! If you have any questions, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site!
    – Cai
    Sep 29, 2016 at 13:12
  • I posted another question a little while ago, but i can't see any record of it on my profile, do you know why this is?
    – Tom
    Oct 3, 2016 at 11:03
  • @TomMoose not sure, I can't see any other questions on your profile. Can you find a link to it in your browser history maybe?
    – Cai
    Oct 3, 2016 at 11:11

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.