search

htdebeer / SVG-cards

A set of playing cards in SVG (now also with a rendering in PNG)
GNU Lesser General Public License v2.1
147 stars 45 forks source link

The main card image is clipped by the 'Suit/Rank' section #8

Open I-Omnibus opened 1 year ago

I-Omnibus commented 1 year ago

Thanks for this excellent repo 😊 Issue


<!DOCTYPE html>
<html>

<head>
  <title>The main card image is clipped by the 'Suit/Rank' section</title>
</head>

<body>
  <div data-suit="heart" data-rank="12" style="width: 170px;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 170 245">
      <use href="./node_modules/svg-cards/svg-cards.svg#heart_queen"></use>
    </svg>
  </div>
  <a href="https://github.com/htdebeer/SVG-cards" target="_blank">Huub de Beer</a>
</body>

</html>```
htdebeer commented 1 year ago

I am not sure this is intentional or not. Looking at the two images in the original repository's webpage, I see one image with this clipping and one without.

I-Omnibus commented 1 year ago

I see what you mean but it's a slight crease in an otherwise beautiful rendition. I know nothing about SVG and were it as simple as rescaling the central image not to overlap the denomination, that could be a quick solution, I guess.

In any event, it's not a big issue.

htdebeer commented 1 year ago

It's not a big issue, but adding an extra set of cards with a nice and uninterrupted border might be nice. Then our users can choose whatever design they like best.

You can scale the inner part of the card in SVG. Or maybe scale the rank part and move it a bit towards the inner part of the card. However, I doubt either solution result in nicer looking cards. But I am not a designer.

I do believe it should be possible to create a nice design with a complete border around the card. Doing this well will take a bit of effort though. You need to come up with a layout that works for all cards and looks fine however you scale your cards.