: Adobe Illustrator SVG upside down transform matrix I have an Illustrator file with symbols in it. When I save it as SVG, some of the graphic elements have their transformation matrices inverted
I have an Illustrator file with symbols in it.
When I save it as SVG, some of the graphic elements have their transformation matrices inverted upside-down, i.e., of the form
transform="matrix(1 0 0 -1 ...)"
(See full code below).
The overall result looks OK, since two inverted elements are nested one in another. This is annoying, since other elements are not inverted, and I need a more uniform format for my later purposes. This might be related to the viewbox problem, which is also apparent in the code below.
The question is: what is the cause of the inverted elements? Is there any way of avoiding them, yielding an svg with transformation matrices oriented upwards?
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="768px" viewBox="0 0 1024 768" style="enable-background:new 0 0 1024 768;" xml:space="preserve">
<symbol id="Slide" viewBox="-539 -319 1025 769">
<polygon style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" points="485.5,-318.5 -538.5,-318.5 -538.5,449.5 485.5,449.5
"/>
<text transform="matrix(1 0 0 -1 -105.8042 355.8672)" style="font-family:'GaramondPremrPro'; font-size:72;">Main</text>
<use xlink:href="#Slide_2" width="1025" height="769" id="Slide_2_2_" x="-512.7" y="-385.2" transform="matrix(0.5291 0 0 0.5291 -266.5677 61.0084)" style="overflow:visible;"/>
<polygon style="display:none;fill:none;" points="-539,450 486,450 486,-319 -539,-319 "/>
</symbol>
<symbol id="Slide_2" viewBox="-512.7 -385.2 1025 769">
<polygon style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" points="511.8,-384.7 -512.2,-384.7 -512.2,383.3 511.8,383.3
"/>
<text transform="matrix(1 0 0 -1 -91.6538 263.4619)" style="font-family:'GaramondPremrPro'; font-size:72;">Slide 2</text>
<polygon style="display:none;fill:none;" points="-512.7,383.8 512.3,383.8 512.3,-385.2 -512.7,-385.2 "/>
</symbol>
<use xlink:href="#Slide" width="1025" height="769" id="presentationScreen" x="-539" y="-319" transform="matrix(1 0 0 -1 538 450)" style="overflow:visible;"/>
</svg>
</body>
More posts by @Karen819
1 Comments
Sorted by latest first Latest Oldest Best
Illustrator does its best to maintain transformations, to reduce rounding errors. The two rotations are likely there because at some point, that’s what happened to those objects. Certain features in Illustrator will reset the transforms and destructively apply the correct positions (Pathfinder does, I don’t know an extensive list though).
The Transform panel will show you transformations. From there, you can apply the two corrections you’re after.
Alternatively, you could hand edit the SVG to remove both transforms, and read the SVG back into Illustrator (please make sure you have Illustrator’s SVG precision set to the maximum number of decimal places when doing so).
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.