Comments/Ratings for a Single Item
On my iPad, the GIFs are looking as good as the PNGs, though on my Windows desktop, they were obviously lower quality.
I checked my Android tablet after my iPad. The GIFs looked good for the most part, but I did notice the more jagged line of the Rook. When I pinched and zoomed to make the images larger, I could easily see that the GIFs were lower quality, and I did the same on the iPad and got the same results. So the reason they initially looked better on mobile devices was because they were being displayed at a smaller size, possibly with some additional anti-aliasing.
I have learned that it probably was not a conscious design choice to make the SVGs match a font size of 37 when reduced to 50x50. In trying to make SVGs, I set the width and height of the image to 1000, and I used a font size of 1000, and the result matched a font size of 37. In trying to make it bigger, I first tried a larger font size, but it wouldn't accept anything larger than 1000. I got it to accept a larger font size by making the viewbox larger than the image. I first used a viewbox and font size of 1100, and I got a 44x49 image of the Queen. In comparison my PNG image of the Queen was 43x46. I tried to get a smaller size by reducing the viewport and font size to 1082, which I calculated should match a font size of 40, but I still got a 44x49 image. So it looks like trying to make an SVG gives me less precise control over the size of the resulting image. I suppose this is because vector graphics introduce a level of abstraction away from precise control over individual pixels. Here are three attempts at trying to match the font size of 40 that all failed:
One solution I thought of for making SvGs the size I want was to crop them, then reduce them in size by a fixed percentage. But I realized this would not work, because if I do that, they will go out of proportion with each other. Using the same dimensions for SVGs keeps them proportional to each other when reducing them to a particular size or by a particular percentage. It may have been an arbitrary decision when David made his Alfaerie GIFs the same dimensions as each other, but it was not an arbitrary decision to make SVG images the same dimensions. Because of the way vector graphics work, this keeps them proportional. I have been able to make cropped GIF and PNG images, because cropping does not affect the proportionality of bitmap images.
You lost me. What is this 'font size' you are referring to? Is this because you have the orthodox set as font (TTF), and try to produce other images as individual .svg files?
Font sizes are typically referred to in 'point' units, which is not the same as pixels. I don't know how the various point sizes correspont to pixels; this must be glyph-dependent, at least for the width in proportional fonts.
SVG images have an intrinsic size, but it is often ignored by the software rendering it. I think the Alfaerie SVGs are 2048x2048, but including them as image on a HTML page without size instructions renders them as 150x150. That is a browser decision.
In making the Magnetic and Motif SVGs I started from individual SVG images from the GitHub pychess repository, not from the font.
You lost me. What is this 'font size' you are referring to?
Ultimate Paint, Paint.net, and Inkscape all have the feature of letting me enter text in a specific font and size.
Is this because you have the orthodox set as font (TTF), and try to produce other images as individual .svg files?
Yes
Font sizes are typically referred to in 'point' units, which is not the same as pixels.
By taking a screenshot with Ultimate Paint and doing some comparisons, I determined that Ultimate Paint does measure font size in points. Using the same screenshot with Paint.net, I determined that it also measures it in points. So when I'm referring to a 37 font size or a 40 font size, I mean 37pt and 40pt, which explains why I could not use font sizes closer to 50 for something that should fit within a 50x50 area. Inkscape gave me the choice of units, and I chose pixels. So, when I was using a font size of 1000 in a 1000x1000 image, I meant 1000 pixels.
I don't know how the various point sizes correspont to pixels; this must be glyph-dependent, at least for the width in proportional fonts.
Looking into the conversion from points to pixels, I have found out that a point is 4/3 of a pixel. So, the 40pt size I've been using is a 53 1/3 pixel size, and 37pt is a 49 1/3 pixel size. This would explain why the SVGs with a font size matching their height and width have a 37pt font size when reduced to 50x50. Without bearing this in mind, all I originally did was confirm that all the characters I was using in the Chess Magnetic font were smaller than 50x50 at a font size of 40.
SVG images have an intrinsic size, but it is often ignored by the software rendering it. I think the Alfaerie SVGs are 2048x2048, but including them as image on a HTML page without size instructions renders them as 150x150.
In my experience, a browser will try to try to draw them at full size when there are no size instructions.
In making the Magnetic and Motif SVGs I started from individual SVG images from the GitHub pychess repository, not from the font.
As the first person to make Magnetic and Motif piece images for use in games, I used the font, and when I made new ones, I still used the font. In making SVGs, I painted over all the outlines and inner areas, then used a text editor to delete reference to the font, as keeping the font reference was causing some issues.
I think browsers only use different size than the intrinsic one if they think the latter is unreasonably large.
Does converting the point size to pixels, and editing all SVGs extracted from the font to have that intrinsic size give the desired result?
Does converting the point size to pixels, and editing all SVGs extracted from the font to have that intrinsic size give the desired result?What I did was make the Viewbox large enough for an 800pt font, set the font size unit to pt, and used 800pt for the font size. This gave the desired results, as seen on the 3rd, 4th, and 5th lines here.
GIFs
PNGs
New SVGs
PNGs made from new SVGs with showpiece.php
Cropped PNGs made from new SVGs with showpiece.php
PNGs made from other SVGs
Btw where Magnetic SVGs are available to download? (or they aren’t?)
The old SVG images for Magnetic are in /graphics.dir/svg/magnetic/, where all SVG normally are kept to make them available to fen2.php. Currently this new set appears to be in /graphics.dir/MagneticPNG/svg/, which is a bit of an illogical place. So if the idea is to make it available for public use, it would probably be best to move them, or at least a copy of them, to some /graphics.dir/svg/*/ as well.
Of course one can doubt the desirability of having two practically indistinguishable piece themes there. So it might be better to just merge the sets.
Currently this new set appears to be in /graphics.dir/MagneticPNG/svg/, which is a bit of an illogical place. So if the idea is to make it available for public use, it would probably be best to move them, or at least a copy of them, to some /graphics.dir/svg/*/ as well.
Since they only include the standard Chess pieces so far, it may be too soon for that.
Of course one can doubt the desirability of having two practically indistinguishable piece themes there. So it might be better to just merge the sets.
Since my SVGs would yield larger piece images at the same size, I would not recommend merging them. They could replace the older SVGs, but we shouldn't do that until my SVGs cover all the same pieces. Or, because pieces based on them are larger, they could be provided as an alternative.
OK. I don't know why you changed the size, but when the set is finished we could include them in a new directory magneticL.
I don't know why you changed the size,
It's not that I changed the size. The other SVGs had changed the size from what my original GIFs were. This was probably done unintentionally and probably happened because Inkscape would not let you make larger images unless you intentionally decided to. I made my SVGs the same size as my original GIFs and the same size as my recent PNG images, because I wanted to compare them all at the same size. Also, I originally chose the size of 40pt, because it helped maximize the size of the pieces within the space they would be displayed in, and this becomes more important the smaller the display gets, such as on phones.
When I use Inkscape to convert raster images I start with loading it with another image of the set, and then delete all image elements, to get a blank canvas of the desired size. Then I import the raster image as background, scale it to the same size as the set uses, and overlay it with my own drawing. This avoids size change.
The Magnetic SVGs I started from where not made by me, though. I copied them from the PyChess GitHub repository. And then did cut & paste jobs combined with some editing to create the compounds.
Here are some new SVGs I made today, displayed at 50x50:
Now that I have the Chess images made at the correct size, I'm able to use parts of them to produce other pieces. For some of these, I used my large PNG images, set the canvas size to 1000x1000, doubled the height and width of the image, centered it, and used it as a guide to place parts of SVGs, then I removed the PNG image, centered the image again, and saved the SVG. For the Cannon and Vao, I recreated them without guides. I also created some Pao and Mao pieces by adding Chinese characters in 250pt Noto Sans.
Wouldn't it look more natural to have the Cannon aim horizontally? Shooting straight up is never recommended.
It could not be straight up, but it is rather you watch it directly from behind!
Then you would not see a flat top, but a curved one.
The barrel part of the Cannon image is a modification of the Pawn image, which comes with a horizontal base that is hard to cleanly separate from it. Also, the Musketeer Chess Cannon does point straight up. So there is precedent.
Precedent or not, it is still ugly. The Vao has a rotated barrel. Surely it should be easy to rotate it a bit more to get a horizontal one?
I have already made one like that, but it takes away from the significance of using a modified Bishop for the Vao.
I have already made one like that, but it takes away from the significance of using a modified Bishop for the Vao.
Well, I had not recognized it as a modified Bishop. And I doubt that anyone would.
Inkscape crashes more often than Ultimate Paint, which at least has the excuse of being a 32-bit program that development stopped on 19 years ago. Here's what I've done today:
One other issue I have with Inkscape is that it will not let me enter Chess Magnetic characters in bold, which would be useful for giving smaller versions of the characters thicker borders. Paint.net let me do this, which helped me make the Pawn-based pieces look better than most of these Pawn-based SVGs do. So I'm thinking of making some alternative pieces that use the base of the Pawn without the stem so that I can use a larger version of the other piece.
I did figure out how to enter Chess Magnetic characters in bold. Here is my Prince image along with a new Prince image for comparison:
25 comments displayed
Permalink to the exact comments currently displayed.
Comparing my old GIFs, my new PNGs, and some SVG-derived PNGs:
My old GIFs and my new PNGs are both closer together, because they had extra white space cropped off, whereas the SVG-derived pieces are each 50x50 images. Testing a screenshot in Ultimate Paint, my PNGs match a font size of 40, which is what I predicted for an original font size of 400 reduced to 10%, and the SVG-derived ones match a font size of 37. The old GIFs match a font size of 40 except for the Rook, which matches 36 to make its height more comparable to the other pieces. In terms of quality, both sets of PNGs are much better than the GIFs, and it's hard to spot any differences in quality between them.