Search code examples
javasvgimage-processingprocessingrendering

Why are svg rendered tilted (Processing)?

My aim is to remake the classic Freecell card game for Windows Xp on Windows 10 with Processing 3.
To do so I downloaded from here a set of svg files that most resembled the old cards' look.
In my code I have a class called Deck that contains an ArrayList 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.

class Deck
{
  String[] seeds = {"HEART", "DIAMOND", "CLUB", "SPADE"};
  String[] values = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"};
  ArrayList<Card> cards = new ArrayList<Card>();
  
  Deck()
  {
    //Create the cards and store them into the array.
    for(int seed = 0; seed < seeds.length; seed++)
    {
      for(int value = 0; value < values.length; value++)
      {
        String cardName = seeds[seed] + "-" + values[value] + ".svg";
        cards.add(new Card(cardName));
      }
    }

    //Shuffle the deck.
    //this.shuffle();

    //Give the cards x and y coordinates.
    for(int c = 0; c < 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 > 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();
    }
  }
}

Card class:

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 > x && mouseX < (x+cardWidth) && mouseY > y && mouseY < (y+cardHeight);
  }
  
  void render()
  {
    shape(svg, x, y, cardWidth, cardHeight);
  }
}

The render() method of the class Deck is called once every draw() loop, with frameRate set to 10.
Anyway, the code works fine, the only problem is in how two svg are rendered, as you can see here: Application screenshot For some reasons, only the 5 of spade and the inner drawing of the jack of heart are completely tilted.
However when opened with Inkscape or any browser they look correctly orientated, thus my confusion.
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.
It may also be processing, but then I would have no idea why or how to fix it.
Any help will be appreciated, thanks in advance.

EDIT
Adding main sketch file as requested in the comments.
However note that it's stripped off of the upper gray bar and the rectangles.

//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();
}
Solution

  • I tested it, and this seems to fix it.

    In SPADE-5.svg, on line 84/85, remove

    transform="rotate(180,1744.645,-315.5025)"

    HEART-11-JACK.svg, on line 123/124, remove

    transform="rotate(0.33810995,363.27095,269.89449)"

    (make sure not to delete the >)