svg vs png
-
@FlyingTomahawk I'm going to paraphrase @Rookervik here, and hopefully I do it justice. From what I remember him saying, you can scale a 640x360 px PNG up to 1920x1080 and it will only take the resources of a 640x360 image. If you have a 640x360 SVG and scale it up to 1920x1080, the way it renders will take the resources of a 1920x1080 image.
I think that's the basic idea anyway.
-
So from what I understand is that SVG can scale up or down without any quality loss but requires more resources/power. PNG on the other hand can be scaled up or down but with a certain loss in quality depending on the original resolution but the advantage is that it uses less resources. Is that correct?
While I was working on this new theme of mine I realized that there are some similarities to Bootstrap or any other responsive framework.
You have to make sure to define the appropriate size for images so that they scale correctly at any screen resolution but when it comes to the frame or other larger images you must decide a certain resolution. In my case I used 1920 x 1080 / 300dpi for the frame since I intend to use it on a large Full HD TV. Using a smaller resolution would make the frame look blurry on a Full HD TV then again when I look at my theme on a smaller screen for example 1366 x 768 the frame seems to loose quality too.
If the SVG file type can scale better then it might be worth it, I just don't know if the RPi can handle it especially with many systems. I have already my doubts that the current theme condition can handle more then 10 systems but this I will confirm as soon I get the pages for each emulator done.Then there is the question, as UDb23 mentioned, can ES handle a full SVG theme?
-
@mattrixk In terms of final (video) memory usage I would tend to think that it's the same, whatever file format is used.
-
@mattrixk is right. A PNG will take the same resources no matter how large you scale it. Scaling it larger, you will see the pixels of the raw bitmap image. While a SVG will take the resources for the size it is displayed. You can scale the SVG as large as you want without quality-loss, but that scaled image is pasted to a canvas that requires the same video RAM as an uncompressed PNG of that same size.
It's something you wrestle with quite often in making games. Especially for limited RAM systems.
-
@Rookervik you got me thinking. Would a 1080p (1920x1080) image use the resources of a 2048x2048 image? If so, would a 720p (1280x720) image also use the resources of a 2048x2048 image? In that case would there be no use to make a 720p image to cut down on resources?
-
@mattrixk You're getting into the realm of what the particular graphics chip can handle. Newer cards can handle non-square textures. But to what extent, I don't know. We'd have to read up on the video processor that the Pi has and what it can handle. But even non-square textures are still, usually, limited to power of 2 sizes. Along the X and Y.
-
I started adding new systems to the theme and I got all the logos that I need in PNG format. I tried to use the logos in PNG format but they look terrible. The edges are pixelated.
I then converted that PNG file with Illustrator to SVG format but the moment I use that file Emulationstation crashes at the boot up.
So I started to compare file sizes and quality with other SVG logos from other themes and the file size difference is huge! My SVG file has 96KB, the same logo but different SVG file from another theme has only 5.3KB.
When I open the 5.3KB SVG file in Illustrator I can select each single letter with the magic-looking tool but I cannot do that with my SVG file. So I guess that my file was simply converted and the other one from the other theme was actually created in Illustrator or similar software.
Is there any way to convert PNG files to SVG with decent file size? Or do I have to create all the logos from scratch in Illustrator? -
@Rookervik: Hmm interesting. I don't really know anything about that side of things. If I decide to do full screen backgrounds (instead of repeating patterns) I think I'll stick with 1024 x 768 just to be on the safe side.
@FlyingTomahawk: sorry mate, I don't know anything about making svgs, so I can't really help you there. -
@FlyingTomahawk To make it simple: Vector images store the actual image as points (coordinates) connected by vectors (lines or curves that are calculated according to specific functions). That's why you can enlarge and reduce them and still have best quality of the image. Common pure vector formats are EPS, AI, SVG + DWG & DXF (CAD related). also PDF can contain vector images.
Also that's why you can select and manipulate single elements or points (nodes) in a real vector image.Vectors are mainly used for NON photographic content as they're not ideal for gradients, huge number of colors or images with lots of tiny details.
To convert a pixel image (like PNG) to vector you need to "vectorize" it.
You can check this tutorial for illustrator.
I use a free software, Inkscape, for this.
Fact is that just using the function to vectorize will almost never provide you a good final result. Manual editing is still required and therefore you need some basic understanding on how vector image editing works.
ES usually expects the objects to be grouped and, as far as I know, does not support all SVG functions. It cannot handle strokes or blurring for example.
Files generated with inkscape do work with ES. All the logos in the custom logo pack are done with it.
One more important point is that original pixel image should be of decent quality; tip: try to enhance contrast of the image and remove any dithering/halftoning (especially on scanned images on paper) BEFORE vectorizing.You can also try some free online convert service; check these.
-
@FlyingTomahawk If your PNGs are pixelated on the edges, you are likely using 8-bit PNG format, this uses a gif style indexed pallet and has no support for alpha blending. This is the default setting on photoshop/illustrator for save-for-web output. Make sure you are saving your PNGs as 24 bit to allow for alpha transparencies around the edge pixels, and the pixelated effect will be gone. Drawback is the file size will be 5 to 10x larger.
Graphic designer by day, gamer by night, haha.
Contributions to the project are always appreciated, so if you would like to support us with a donation you can do so here.
Hosting provided by Mythic-Beasts. See the Hosting Information page for more information.