I'm working with an SVG file that contains two images. One of the images appears as a mirrored (flipped) version when the view in the iOS 18, while the other image renders correctly. Also, for the other devices PDF renders correctly, In addition, PDF renders correctly in the Adobe Acrobat in iOS 18, but normally it is not working, Here's the scenario:
The first image (which flips in the PDF) is defined like this:
SVG code :
<pattern id="pattern-19" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 156 75"> <image width="156" height="75" xlink:href="data:image/png;base64,...."></image> </pattern> The second image (which does not flip) is defined like this:
SVG code :
<g id="Group_43" data-name="Group 43" clip-path="url(#clip-path-44)" > <g id="Group_42" data-name="Group 42" clip-path="url(#clip-path-45)"> <image id="Rectangle_58" data-name="Rectangle 58" width="46.75" height="46.75" transform="translate(396 568)" xlink:href="data:image/png;base64,...."> </image> </g> </g> Issue: The first image flips horizontally (mirrored) in the resulting PDF, while the second image renders correctly.
Original: Original image
Flipped image: Flipped image
What I Have Tried: I attempted to modify the first image's definition by replacing it with a and structure similar to the second image. However, after making the changes, the first image does not display at all.
SVG File:
Questions:
Why does the image flip while viewing the PDF, while the some images not? How can I modify the SVG so the image renders correctly in the PDF without flipping? Is there a specific attribute or method I should use to prevent flipping during the PDF conversion process specifically for iOS ?
