Mobile app version of vmapp.org
Login or Join
Karen819

: 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

@Karen819

Posted in: #AdobeIllustrator #Svg #Transform

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>

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Karen819

1 Comments

Sorted by latest first Latest Oldest Best

 

@Twilah924

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

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme