● SVG?

Sat Mar 18, 2023 9:48 pm
Clan Leader
Top Dog
Nuke Dev / Coder
3019 Posts
coRpSE
Currently Offline
Offline

Most Played:
This week: 19.0hrs.
Total Played: 579hrs.


  
Must be married.
Reputation: 7330.5
votes: 7
Anyone out there that is good at making graphics, but also can save it as a high quality SVG?
I have an image that I did for the Evo lotto where I used/modified/recreated the Evo logo and made a new Lotto image, but I like to put it as a SVG if possible. Every online converter sucks.

Expand


Expand
Sun Mar 19, 2023 7:52 am
Original Poster
Clan Leader
Top Dog
Nuke Dev / Coder
3019 Posts
coRpSE
Currently Offline
Offline

Most Played:
This week: 19.0hrs.
Total Played: 579hrs.


  
Must be married.
Reputation: 7330.5
votes: 7
Never mind. I tried around 30 different online converters, and they all sucked. I had a couple remove all color, others add in new colors that were not even there, and others that just changed the whole thing all together. There were a few that were close, but, blurred/distorted the image a little, but finally, this morning, I found one that worked great. So, for anyone that is looking to make an SVG, and you make it a high quality .png with alphas, then I recommend going to the site below, (for now).
Please login to see this link
Get registered or Log in


You may ask why I am doing an SVG instead of doing regular images, and it's simple. I just want 1 image for the system, and I don't want to make it different sizes. If I can reduce the amount of files, the better. If you don't know, there are many types of images, everything from .jpg to ,gif. If you look at my stuff, I like to use .png due to it having great alpha channels, (transparency), but also being a high quality image. GIF images do have some alpha channels, but does not allow for any fades. Just think of their alpha channels as being a light switch, just and on or off state with no fade. PNG is a dimmer switch that allows on and off and everything in-between.

Now, SVG, isn't really an image in how we would traditionally think of an image. SVG stands for Scalable Vector Graphics, and is a is an XML based, vector image format, meaning that they are resolution independent. Unlike the aforementioned image type, they are all bitmap-based (or raster-based), meaning they consist of a set amount of pixels. Typically, this means that as soon as you start to increase or decrease an image of this type, you are presented with jagged lines, blurry artifacts and a pixelated mess. An SVG image is drawn from mathematically declared shapes and curves, not pixels. SVG’s can be animated, support transparency, and any combinations of colors or gradients.

SVG is a lossless file format like GIF and PNG, and they tend to be fairly large files when compared with other formats for the web, but overall can be cached and scalable for any device that is viewing it for it, like mentioned before, will look great at any resolution.

Here it is in SVG format.
Expand
Please login to see this link
Get registered or Log in


 
Sun Mar 19, 2023 3:08 pm
Blabbing Noob
53 Posts
Reputation: 724.3
Although it is scalable compared to .png, I still see a difference in quality with your png file being slightly clearer than your svg image. kopf gegen wand  schockiert
Sun Mar 19, 2023 3:38 pm
Original Poster
Clan Leader
Top Dog
Nuke Dev / Coder
3019 Posts
coRpSE
Currently Offline
Offline

Most Played:
This week: 19.0hrs.
Total Played: 579hrs.


  
Must be married.
Reputation: 7330.5
votes: 7
— Megaboost wrote
Although it is scalable compared to .png, I still see a difference in quality with your png file being slightly clearer than your svg image. kopf gegen wand  schockiert


Yes, SVG is going to be slightly lower than PNG, but, the SVG is actually just code where the .png is pixels. I was just looking to have 1 file that will work on all devices, vs using the usual .png. I also wanted it to maintain the visual aesthetics and I have to say, it did a very good job. One thing I was impressed was that it actually maintained the white noise that I put into the center dot.


 
Sun Mar 19, 2023 8:20 pm
NOOB!!!
18 Posts
Reputation: 228
Yeah I do not have the ability to save as SVG. But I do see the difference like megaboost said but that is to be expected with a SVG file. Glad you got it figured out CoRpSE
Sun Mar 19, 2023 8:58 pm
Original Poster
Clan Leader
Top Dog
Nuke Dev / Coder
3019 Posts
coRpSE
Currently Offline
Offline

Most Played:
This week: 19.0hrs.
Total Played: 579hrs.


  
Must be married.
Reputation: 7330.5
votes: 7
Must be our aspect ratios or our browsers, I am not seeing much of a difference myself.

Expand
Expand

Update.
I just tested on Chrome, Firefox, and Edge, they looked the same, so then I tried with both themes that we have here and again, looked the same.

Here is what I see. Left is Chrome and right is Firefox.
Left is V2 theme and right is our original.
Expand
Please login to see this link
Get registered or Log in


I also created a blank HTML file and put the images in there just to see it on a white background:
Expand

The page:
Please login to see this link
Get registered or Log in


I am just not seeing it, to me, they look identical or near identical.


I guess I am not seeing what you guys are seeing. Before I continue on with the SVG, I want to see if it looks bad or what not in the system. I just want to make sure what you guys are seeing. If it looks bad, then I wont add in it into the module.


 
Forums ©