title: Why are svg rendered tilted (Processing)?
body: <p>My aim is to remake the classic Freecell card game for Windows Xp on Windows 10 with Processing 3.<br>
  To do so I downloaded from <a href="https://totalnonsense.com/download/download-vector-playing-cards/" rel="nofollow noreferrer">here</a> a set of svg files that most resembled the old cards' look.<br>
  In my code I have a class called <code>Deck</code> that contains an <code>ArrayList</code> of cards and, when constructed, it initializes the cards giving them the path for the svg file they need and after also x and y coordinates.<br></p>
  <pre><code>class Deck
  {
    String[] seeds = {&quot;HEART&quot;, &quot;DIAMOND&quot;, &quot;CLUB&quot;, &quot;SPADE&quot;};
    String[] values = {&quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;, &quot;10&quot;, &quot;11&quot;, &quot;12&quot;, &quot;13&quot;};
    ArrayList&lt;Card&gt; cards = new ArrayList&lt;Card&gt;();
    
    Deck()
    {
      //Create the cards and store them into the array.
      for(int seed = 0; seed &lt; seeds.length; seed++)
      {
        for(int value = 0; value &lt; values.length; value++)
        {
          String cardName = seeds[seed] + &quot;-&quot; + values[value] + &quot;.svg&quot;;
          cards.add(new Card(cardName));
        }
      }
  
      //Shuffle the deck.
      //this.shuffle();
  
      //Give the cards x and y coordinates.
      for(int c = 0; c &lt; cards.size(); c++)
      {
        int x = cardSpace + (cardWidth+cardSpace)*(c%8);
        int y = 32 + cardHeight + edge*2 + cardSpace + 25*(c/8);
        cards.get(c).setxy(x, y);
      }
    }
    
    void shuffle()
    {
      for(int c = cards.size()-1; c &gt; 0; c--)
      {
        int k = (int)Math.floor(Math.random() * (c + 1));
        Card card = cards.get(c);
        cards.set(c, cards.get(k));
        cards.set(k, card);
      }
    }
    
    void render()
    {
      for(Card card : cards)
      {
        card.render();
      }
    }
  }
  </code></pre>
  <p>Card class:</p>
  <pre><code>class Card
  {
    PShape svg;
    int x;
    int y;
    
    Card(String svgName)
    {
      this.svg = loadShape(svgName);
    }
    
    void setxy(int x, int y)
    {
      this.x = x;
      this.y = y;
    }
    
    boolean isMouseOver()
    {
      return mouseX &gt; x &amp;&amp; mouseX &lt; (x+cardWidth) &amp;&amp; mouseY &gt; y &amp;&amp; mouseY &lt; (y+cardHeight);
    }
    
    void render()
    {
      shape(svg, x, y, cardWidth, cardHeight);
    }
  }
  </code></pre>
  <p>The <code>render()</code> method of the class <code>Deck</code> is called once every <code>draw()</code> loop, with <code>frameRate</code> set to 10.<br>
  Anyway, the code works fine, the only problem is in how two svg are rendered, as you can see here:
  <a href="https://i.stack.imgur.com/5Ofy2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Ofy2.png" alt="Application screenshot" /></a>
  For some reasons, only the <em>5 of spade</em> and the inner drawing of the <em>jack of heart</em> are completely tilted.<br>
  However when opened with Inkscape or any browser they look correctly orientated, thus my confusion.<br>
  I tried to use the original versions of those two svg, yet they are still rendered tilted. I tried to compare the xml of those two svg, but I couldn't understand what could be causing the problem.<br>
  It may also be processing, but then I would have no idea why or how to fix it.<br>
  Any help will be appreciated, thanks in advance.<br></p>
  <p><strong>EDIT</strong><br>
  Adding main sketch file as requested in the comments.<br>
  However note that it's stripped off of the upper gray bar and the rectangles.</p>
  <pre><code>//Global objects.
  Deck deck;
  //Global objects.
  
  //Global variables.
  int edge = 2;
  int cardSpace = 15;
  int cardWidth = 100;
  int cardHeight = 140;
  //Global variables.
  
  void settings()
  {
    int w = cardWidth*8 + cardSpace*9;
    int h = cardHeight*5 + 32;
    size(w, h);
  }
  
  void setup()
  {
    frameRate(30);
    
    deck = new Deck();  //Initialized here because of loadImage().
  }
  
  void draw()
  {
    background(60, 145, 50);
    deck.render();
  }
  </code></pre>