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)
ZeroNet PNG ZeroNet SVG

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)
ZeroNet Mini ZeroNet Solid

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)
Play logo Play logo SVG

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”.

Subscribe

Subscribe to this blog via RSS.

Recent Blog Posts

Recent Posts

All Posts and Blog Posts

Click here to view all blog and other post I have written.

Popular Tags

Adblock (2) Ethics (1) Adverts (2) Images (1) Formats (1) Zeronet (2) P2p (3) Dns (1) Zookos triangle (1) Data (2) Maths (1) Bitcoin (1) Blockchain (1) Svg (1) Python (2) Regex (2) Coding (2) Coding challenge (2) Repl.it (1) Emoji (1)

About me

I am interested in Physics, Maths, Programming and also play a few games in my spare time. I have an interest in data and have made webscrapers to gather and process information, I am currently looking into nice ways to display information easily in infographics using Python. I can code in Matlab, Python and have also made a Steam trading bot in Node.JS.

Social Links