Search code examples
pythonsvgpygamechesspython-chess

How can I use SVGs with pygame (or perhaps display PNGs at a higher definition)?

I'm trying to make a chess opening trainer with Pygame. Graphically, it's incredibly simple; it works like a slideshow, I am only blitting a single image to the screen at a time which updates when I press the return key. I am using chess.svg to generate an SVG of the current game state. Not being able to use SVGs natively with pygame means that I have been converting the SVG to a PNG.

Viewing the PNG on my computer, it's very clear.

PNG Image

However when pygame displays the image, it's very blurry.

Pygame Image

Ideally I would like pygame to display the SVG so I don't have to worry about the resolution at all. All I found on pygame and SVGs was this link from 12 years ago. In 2018, an answer was posted stating that the original methods no longer worked. However, now, in 2021 the methods given in 2018 no longer work either; I tried, and one comment also confirms this.

If using SVGs is not possible, that's fine, provided I can get pygame to display the PNG at a greater definition than it currently does.

Even if I make screen = pygame.display.set_mode((width, height)) fullscreen, it's still blurry. I can't seem to find anything on that, so I'm not sure that's the issue here.

Here's a simplified version of my code to demonstrate the graphical part:

import pygame
from pygame.locals import *
import chess
import cairosvg
import chess.svg
import chess.pgn

##Setup Pygame:
pygame.init()
 
width, height = 640, 640
screen = pygame.display.set_mode((width, height))

## MAIN ##

board = chess.Board()
                
#Step 1: Create image
boardsvg = chess.svg.board(board=board)
f = open("image.SVG", "w")
f.write(boardsvg)
f.close()

#scale
cairosvg.svg2png(url="image.svg", write_to="image_scaled.png", scale=3.0)

#Step2: Blit the image
image = pygame.image.load('image_scaled.png')
image = pygame.transform.scale(image, (640, 640))
screen.blit(image,(0,0))
pygame.display.flip()

Does anyone one know what I need to try?

Cheers.

Solution

  • I found that using smoothscale like so image = pygame.transform.smoothscale(image, (width, height)) helped a little, but it still wasn't perfect. In the end I decided to rewrite it in javascript using cm-chessboard.