CODEWITHSUNDEEP
svgrotation
Jasper Renema
Jasper Renema

Reputation: 143

Why is image rotated in SVG?

I have this SVG output: http://www.angliru.nl/kaftschoon/143/ The original photo is: http://www.angliru.nl/upload/IMG_IX3346.JPG

The original photo is standing. The photo is still standing after uploading. But when placed in a SVG the photo is rotated sideways. Why? And how to prevent it? I'm scratching my head on that one.

   <svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="447" height="833"
viewBox="265 90 311.9 495.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
<g>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="842" height="595">
            <image xlink:href="http://www.angliru.nl/upload/IMG_IX3346.JPG" x="0" y="0"
                width="842" height="595" style="max-width:842px; max-height: 595px; min-width: 842px; min-height: 595px;" />
        </pattern>
    </defs>
    <path d="M549.9,476.2c-3.3,0-6.1,0-8.9,0c-15.2,0-30.3-0.1-45.5,0.1c-2.3,0-5,1.3-6.8,2.9c-3.6,3-6.7,6.5-10,9.8
        c-3.2,3.1-6.4,3.3-9.5,0c-0.1-0.1-0.3-0.2-0.3-0.4c-7.5-11.2-18.1-13.6-31-12.6c-13.6,1-27.3,0.1-41,0.3c-2,0-4.4,1.1-6,2.5
        c-3.5,3-6.6,6.6-10,9.8c-3.9,3.7-7.1,4.1-10.1-0.1c-7.9-10.9-18.3-13.5-31.1-12.5c-12.8,1-25.6,0.2-38.5,0.1
        c-0.3,0-0.6-0.2-1.5-0.6c0-11.7,0-23.6,0-35.6c0-7.7,0.3-15.3-0.1-23c-0.1-2.3-1.4-5-3-6.8c-3.7-4.3-8-8-11.9-12.1
        c-3.7-3.9-3.6-6.3,0.1-10.2c0.2-0.2,0.4-0.5,0.7-0.7c12.3-8.5,16.2-20,14.5-34.8c-1.3-11,0-22.3-0.3-33.4c-0.1-2.4-1.3-5.1-2.9-7
        c-3.9-4.9-8.4-9.4-12.6-14.2c-2.5-2.9-2.3-5.6,0.5-8.3c4.1-3.9,8.3-7.7,12-12c1.6-1.8,2.8-4.6,2.8-7c0.2-16.7,0.2-33.3,0-50
        c0-2.2-1.2-4.8-2.6-6.5c-3.7-4.5-7.9-8.6-11.9-12.8c-3.5-3.8-3.4-6,0.2-9.8c2.4-2.5,4.5-5.5,7.2-7.6c6.8-4.9,7.6-11.5,7.4-19.3
        c-0.4-15.8-0.1-31.6-0.1-47.7c7.3,0,14.4,0,21.5,0c10.8,0,21.6,0.2,32.5,0.1c1.1,0,2.5-0.7,3.3-1.6c4.4-4.5,8.6-9.3,13-13.8
        c4.2-4.3,6.9-4.2,11-0.1c5.1,4.9,9.5,11.8,15.7,14.3c6.2,2.5,14.1,0.6,21.3,0.7c10.5,0,21,0.3,31.5,0c2.5-0.1,5.4-1.4,7.3-3
        c4-3.5,7.5-7.6,11.2-11.4c4.6-4.6,7.2-4.7,11.8-0.2c2.3,2.2,4.9,4.2,6.7,6.7c5,7.1,11.9,8.4,19.9,8.3c12.7-0.3,25.3,0,38,0
        c1.5,0,2.9,0,5.2,0c0,10.7,0,21,0,31.3c0,8.7-0.3,17.3-0.1,26c0,1.8,1.2,3.9,2.5,5.3c4,4.2,8.3,8.1,12.5,12.3c3.2,3.2,3,6.4,0,9.7
        c-1.5,1.6-2.8,3.3-4.6,4.6c-8.7,6.2-11.1,14.5-10.5,25c0.8,13.5,0.2,27,0.5,40.5c0,1.9,1,4.2,2.3,5.6c3.8,4.2,7.9,8.1,11.9,12.1
        c4,4,3.9,7,0,11.1c-2,2-3.7,4.4-6,6c-7.4,5.1-8.8,12.2-8.5,20.7c0.6,14.3-0.1,28.7,0.1,43c0,2.2,1.3,4.7,2.8,6.4
        c3.8,4.4,8.1,8.3,12.1,12.6c2.7,2.9,2.6,6-0.2,8.9c-3.7,3.8-7.4,7.6-11.3,11.3c-2.5,2.3-3.4,4.9-3.3,8.3
        C550,436.7,549.9,456.1,549.9,476.2z"
        fill="url(#img1)" />
</g>
</svg>

Upvotes: 3

Views: 480

Answers (1)

Adrian Wragg
Adrian Wragg

Reputation: 7411

Your issue comes down to the EXIF data stored against the original image.

EXIF - Exchangable image file format - is a set of metadata relating to the image itself, stored alongside it in the same file. The data can be quite comprehensive, covering for example:

  • GPS coordinates of the location
  • Camera hardware
  • Camera settings (ISO, etc)
  • Orientation

It's this last one that you're tripping over, and it's quite likely in this case that the phone was being held sideways when this photograph was taken. Your web browser is respecting the Orientation setting, and is rotating it accordingly; the SVG processor on the other hand is ignoring it.

That's the "why" part handled.

The "how to prevent" is more complicated, and without knowing more about how the image ended up in your system it's impossible to answer precisely.

Obviously you've discovered that loading it into Photoshop and re-saving has fixed the issue (Photoshop has stripped out the orientation tag), but for a longer-term solution you will need to process your uploaded images; a tool such as Exiftool should suffice for this.

Upvotes: 2

Related Questions