Now that the logo for
TeochewThunder has been changed, for this month's web tutorial, we will be examining the process behind the new SVG logo. This is basically a XML file that your web browser will display as an image. Today, not only am I going to show you how to produce it, I will show you the little hacks I employed along the way.
And the beauty of this is, you just need a text editor. The file will be saved with a
.svg extension, and you can open it in your web browser.
We begin with the svg tag. The
version and
xmlns attributes are important here, for this to be rendered correctly by the browser.
logo2.svg<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
We set width and height of the SVG.
logo2.svg<svg version="1.1" width="210px" height="130px" xmlns="http://www.w3.org/2000/svg">
</svg>
Now, we could just get right to drawing the SVG, but let's exercise some developer prudence. Let's create a grid of lines to aid us visually. These are a series of horizontal lines that run through the SVG, each spaced 10 pixels apart.
logo2.svg<svg version="1.1" width="210px" height="130px" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="210" y1="10" y2="10" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="20" y2="20" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="30" y2="30" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="40" y2="40" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="50" y2="50" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="60" y2="60" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="70" y2="70" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="80" y2="80" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="90" y2="90" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="100" y2="100" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="110" y2="110" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="120" y2="120" stroke="grey" stroke-width="1"/>
</svg>
This is being viewed at 300% scale.
Now for vertical lines.
logo2.svg<svg version="1.1" width="210px" height="130px" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="210" y1="10" y2="10" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="20" y2="20" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="30" y2="30" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="40" y2="40" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="50" y2="50" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="60" y2="60" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="70" y2="70" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="80" y2="80" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="90" y2="90" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="100" y2="100" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="110" y2="110" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="120" y2="120" stroke="grey" stroke-width="1"/>
<line x1="10" x2="10" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="20" x2="20" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="30" x2="30" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="40" x2="40" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="50" x2="50" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="60" x2="60" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="70" x2="70" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="80" x2="80" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="90" x2="90" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="100" x2="100" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="110" x2="110" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="120" x2="120" y1="0" y2="150" stroke="grey" stroke-width="1"/>
<line x1="130" x2="130" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="140" x2="140" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="150" x2="150" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="160" x2="160" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="170" x2="170" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="180" x2="180" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="190" x2="190" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="200" x2="200" y1="0" y2="130" stroke="grey" stroke-width="1"/>
</svg>
Now we have a nice grid! Effectively what we have here are 10 pixel squares.
Start a path tag with an empty
d attribute and set the
fill attribute to the infamous
TeochewThunder orange!
logo2.svg<svg version="1.1" width="210px" height="130px" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="210" y1="10" y2="10" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="20" y2="20" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="30" y2="30" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="40" y2="40" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="50" y2="50" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="60" y2="60" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="70" y2="70" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="80" y2="80" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="90" y2="90" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="100" y2="100" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="110" y2="110" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="120" y2="120" stroke="grey" stroke-width="1"/>
<line x1="10" x2="10" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="20" x2="20" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="30" x2="30" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="40" x2="40" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="50" x2="50" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="60" x2="60" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="70" x2="70" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="80" x2="80" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="90" x2="90" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="100" x2="100" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="110" x2="110" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="120" x2="120" y1="0" y2="150" stroke="grey" stroke-width="1"/>
<line x1="130" x2="130" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="140" x2="140" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="150" x2="150" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="160" x2="160" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="170" x2="170" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="180" x2="180" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="190" x2="190" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="200" x2="200" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<path d="" fill="rgb(255, 150, 0)"
/>
</svg>
Now that we have a grid to work off, it should be easier. We start at (0, 0). Use "M" to move the cursor to (100, 0) - which is 10 squares to the right and 1 square down. Then use "l" to move 90 pixels back (9 squares) and no squares vertically. Then use "l" again to move 40 pixels (4 squares down. Add a "Z" to signify a return to the origin, and you'll get this triangle!
logo2.svg<path d="M 100 10
l -90 0
l 0 40 Z"
fill="rgb(255, 150, 0)"
/>
The first "T" is taking shape, and we are moving right to the underlined part.
logo2.svg<path d="M 100 10
l -90 0
l 0 40
l 30 0
l 0 70
l 120 0Z"
fill="rgb(255, 150, 0)"
/>
Now we're taking care of the jagged part of the "lightning bolt". For this, we move the line to the right and up, then horizontally left, then right and up again.
logo2.svg<path d="M 100 10
l -90 0
l 0 40
l 30 0
l 0 70
l 120 0
l 15 -50
l -10 0
l 5 -20Z"
fill="rgb(255, 150, 0)"
/>
A few horizontal and vertical strokes later, we're almost done with the horizontal crosspiece of the second "T", and on course to complete the first "T".
logo2.svg<path d="M 100 10
l -90 0
l 0 40
l 30 0
l 0 70
l 120 0
l 15 -50
l -10 0
l 5 -20
l 30 0
l 0 -40
l -90 0
l 0 40Z"
fill="rgb(255, 150, 0)"
/>
This is where you do a little bit of trial and error, mirroring the slanting of the "lightning bolt", but in reverse.
logo2.svg<path d="M 100 10
l -90 0
l 0 40
l 30 0
l 0 70
l 120 0
l 15 -50
l -10 0
l 5 -20
l 30 0
l 0 -40
l -90 0
l 0 40
l 30 0
l -5 40
l 15 0
l 0 20Z"
fill="rgb(255, 150, 0)"
/>
That's actually the hardest part - the rest is all horizontal and vertical strokes.
logo2.svg<path d="M 100 10
l -90 0
l 0 40
l 30 0
l 0 70
l 120 0
l 15 -50
l -10 0
l 5 -20
l 30 0
l 0 -40
l -90 0
l 0 40
l 30 0
l -5 40
l 15 0
l 0 20
l -80 0
l 0 -60
l 30 0Z"
fill="rgb(255, 150, 0)"
/>
What we do now is remove all the grid lines...
<svg version="1.1" width="210px" height="130px" xmlns="http://www.w3.org/2000/svg">
<!---
<line x1="0" x2="210" y1="10" y2="10" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="20" y2="20" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="30" y2="30" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="40" y2="40" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="50" y2="50" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="60" y2="60" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="70" y2="70" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="80" y2="80" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="90" y2="90" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="100" y2="100" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="110" y2="110" stroke="grey" stroke-width="1"/>
<line x1="0" x2="210" y1="120" y2="120" stroke="grey" stroke-width="1"/>
<line x1="10" x2="10" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="20" x2="20" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="30" x2="30" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="40" x2="40" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="50" x2="50" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="60" x2="60" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="70" x2="70" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="80" x2="80" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="90" x2="90" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="100" x2="100" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="110" x2="110" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="120" x2="120" y1="0" y2="150" stroke="grey" stroke-width="1"/>
<line x1="130" x2="130" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="140" x2="140" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="150" x2="150" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="160" x2="160" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="170" x2="170" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="180" x2="180" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="190" x2="190" y1="0" y2="130" stroke="grey" stroke-width="1"/>
<line x1="200" x2="200" y1="0" y2="130" stroke="grey" stroke-width="1"/>
-->
<path d="M 100 10
l -90 0
l 0 40
l 30 0
l 0 70
l 120 0
l 15 -50
l -10 0
l 5 -20
l 30 0
l 0 -40
l -90 0
l 0 40
l 30 0
l -5 40
l 15 0
l 0 20
l -80 0
l 0 -60
l 30 0Z"
fill="rgb(255, 150, 0)"
/>
</svg>
And here's your (or rather,
my) SVG in its final glory!
Now let's test this with HTML. Create this file wth a
black background (or any color, really, other than
orange).
tt_logo.html<!DOCTYPE html>
<html>
<head>
<title>New T___T Logo</title>
</head>
<body style="background-color:black">
</body>
</html>
And add in the SVG file that we created, but in different sizes, for testing.
tt_logo.html<!DOCTYPE html>
<html>
<head>
<title>New T___T Logo</title>
</head>
<body style="background-color:black">
<img src="logo2.svg" />
<img src="logo2.svg" width="300" />
<img src="logo2.svg" width="100" />
</body>
</html>
Here, you can see the "S" part of SVG - "scalable", that is. No matter how big or small it is the logo remains crisp and sharp!
Final words
I like this new logo, and I thought the process of making it could be a good learning experience. The original will always have a place in my heart due to the lighthearted moments it was inspired from. But perhaps it's time for this blog to grow up, just a bit.
Ta___Ta for now!
T___T