AceLewis.com - Slight improvements to Zeronet's logo and SVGs

Slight improvements to Zeronet's logo and SVGs

23 Jan, 2017. | By: AceLewis

In this quick post I will share some SVGs I made of ZeroNet’s logo whilst I was playing about with Inkscape, the logo I am sharing is an improved version of the ZeroNet logo and I will state the improvements I made. I made this whilst learning how to use Inkscape a free open source vector image creation tool.

Sections

Improvements to ZeroNet’s logo
Files and comparison
Advantages of these SVGs
Bonus SVG

Improvements

I tried remaking ZeroNet’s logo in SVG format using Inkscape. Whilst remaking the logo I noticed a few problems with it when I tired copying then rotating the top part of the logo to use in the bottom part, first the logo is not centred the middle it is a noticeable distance away from where is should be.

The second thing is the horizontal bar going from left to right changes thickness by about 10%. When making the SVGs of the logo I corrected for these issues. The SVG colour gradient is well matched to the original image, and as this logo is an SVG it means that it can be scaled to as big or as little as you want it to be.

Files and comparison

All the raw Inkscape files are on my Github, the Inkscape files can be compressed much further by removing unnecessary details contained within e.g the names of the elements and the program used to create the file. I will make a post here showing how you can do it yourself, here I will show the compressed files.

PNG (7.26 KB)

SVG (1002 bytes)

I also created a simple solid colour logo for ZeroNet. I am also comparing it to the “Mini PNG” that can be found in the top left hand corner of Hello ZeroNet. Keep in mind the Mini PNG has a larger file size than my main ZeroNet SVG.

Mini PNG (1.13 KB)

Solid SVG (295 bytes)

Advantages of these SVGs

There are many advantages of using SVGs for ZeroNet’s logo, the filesize of the SVG is 973 bytes compared to the 7,438 bytes PNG that is 7.6+ times larger, therefore the SVG is brilliant for small ZeroNet sites. The SVG is a vector image so can be displayed as big as you want without becoming pixelated. The PNG image I based the SVG logo from is 261 KB it’s file size is too impractical to be used so is down scaled to an appropriate size, on Hello ZeroNet there are two ZeroNet PNGs of different sizes however if a SVG was used one file could be used for all sizes. In the files I am sharing the SVGs have no white space around them however that it trivial to add if you want to surround the logo with whitespace.

Bonus SVG

I have also made a “bonus” SVG of Play’s logo, I like the logo and thought that it can easily be made into a nice SVG so I did.

Play PNG (2.55 KB)

Play SVG (951 bytes)

Conclusion

I made these SVGs as part of my learning process on how to use Inkscape, I am now much better than I was at using this tool and I have show that SVGs can be better than raster based images (such as PNGs) in certain circumstances.

If you want to know more about the types of images and the differences between them you can see my blog post “Image Formats and When to Use Them”.