4

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.

Miraj50
  • 4,257
  • 1
  • 21
  • 34
  • 2
    try adding shape-rendering="crispEdges" – Robert Longson Jun 18 '20 at 13:49
  • @RobertLongson Thank you so much for that. Yes, that sharpened the edges! But the colors are still a bit different. For example, please look at the violet square just below the first square and say, the hot pink square in the bottom. – Miraj50 Jun 18 '20 at 14:02
  • Also I came to know that if I set up the length of the squares as 99 for making the svg, that fine white line difference goes away. – Miraj50 Jun 18 '20 at 14:04
  • The colors work fine for me. I opened both files in the same application (Firefox) and compared the rects with a color picker. Are you sure it's not your viewer screwing up the SVG? – sloth Jun 18 '20 at 14:34
  • Maybe one or other output is being gamma corrected by the renderer and the other is not. – Robert Longson Jun 18 '20 at 14:42
  • @sloth You're right. I'm just using the default Image viewer in Ubuntu. And it does kinda *enhance* the colors a little bit. – Miraj50 Jun 18 '20 at 14:45
  • Might be different ICC color profiles _see_ [Embedding ICC profiles in image file formats](http://www.color.org/profile_embedding.xalter) but no experience with them. – Owain Evans Jun 18 '20 at 22:51
  • Yeah, EOG the default Ubuntu image viewer moves the colour channels by 5 (/255) points sometimes. Not clear why either. – Kingsley Jun 19 '20 at 02:08

1 Answers1

0

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.

D_00
  • 1,440
  • 2
  • 13
  • 32