Open inspirobot-npross opened 2 years ago
I propose switching to the PNGs I created. They are all exactly 256 by 256 pixels.
PNG images will not scale gracefully. Perhaps we could create perfectly square SVG files instead?
Yes, I'm good with that. I don't really know how to create svgs properly though
If you're interested Jeff, you could create some svgs for the suit symbols. These were the ones I came up with, but they are open to modification/discussion:
Happy to help! Yes, I can export these from Illustrator in SVG format and attach them to this thread.
I will make sure they are perfectly square. I will use 256px by 256px artboards unless you'd prefer a different size.
Please take a look at these SVG icons and let me know if they look OK. These are scaled to a square resolution 256px by 256px. Archive.zip
@jeffro426 Is there a way they can be converted to vectors? I think these are just pngs in svg clothing. from inside the svg :(xlink:href="data:image/png;base64,)
Definitely! Yes, I can convert the graphics to vector first and export new SVG files.
I converted the artwork to vector and saved them in square SVG files Suits.zip
@jeffro426 ok i know I'm getting picky but I uned to work in a company whose sole reason for existing was to make graphics and text look good on television for 2 decades...
When these get drawn by the browser at small sizes the anti-aliasing looks terrible.
I'm not sure why. Maybe the browser just sucks at antialiasing at small sizes. Font renders have all kinds of hinting and are optimized for drawing vectors at small sizes... so maybe there is no fixing it.
Some of the svgs seem extra complicated (ie likely more lines and curves than actually necessary).
Is there an option in illustrator to simplify curves and to make sure that it is using curves instead of a lot of line segments?
I have no idea if this will improve the rendering or not...
Of course this is not a showstopper or anything... I am going to see how hard it is to make the cards render with these svgs and if it really drives me crazy in the future there is always the option to just render all the cards as pixel-perfect images...
That's an interesting observation @inspirobot-npross !
I'd be glad to fix these vector images. Of course they look fine in my system .
Yes, I can remove any extra geometry. I let Illustrator convert the GIF to vector and deleted the white background tiles.
Do any of the icons scale properly or do they all show anti-aliasing?
I ask because some appeared to be vector based without background tiles (e.g., the spade, heart, club, and diamond suits).
@jeffro426 I already manually removed the backgrounds. I'm not sure it made much difference. I will experiment some more.
I tried a smaller scale version of the Suit icons at 52x52px which won't need to be rescaled as aggressively. Perhaps that will look cleaner.
I double checked for any extra geometry and the objects are clean and simple. The Blue Cloud had an artifact which I removed which likely wasn't visible in the Browser.
Need someone who knows CSS to make the pips on the card all render from centers. The current positions seem to be aligned to the left of the glyph and the glyphs all have different amounts of padding so different suits appear at different positions...