User blog:Dǐll Kevlar/Main Page banner

I was finally given the chance to work with .svg files on Rooster Teeth Wiki. SVG is practically just a set of instructions to make an image (Technically all image types are but, this uses XML so, it cannot be compressed. ever).

Layers
In this case, every single layer is independent. Think of it as a digital version of Screen printing. Using Template:Superimpose2 we are able to stack images and align them. In this case, I used 4 files: File:Main-page-banner-flair.svg, File:Wiki-banner red.svg, File:Wiki-banner grey.svg, and File:Wiki-banner.svg. It was originally done in two layers... However, advertisments changed the site's page color and caused some weird side-effects and the "flair" file loaded first. So, for 2 seconds you'd get to see a really ugly banner.

RT Logo
Getting the Rooster Teeth logo was more difficult than you might think. Every online version of it is super blurry or too small to be helpful. In the end, I basically used an expanded version of a blurry logo and manually cut every red pixel from it into a new image.

The grey/black "flair" I suspect was Googled by Burnie Burns, back in the day. There's a yellow/white version that exists as "royalty free" and inverting the colors, grayscale, and rotating makes an exact replica.

Coloring
I couldn't manage to find a site that did coloring correctly. Hence why it's done in 4 parts. I ended up using Notepad++ to change some of the raw code in the svg files to get color. A website called "online-convert" seemed to be the only service that was converting things at all. Even then, each image started out as black.


 * Note: Red is #891100 and grey is #131313

If the color theme ever changes here, the files can be edited, again, in Notepad++.

In a nutshell
I had wanted to do this for a long time. I am a huge hater of ".jpg/jpeg" and I think the format should be replaced in technology. If it wasn't for Wikia compressing ".png" files I don't know if I'd ever have a reason to try this method out.