I'm not going to claim I'm a designer. The most impressive thing I've ever designed is probably the logo for this site. Oh, you didn't know? That logo is my original work - inspired by my actual garage standing on my property here in the Arctic capital of Norway, Tromsø. And behold, now I'm going to tell you how I created that awesome peace of artwork - the logo!

Actually, the most awesome part about the logo isn't the artwork itself, but:

• its small size; only 19k
• in spite of the size, it's able to infinitely scale without ever losing quality
• it changes color based on CSS

The secret sauce is called SVG. Any kind of SVG won't do, and that's what I'm writing about today.

1. Install Inkscape. It's a free and open-source vector graphics editor.
2. Create a simple logo with the tools at your disposal in the leftmost panel
3. When your artwork is done, select all elements (Ctrl + A)
4. Go to "File > Document properties" and click "Custom size > Resize page to drawing or selection". Close the "Document properties" dialog.
5. If you have simple drawings consider clicking "Path > Object to path"
6. Click "Save as. Choose the filetype Optimized SVG". Go to the "SVT output" tab and tick "Enable viewboxing"
7. Click "OK".
8. Edit the SVG-file in a text editor and remove the "width" and "height" attributes from the root "svg" tag. The "viewBox" attribute is sufficient for use on the web. You just define the desired image width or height in your HTML/CSS code, and the viewBox attribute sees to that scaling is done proportionally.

You now have an SVG file that you can embed in your HTML the following way in e.g. Twig:

 {% include('@images/grav-logo.svg') %}

Note, there is no img tag. Just embed the entire SVG-document inside your HTML-code. Now you can manipulate the SVG with CSS to change colors. The following CSS assumes that the logo is embedded in a header inside a link which presumably takes the user to the home page of the site - and makes the logo 42 pixels high and white:

 div.header a.link-home svg {
    height: 42px;
    color: black;
 }

Happy SVG'ing!