Why is a generated SVG image less rich than the corresponding PNG image

user_8653690 0
Viewed 253

To set this up, I used svgwrite library to create a sample SVG image (20 squares of length 100 at random locations on a display size of length 400)

import svgwrite
import random

random.seed(42)
dwg = svgwrite.Drawing('x.svg', size=(400,400))
dwg.add(dwg.rect(insert=(0,0), size=('100%', '100%'), fill='white')) # White background
for i in range(20):
    coordinates = (random.randint(0,399), random.randint(0,399))
    color = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
    dwg.add(dwg.rect(coordinates, (100, 100),
        stroke='black',
        fill=svgwrite.rgb(*color),
        stroke_width=1)
    )
dwg.save()

I then wrote a sample pygame program to generate a PNG image of the same sample. (A seed has been used to generate the same sequence of squares.)

import pygame
import random

random.seed(42)
display = pygame.display.set_mode((400,400))
display.fill((255,255,255)) # White background
for i in range(20):
    coordinates = (random.randint(0,399), random.randint(0,399))
    color = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
    pygame.draw.rect(display, color, coordinates+(100,100), 0)
    pygame.draw.rect(display, (0,0,0), coordinates+(100,100), 1) #For black border

pygame.image.save(display, "x.png")

These are the images that I got (SVG's can't be uploaded to SO, so I have provided a screenshot. Nevertheless, the programs above can be run to output the same).

SVG v/s PNG

My question is, why is the PNG (on the left) richer and sharper than the corresponding SVG image? The SVG looks blurred and bland, comparatively.

EDIT: One can notice the fine white line between the first two squares at the top-left corner. It's not very clear in the SVG.

svgwrite png pygame svg python-3.x
1 Answers

Two things I think may impact:

  1. You are using an image viewer, which could distort the vectorial SVG image. I think all of the vector images viewers get the actual screen size, then export the vectorial image into a matrix image sized in function of the size of the screen you have. Then they display the matrix image. If they render the image with softened sharpness, or if they have a problem by getting the size of your screen, the image may be blurred.

  2. To make the PNG image, you use pygame. But you are using another module to make the SVG image. This module may function differently, and also exports the image with another quality than if you were exporting it with pygame.

For me personally the SVG image appears blurred with Gimp, for example, but not with another SVG viewer.

So I think the problem comes from your image viewer.

user_136334240
Related