Images: drawing logo's

Did you know that you can
draw your own logos?

Go to the menu-list
img alttext

How to "call" the image:

The easiest way to use your own SVG-images is to write a separate file for it with the extention .svg and call it with the basic HTML-img tag. That way you can use the image through your websites ánd give it the required attributes for SEO, validation etc.:

<img src="path to image & filename" alt="alternative text" width="image-width" height="image-height" />

Not an advertisement, but looks like it

SVG-logos, using the basic rectangle-shape

There are different basic shapes to use while making SVG-images. First I used the circle to create my own smileys, this time I am using the rectangle to create my own logos.

There's still a lot to learn, but after a couple of hours playing around with coördinates, colors and (stroke-)widths, I believe I have created something that I can use as a basic shape that suits my expectations: I wanted to make a HTML5-valid logo (using text within the image), because I do not like the logos that are being offered by the w3c-consortium.

A (not so very huge) list of the logos that I have made so far:

HTML5-valid logo:
Top

The code of the HTML5-logo:

<svg version="1.1"
width="100" height="140"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="50" height="70" rx="10" ry="10" stroke="#f0c040" fill="#c0c0d0" stroke-width="1.2"/>
<text x="14" y="36" fill="#ffcd42" stroke="#080070" stroke-width="0.72" font-family="calibri" font-size="18px">HTML</text>
<text x="28" y="68" font-family="calibri" font-size="32px" stroke="#110044" fill="#f0c040" stroke-width="1.2">5</text>
</svg>
 

Footnotes: